# Dashboard Data Design

> Dashboard data display, KPI design, real-time data visualization, and data density.

- Skill: `dragoon0x/dashboard-data-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/dashboard-data-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/dashboard-data-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/dashboard-data-design

---


# 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