Dashboard layout
Skill Dragoon0x/everything-design-taste/skills/dashboard-layout
Dashboard design, widget layouts, KPI displays, dashboard personalization, and information density.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill dashboard-layoutAssembled 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, 320 tokens by cl100k_base, as published. Nobody here has run it
Dashboard Layout
Dashboard Types
| Type | Purpose | Density |
|---|---|---|
| Executive | High-level KPIs at a glance | Low |
| Operational | Monitor real-time status | High |
| Analytical | Explore and compare data | Medium-High |
| Personal | Track individual progress | Medium |
Layout Principles
- Most important metrics at the top. Above the fold, largest cards.
- Group related widgets. Revenue metrics together, user metrics together.
- Consistent grid. Use a 12-column grid, widgets span 3, 4, 6, or 12 columns.
- White space between widgets. 16-24px gaps minimum.
- Don't pack everything in. A focused dashboard with 6-8 widgets beats a cluttered one with 20.
KPI Cards
[Icon] Label
42,389 ↑ 12.5%
- Large number is the focal point
- Trend indicator (up/down arrow + percentage)
- Comparison period label ("vs last month")
- Subtle sparkline for trend visualization (optional)
Data Refresh
- Show last updated timestamp
- Auto-refresh interval (configurable)
- Visual indicator during refresh (subtle, not disruptive)
- Don't flash or jump when data updates
Personalization
- Allow widget reordering (drag and drop)
- Show/hide widgets
- Save layout per user
- Offer preset layouts for different roles
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.