r/claudeskills • u/otabek-abdiraimov • 10h ago
Skill Share My free Claude Code dashboard skill built a dashboard I hated. So I rebuilt it from Stephen Few, Tufte and Apple's WWDC chart talks (v2)
A few weeks ago I shared a free Claude Code skill for building clean, honest dashboards. Thanks for all the feedback, it got way more attention than I expected.
Then I used it on a real project: the home dashboard of a school management system. The result was honest. Every number agreed with every other number, the QA pass checked 18 cross-totals. And I hated it.
It was a page of sentences. A line under every KPI explaining the number. A row of "insights" written as sentences. A note under every chart. It read like a report, and a school director doesn't read, they scan. The worst part: those were my skill's own rules ("one muted sub-line that explains the number", "an insights line of plain sentences").
So I went back to the sources:
- Stephen Few: Information Dashboard Design's 13 mistakes, his papers on colour rules and the bullet graph spec
- Tufte: data-ink, sparklines
- Cleveland & McGill via Nielsen Norman Group: which encodings people actually read accurately
- Datawrapper on sequential vs diverging vs classed colour scales
- Six of Apple's WWDC sessions on charts, chart accessibility and interface writing
- A dashboard designer whose work I admire, for how a page can say everything with numbers and shapes
What changed in v2
- Wordless: names, numbers, units and a one-word baseline ("▼ 15% vs Sep") on screen. Every explanation goes in a tooltip. The QA pass now counts sentences. Target: zero.
- Monitor: overview → what needs attention → closer look → act. Problems are flagged on the data itself, and the action sits on the flag (a "not marked yet" heatmap cell is the remind button).
- Inverted salience: a plain light-to-dark heatmap makes the worst cell the palest when low is bad. v2 uses classed tiers where intensity grows toward the problem, plus a non-colour cue for colour-blind readers.
- New components: heatmap, bullet graph (Few's spec, replaces gauges), segmented share bar, one tooltip system.
- New QA: a salience test ("where does the eye land first?"), real messy data, colour-blindness emulation, plus the old "known totals" check.
- A case study of the school dashboard in three versions, including the one I rejected.
How I tested it
I gave a fresh agent only the new skill and asked it to build a dashboard for ad buyers running Meta/Google campaigns for several clients (screenshots above, fake data, UI in Uzbek). It came back with a clean page: CPL heatmap per client per day, budget runway as bullet graphs, problems in amber, 0 sentences, all totals checked.
It also found real flaws in the skill: a contrast bug in my own heatmap snippet (accent text on accent tint, 3.1:1), two layout rules that contradicted each other, no rule for "neutral" metrics like spend. All fixed before release.
Install
/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill
Already installed? Run /plugin marketplace update dashboard-design-skill
Repo (MIT, free): https://github.com/abdiraimov-otabek/dashboard-design-skill
Works with SwiftUI too. Happy to hear where it breaks for you.