Dashboard design
Skill Dragoon0x/everything-design-taste/skills/dashboard-design
Dashboard layout, data visualization placement, widget patterns, and information density management.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill dashboard-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.5 KB, 304 tokens by cl100k_base, as published. Nobody here has run it
Dashboard Design
Dashboard Types
| Type | Purpose | Density |
|---|---|---|
| Operational | Monitor real-time status | High, live data |
| Analytical | Explore trends and patterns | Medium, interactive |
| Strategic | Track KPIs and goals | Low, focused metrics |
Layout Patterns
- KPI bar at top: 3-5 key metrics with trend indicators.
- Primary chart below: the most important visualization, large.
- Supporting widgets in grid: secondary data in smaller containers.
- Activity feed in sidebar or bottom: recent events, logs.
Widget Design
- Title + value + trend indicator (up/down + percentage).
- Consistent sizing: widgets should snap to a grid (2-col, 3-col, 4-col).
- Hover/click for drill-down. Don't try to show all detail at once.
- Loading state per widget (skeleton), not a full-page loader.
Information Density
- Offer density toggle: Compact / Comfortable / Spacious.
- Default to comfortable. Power users will switch to compact.
- Time range selector: global (affects all widgets) + per-widget override.
Anti-Patterns
- Dashboards that show everything with no hierarchy (wall of charts).
- Pie charts for more than 5 categories (use bar charts).
- 3D charts (never, ever).
- Auto-refreshing charts that cause layout shifts.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.