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