# Dashboard Creator
> 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".
- Skill: `i-onlabs/dashboard-creator` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add i-onlabs/dashboard-creator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/i-onlabs/dashboard-creator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: I-Onlabs (https://skillmd.com/u/i-onlabs)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/i-onlabs/dashboard-creator
---
# Dashboard Creator
Create interactive HTML dashboards with KPI cards and SVG charts.
## Contents
- [When to Use](#when-to-use)
- [Components](#components)
- [Workflow](#workflow)
- [HTML Skeleton](#html-skeleton)
- [KPI Card Pattern](#kpi-card-pattern)
- [SVG Bar Chart Pattern](#svg-bar-chart-pattern)
- [Verification](#verification)
- [References](#references)
## When to Use
- "Create dashboard for [metrics]"
- "Show KPI visualization"
- "Generate performance / analytics / monitoring dashboard"
- "Make HTML report with charts"
## Components
1. **KPI cards** — metric name, value, change %, trend icon
2. **Charts** — bar / pie / line as inline SVG (no external JS)
3. **Progress bars** — completion indicators
4. **Data tables** — tabular display
## Workflow
1. Extract metrics and structure the data
2. Build KPI cards grid
3. Generate SVG charts for each series
4. Add progress indicators where applicable
5. Write to `[name]-dashboard.html`
6. Verify (see [Verification](#verification))
Use semantic colors: green = positive, red = negative, blue = neutral.
## HTML Skeleton
```html
[Project] Dashboard
[Dashboard Name]
```
## KPI Card Pattern
```html
Revenue
$124K
↑ 12.5%
```
## SVG Bar Chart Pattern
```html
```
## Verification
After writing the HTML file, confirm success by checking all of these:
- [ ] File exists at the target path and is non-empty
- [ ] Open in a browser — page renders without console errors
- [ ] Every KPI card shows a value (no empty `[PLACEHOLDER]` strings left in)
- [ ] Every SVG chart has bars/slices/lines proportional to the data (not all the same size)
- [ ] Trend colors match direction (green for positive deltas, red for negative)
If any check fails, fix before reporting completion.
## References
- [`references/design_patterns.md`](references/design_patterns.md) — color system, typography, component patterns
- [`references/svg_library.md`](references/svg_library.md) — SVG shapes, gradients, chart techniques