# Dashboard Builder
> Build self-contained interactive HTML dashboards with charts, filters, and tables. Generates a single browser-openable file — no server or dependencies required.
- Skill: `winstonkoh87/dashboard-builder` (Agent Skill)
- Install (CLI): `npx skillmds@latest add winstonkoh87/dashboard-builder`
- Raw SKILL.md: https://api.skillmd.com/api/skills/winstonkoh87/dashboard-builder/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: winstonkoh87 (https://skillmd.com/u/winstonkoh87)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/winstonkoh87/dashboard-builder
---
# Dashboard Builder — Interactive HTML Dashboards
> **Stolen from**: [Anthropic Data Plugin — build-dashboard](https://github.com/anthropics/knowledge-work-plugins/tree/main/data/skills/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.
**Styling**: Professional dark/light scheme, card-based layout with subtle shadows, consistent typography (system fonts), responsive, print-friendly.
**Interactivity**: Chart.js for charts, filter dropdowns updating all views simultaneously, sortable columns, hover tooltips, number formatting.
**Data**: All data embedded as JavaScript variables. No external fetches. Works completely offline.
### 5. Chart Types
| Chart | Use For |
|:------|:--------|
| Line | Time series trends |
| Bar | Category comparisons |
| Doughnut | Composition (<6 categories) |
| Stacked bar | Composition over time |
| Mixed (bar + line) | Volume with rate overlay |
### 6. Base Template
```html
Dashboard Title
```
### 7. Save and Open
1. Save as descriptive name (e.g., `sales_dashboard.html`)
2. Open in user's default browser
3. Confirm it renders correctly
4. Provide instructions for updating data or customizing
## References
- [Anthropic build-dashboard](https://github.com/anthropics/knowledge-work-plugins/tree/main/data/skills/build-dashboard) — Source skill
- Athena precedent: web-based interactive deliverables as single HTML files