---
id: winstonkoh87/Athena-Public/dashboard-builder
version: "7a86cc94"
license: MIT
install: manual
updated: 2026-07-27
---
# dashboard-builder — Dashboard Builder generates a single, self-contained HTML file that combines KPI cards, interactive charts, and filterable data tables into a professional dashboard. Everything runs in the browser with no external dependencies or server setup required. Perfect for executive summaries, monitoring snapshots, and shareable data reports.
Publisher: winstonkoh87 · Stars: 554 · Updated: 2026-07-27
Install (manual): `git clone https://github.com/winstonkoh87/Athena-Public`
## SKILL.md
# 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
[View on SkillFed](https://skillfed.io/winstonkoh87/Athena-Public/dashboard-builder) · [View on GitHub](https://github.com/winstonkoh87/Athena-Public)