Data Dashboard

---
name: data-dashboard
description: |
  Create visual data dashboards with charts, KPIs, and insights.
  TRIGGERS - Use when user wants a dashboard, data visualization, or metrics overview.
---

# Data Dashboard Creator

## Overview
Creates interactive or static dashboards with KPI cards, charts, and trend analysis. Can output as HTML/React artifacts, Excel, or design specs.

## Workflow

### Step 1: Define the Dashboard
1. **Purpose**: What decisions should this dashboard inform?
2. **Audience**: Who views it? (exec, team, clients)
3. **Data source**: Where does the data come from?
4. **KPIs**: What are the 3-5 most important metrics?
5. **Update frequency**: Real-time, daily, weekly, monthly?
6. **Output format**: Interactive (HTML/React), Excel, or design spec?

### Step 2: Design the Layout

**Dashboard hierarchy:**
```
TOP ROW: KPI Cards (3-5 key numbers)
MIDDLE: Primary chart (biggest insight)
BOTTOM LEFT: Secondary chart
BOTTOM RIGHT: Table or list
```

### Step 3: Select Visualizations

| Data Type | Best Chart | When to Use |
|-----------|-----------|-------------|
| Trend over time | Line chart | Revenue, users, growth |
| Comparison | Bar chart | Month vs month, team vs team |
| Composition | Pie/donut | Market share, budget allocation |
| Distribution | Histogram | Customer segments, pricing |
| Relationship | Scatter plot | Correlation analysis |
| Progress | Gauge/progress | Goal tracking |
| Ranking | Horizontal bar | Top performers |

### Step 4: Build the Dashboard

Create as HTML/React artifact with:
- Responsive layout
- Color-coded KPI cards (green = good, red = needs attention)
- Interactive hover states
- Clean, professional design
- Dark or light theme

## Output Format
Generate an interactive HTML or React dashboard artifact, or provide design specifications for implementation.

## Quality Checklist
- [ ] 3-5 KPI cards at top
- [ ] Most important insight is the largest visual
- [ ] Colors are meaningful (not decorative)
- [ ] Readable on mobile
- [ ] Time period clearly stated
- [ ] Data source noted