| name | dashboard-creator |
| description | Create HTML dashboards with KPI cards, bar/pie/line charts, progress indicators, and data tables. Use when asked to "create dashboard", "build KPI dashboard", "generate metrics visualization", "make analytics dashboard", "show performance dashboard", or "render data visualization as HTML". |
Dashboard Creator
Create interactive HTML dashboards with KPI cards and SVG charts.
Contents
When to Use
- "Create dashboard for [metrics]"
- "Show KPI visualization"
- "Generate performance / analytics / monitoring dashboard"
- "Make HTML report with charts"
Components
- KPI cards — metric name, value, change %, trend icon
- Charts — bar / pie / line as inline SVG (no external JS)
- Progress bars — completion indicators
- Data tables — tabular display
Workflow
- Extract metrics and structure the data
- Build KPI cards grid
- Generate SVG charts for each series
- Add progress indicators where applicable
- Write to
[name]-dashboard.html
- Verify (see Verification)
Use semantic colors: green = positive, red = negative, blue = neutral.
HTML Skeleton
<!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">
</div>
</body>
</html>
KPI Card Pattern
<div class="kpi-card">
<div class="kpi-label">Revenue</div>
<div class="kpi-value">$124K</div>
<div class="trend-up">↑ 12.5%</div>
</div>
SVG Bar Chart Pattern
<svg viewBox="0 0 400 300">
<rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
<rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
</svg>
Verification
After writing the HTML file, confirm success by checking all of these:
If any check fails, fix before reporting completion.
References
