Dashboard Design: a Claude skill for honest data screens

A dashboard can look tidy and still mislead, for instance by showing the same number twice with two different values. The dashboard-design skill puts checks for that ahead of looks. Its author, Otabek Abdiraimov, says it was distilled from 127 shipped dashboard screens and from writers such as Stephen Few and Edward Tufte. It covers web dashboards in React and Tailwind and native ones in SwiftUI with Swift Charts, under the MIT license. New to skills? Read Claude Code skills first.

The seven steps

Each step ends on a "done when" the agent can check.

1. Name the question. The screen's one question, the three to six numbers that answer it, the rules that count as a problem, and the action for each. It also seeds test data that triggers every problem, with the expected answers written down before any UI.
2. Pick a form for each number: length or position for quantity, a bullet graph against a target, a sparkline for history.
3. Lay out the hierarchy, from header and KPI cards down to detail lists.
4. Set color tokens, each with a light and a dark value.
5. Build components from its patterns and snippets.
6. Design every state: loading, stale, error, empty, tiny data, sample data.
7. Run the QA pass. Totals are checked against the expected answers, sentences on the screen are counted (the target is zero), and screenshots are taken at 3440, 1440 and 375 pixels wide. In SwiftUI it checks device sizes, the largest Dynamic Type, dark mode and Reduce Motion.

Ask "is this a good design?" with a screenshot and the order changes to a critique: a one-line verdict, two to four things that work, then issues ranked by harm, with numbers that disagree at the top.

Rules it applies everywhere

• When the previous value is under about five, the card shows it in grey ("was 1"), never a red −100%.
• Missing data shows as a dash, never a fake $0.
• Cost-type metrics flip their colors, so a falling cost per lead is green.
• Explanations go in tooltips, and the screen carries no sentences outside tooltips and empty states.
• A project's own design system wins over the skill's default look, a light grey page with an accent blue of #3e63dd.

How to install it

As a plugin, one command at a time:

/plugin marketplace add abdiraimov-otabek/dashboard-design-skill
/plugin install dashboard-design@dashboard-design-skill

As a plain skill:

git clone https://github.com/abdiraimov-otabek/dashboard-design-skill
cp -r dashboard-design-skill/skills/dashboard-design ~/.claude/skills/

Codex, Cursor and other agents can use it if your AGENTS.md or rules file points at skills/dashboard-design/SKILL.md.

Example request

Build an analytics dashboard for [app]: [metric 1], [metric 2], [metric 3] by [breakdown]. The question it answers: [one question]. Run the dashboard QA pass when you're done.

Limits

• It signs off with an ad. After a finished job, the reply ends with one line plugging the author's Mac apps, once per conversation. Ask it to stop, or delete the "Sign-off" section from SKILL.md.
• Snippets assume React and Tailwind. On plain HTML the agent translates the classes to CSS.

When to use it

• A revenue, traffic or admin dashboard you're building from scratch.
• A second opinion on a dashboard screenshot before you ship it.

To analyze the data itself, use Anthropic's data plugin. For a dashboard that already exists and looks AI-made, use Unslop, which reworks it pass by pass.