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

  [Project] Dashboard
  
    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; }
  

  [Dashboard Name]
  
    
  

KPI Card Pattern

  Revenue
  $124K
  ↑ 12.5%

SVG Bar Chart Pattern

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

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: I-Onlabs
• Source: I-Onlabs/claude-code-skills
• License: MIT

Install and usage instructions live in the source repository linked above.