dashboard-builder

name	dashboard-builder
description	Build self-contained interactive HTML dashboards with charts, filters, and tables. Generates a single browser-openable file — no server or dependencies required.
vibe	Data without visualization is just noise.
context_trigger	dashboard, visualization, KPI, chart, analytics view, build dashboard, data dashboard, monitoring, metrics view
argument_hint	<description> [data source]
auto-invoke	false
model	default
source	anthropics/knowledge-work-plugins — data/skills/build-dashboard (2026-05-24)
stolen_date	2026-05-24

Dashboard Builder — Interactive HTML Dashboards

Stolen from: Anthropic Data Plugin — build-dashboard (2026-05-24) Adaptation: Stripped enterprise connectors, added Athena-specific data patterns.

When to Use

• Creating executive overview with KPI cards
• Turning query results into a shareable self-contained report
• Building a monitoring snapshot
• Needing multiple charts with filters in one browser-openable file
• Client deliverables requiring interactive data presentation

Workflow

1. Understand Requirements

Determine:

• Purpose: Executive overview, operational monitoring, deep-dive analysis, team reporting
• Audience: Who will use this dashboard?
• Key metrics: What numbers matter most?
• Dimensions: What should users be able to filter or slice by?
• Data source: Live query, pasted data, CSV file, or sample data

2. Gather Data

If data is available → Parse, clean, embed as JSON in the HTML file. If working from description → Create realistic sample dataset. Note it uses sample data. Provide swap instructions.

3. Design Layout

Follow standard dashboard layout:

┌──────────────────────────────────────────────────┐
│  Dashboard Title                    [Filters ▼]  │
├────────────┬────────────┬────────────┬───────────┤
│  KPI Card  │  KPI Card  │  KPI Card  │ KPI Card  │
├────────────┴────────────┼────────────┴───────────┤
│                         │                        │
│    Primary Chart        │   Secondary Chart      │
│    (largest area)       │                        │
│                         │                        │
├─────────────────────────┴────────────────────────┤
│                                                  │
│    Detail Table (sortable, scrollable)           │
│                                                  │
└──────────────────────────────────────────────────┘

Adapt to content:

• 2-4 KPI cards at top for headline numbers
• 1-3 charts in middle for trends and breakdowns
• Optional detail table at bottom for drill-down
• Filters in header or sidebar depending on complexity

4. Build HTML Dashboard

Single self-contained HTML file:

Structure: Semantic HTML5, responsive grid (CSS Grid/Flexbox), filter controls, KPI cards, chart containers, sortable data table.