playbooks

home / skills / mhattingpete / claude-skills-marketplace / dashboard-creator

dashboard-creator skill

/visual-documentation-plugin/skills/dashboard-creator

This skill helps you generate interactive HTML dashboards with KPI cards and charts for metrics visualization and monitoring.

npx playbooks add skill mhattingpete/claude-skills-marketplace --skill dashboard-creator

Review the files below or copy the command above to add this skill to your agents.

Files (5)
SKILL.md
1.9 KB
---
name: dashboard-creator
description: 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.
---

# 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 300">
  <rect x="50" y="100" width="40" height="150" fill="#4299e1"/>
  <rect x="120" y="80" width="40" height="170" fill="#48bb78"/>
  <!-- bars for each data point -->
</svg>
```

## 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).

Overview

This skill creates lightweight, responsive HTML dashboards with KPI metric cards, SVG charts, progress indicators, and data tables. It focuses on clear visual hierarchy, semantic colors for trends, and simple markup that can be dropped into any project. Use it to turn raw metrics into shareable, interactive dashboard pages quickly.

How this skill works

Provide the metric names, values, and time-series or categorical data and the skill generates an HTML file containing a grid of KPI cards, SVG-based bar/pie/line charts, progress bars, and optional tables. Charts are rendered as SVG for crisp visuals and easy customization; trend states use semantic classes (trend-up, trend-down). The output is a single HTML page styled with minimal CSS so it can be embedded or served as a static dashboard.

When to use it

  • Quickly prototype an analytics dashboard from CSV or JSON metrics.
  • Display KPI summaries and trend indicators for product or ops monitoring.
  • Create lightweight HTML exports of reporting data for stakeholders.
  • Build visualizations when you need self-contained, static dashboards.
  • Generate visual summaries for demos, sprint reviews, or status reports.

Best practices

  • Supply normalized numeric values and timestamped series for accurate charts.
  • Use semantic color conventions: green for positive, red for negative, blue for neutral.
  • Limit KPI cards to key metrics (4–8) to avoid cognitive overload.
  • Prefer SVG for charts to retain clarity at different sizes and for easy styling.
  • Include alt text or captions for tables and charts to improve accessibility.

Example use cases

  • Revenue and conversion KPI dashboard with revenue card, MTD trend, and weekly line chart.
  • Operations dashboard showing uptime %, incident counts as KPI cards, and a bar chart of incidents by service.
  • Product analytics page with DAU/MAU cards, retention line chart, and user segment pie chart.
  • Performance report exported as a single HTML file for offline review or email attachments.

FAQ

Can the charts be customized?

Yes. Charts are SVG-based and styled via CSS classes; colors, sizes, and labels can be adjusted directly in the HTML/CSS.

How do I feed data into the dashboard?

Provide metric values and series as JSON or CSV, then map fields to KPI cards and chart rectangles/paths. The workflow extracts metrics, builds cards, generates SVG, and writes the HTML file.