Dashboard Skill
How this skill behaves (read first)
This is a generative skill, and dashboards have a signature over-design trap: cramming every available metric onto one screen. As the lessons put it — "when everything is important, nothing is." The default instinct is to show all the data; a good dashboard shows the few things that answer the user's question. So this skill gates:
- Establish who's looking and what decision they're making — that determines what belongs on the screen.
- Apply the always-true core — organization, hierarchy, and chart-fit principles that hold for any dashboard.
- Decide density, detail, and chart types deliberately — surface the context-dependent choices instead of defaulting to "show it all."
Then hand off to the audits — especially aesthetics (clutter/hierarchy is the make-or-break here).
Step 0 — Establish context before designing
- Audience & the decision they make — when and why they look at this, and what action the data should drive. (User research is the real answer; ask if unknown.) This is the filter for what belongs.
- Dashboard type:
- Operational — real-time, monitoring, needs an immediate response (patient vitals, flight traffic). Comprehensive at a glance, frequent updates.
- Analytical — for investigation and thoughtful decisions (a sales dashboard); not time-sensitive, supports drill-down.
- Roles — one audience or many? Multiple roles → customization matters.
- Platform — screen size shapes how many widgets fit and the responsive layout.
State assumptions if proceeding without answers.
The always-apply core (true for any dashboard)
- Start from the user's question, not the data you have. For each widget ask: "what decision does this support?" If nothing, cut it. Let goals + user needs + data nature pick the widgets.
- Don't overwhelm. Relevant few over comprehensive many. Density without hierarchy is a mess.
- Prioritize for scanning. People scan, not read. Put the most important metric where the eye lands first; arrange by importance.
- Group related content. Use containers, dividers, and white space so related metrics read as a group (common-region principle); section labels/titles act as visual anchors — make them distinct.
- Use white space to segment and highlight — it improves legibility in data-dense screens and gives key numbers breathing room.
- Keep structure consistent — shared alignment, title sizes, and margins across containers; this also makes responsive layouts scale.
- Keep comparison data visible together. Don't bury things users need to compare behind tabs/pop-ups; never hide always-needed info. Use tabs only for content that isn't compared side by side.
- Match the chart to the data (see reference below) — the single highest-leverage correctness decision.
The context-dependent decisions (surface, don't auto-apply)
| Decision | Apply when | Avoid / adapt when | Default recommendation |
|---|---|---|---|
| Operational vs. analytical framing | Real-time monitoring needs glanceable, comprehensive layout | Analytical use wants drill-down, less time pressure | Match layout/refresh to the type from Step 0 |
| Which metrics/widgets to show | The metric supports a real decision | "Because we have the data" / vanity metrics | Ruthlessly cut to what answers the user's question |
| Level of detail / drill-down | Analytical dashboards benefit from overview → detail | Operational dashboards needing everything visible at once | Overview first, progressive drill-down; don't tab-hide comparisons |
| Chart type per metric | Pick by data intent (trend/compare/part-of-whole/correlation) | Decorative chart choices; pie charts for many categories | Match to data (reference below) |
| Customization by role | Multi-role systems (sales mgr vs. analyst) | Single, well-known audience (adds needless complexity) | Offer when roles genuinely differ |
| Real-time updates | Operational monitoring | Analytical review (constant refresh is noise) | Refresh cadence matched to decision speed |
Chart selection & honesty (quick reference)
Match the chart to the data intent:
- Bar — compare discrete categories. Line — trends over time. Area — trend + volume over time. Pie/Donut — parts of a whole (few slices only). Scatter — correlation between two variables. Bubble — three dimensions. Radar — compare multiple variables (few). Candlestick — financial price ranges.
Chart honesty & clarity (non-negotiable — these mislead or exclude users):
- Start axes at zero. A truncated baseline exaggerates differences and is misleading. (Deliberately misleading viz → flag with the dark-patterns audit.)
- No 3D chart styling — it distorts perceived values.
- Don't encode meaning with color alone — pair with icons/labels/shapes (→ accessibility).
- Horizontal labels, readable annotations, consistent color/markers, appropriate intervals (don't crowd a year into daily ticks), standard sharp-cornered bars, focus/unfocus states for multi-line charts.
Validate the result (orchestration)
Hand-offs name each lens by its installable skill
name. Invoke one only if that skill is installed; if it isn't, this skill's own core already carries these rules — proceed without it rather than blocking.
After generating or revising, hand the result to the audit lenses rather than declaring it done. These are candidate lenses — posture is set by docs/orchestration-policy.md, or route the whole thing through ux-design-review. Here, heuristics, dark-patterns, and microcopy are Tier A (auto-run); accessibility and aesthetics are Tier B (offered) — under an existing design system aesthetics is suppressed and accessibility narrows to usage. If the user invoked this skill for one specific thing, respect that scope.
ux-aesthetics-audit(Tier B — offer; suppress under a design system) — the dashboard make-or-break: clutter, visual hierarchy, white space, container grouping, "is one thing clearly most important?"ux-heuristics-audit(Tier A) — recognition, visibility of status (esp. operational), user control (customization), keeping comparisons visible.ux-accessibility-audit(Tier B — offer; narrow under a design system) — chart color not the sole encoding, contrast, labelled sections, keyboard access to interactive widgets.ux-dark-patterns-audit(Tier A) — misleading visualization: truncated axes, 3D distortion, cherry-picked intervals.ux-microcopy-audit(Tier A) — section titles, labels, and annotations are clear and consistent.
If aesthetics flags overload, return to the gate: cut widgets back to the ones that answer the user's question.
Common do/don't patterns
| ❌ Don't | ✅ Do |
|---|---|
| Show every metric you have | Show the few that support a decision |
| Equal visual weight for everything | Prioritize; most important where the eye lands first |
| Loose widgets floating on one plane | Group with containers, dividers, white space, labelled sections |
| Hide comparison data behind tabs | Keep side-by-side comparisons visible together |
| Decorative chart choice / pie with 12 slices | Match chart to data intent |
| Truncated y-axis / 3D bars | Zero baseline, flat charts — don't mislead |
| Color-only series legend | Color + icon/label/shape |
| Vertical/diagonal axis labels | Horizontal, readable labels |
| Ship without checking | Hand off to aesthetics + heuristics + accessibility |
