---
name: Dashboard Creator
slug: dashboard-creator-2
category: Data
description: Dashboard Creator builds interactive HTML dashboards with KPI cards, charts, progress bars, and data tables. Use it when you need metrics displays, analytics views, or monitoring interfaces.
github: "https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/dashboard-creator"
language: HTML
stars: 664
forks: 95
install: "npx degit https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/dashboard-creator ~/.claude/skills/dashboard-creator"
installs_to: ~/.claude/skills/dashboard-creator
source_path: visual-documentation-plugin/skills/dashboard-creator/SKILL.md
collection_size: 18
category_size: 668
collection_url: "https://dirskills.com/collections/mhattingpete/claude-skills-marketplace"
added: 2026-08-24T05:17:03.430Z
last_synced: 2026-08-24T05:17:03.430Z
canonical_url: "https://dirskills.com/skills/dashboard-creator-2"
---
# Dashboard Creator
Dashboard Creator builds interactive HTML dashboards with KPI cards, charts, progress bars, and data tables. Use it when you need metrics displays, analytics views, or monitoring interfaces.
**Install:**
```bash
npx degit https://github.com/mhattingpete/claude-skills-marketplace/tree/main/visual-documentation-plugin/skills/dashboard-creator ~/.claude/skills/dashboard-creator
```
## README
# 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
[Project] Dashboard
[Dashboard Name]
```
## KPI Card Pattern
```html
Revenue
$124K
↑ 12.5%
```
## Chart Pattern (SVG Bar Chart)
```html
```
## Workflow
1. Extract metrics and data
2. Create KPI cards grid
3. Generate charts (bar/pie/line) as SVG
4. Add progress indicators
5. Write to `[name]-dashboard.html`
Use semantic colors: green (positive), red (negative), blue (neutral).