dashboard-creator
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Dashboard Creator Create interactive HTML dashboards with KPI cards and charts. ## When to Use - "Create dashboard for [metrics]" - "Show KPI visualization" - "Generate performance dashboard" - "Make analytics dashboard with charts" ## Components 1. **KPI Cards**: metric name, value, change %, trend icon 2. **Charts**: bar/pie/line using SVG or CSS 3. **Progress Bars**: completion indicators 4. **Data Tables**: tabular data display ## HTML Structure ```html <!DOCTYPE html> <html> <head> <title>[Project] Dashboard</title> <style> body { font-family: system-ui; background: #f7fafc; } .kpi-card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .kpi-value { font-size: 36px; font-weight: bold; } .trend-up { color: #48bb78; } .trend-down { color: #e53e3e; } </style> </head> <body> <h1>[Dashboard Name]</h1> <div class="grid"> <!-- KPI cards --> <!-- Charts --> <!-- Progress bars --> </div> </body> </html> ``` ## KPI Card Pattern ```html <div class="kpi-card"> <div class="kpi-label">Revenue</div> <div class="kpi-value">$124K</div> <div class="trend-up">↑ 12.5%</div> </div> ``` ## Chart Pattern (SVG Bar Chart) ```html <svg viewBox="0 0 400 30
- When to Use
- Components
- HTML Structure
- KPI Card Pattern
- Chart Pattern (SVG Bar Chart)
- Workflow
What does the dashboard-creator skill do?
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
How do I install it?
Run `npx skills add mhattingpete/claude-skills-marketplace --skill dashboard-creator --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mhattingpete/claude-skills-marketplace, a repository with 656 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.