Dashboard data design
Skill Dragoon0x/everything-design-taste/skills/dashboard-data-design
Dashboard data display, KPI design, real-time data visualization, and data density.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill dashboard-data-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.3 KB, 253 tokens by cl100k_base, as published. Nobody here has run it
Dashboard Data Design
KPI Card Design
┌──────────────────────┐
│ [icon] Metric Name │
│ 42,389 ↑ 12.5% │
│ vs last month │
└──────────────────────┘
- Large number = focal point
- Trend arrow + percentage
- Comparison period clearly labeled
- Color: green for positive, red for negative (with icon for color blindness)
Data Density Guidelines
| Audience | Density | Details |
|---|---|---|
| Executive | Low | 4-6 KPIs, simple charts |
| Manager | Medium | 8-12 metrics, filters, drill-down |
| Analyst | High | Dense tables, complex charts, custom queries |
Real-Time Data
- Show last updated timestamp
- Subtle refresh animation (not full-page reload)
- Don't flash or jump when data updates
- Historical comparison always available
- Configurable auto-refresh interval
Drill-Down Pattern
- Overview → click metric → detailed breakdown
- Breadcrumb trail showing drill-down path
- Back button to return to overview
- Filter context preserved across drill-downs
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.