Dashboard Design plugin
A Claude Code skill that builds and critiques dashboards: KPI tiles, charts and range pickers, checked on real screenshots.
- 457 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skill is rules, references and HTML examples; it runs no code and makes no network calls itself.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add plugins/dashboard-designDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill is rules, references and HTML examples; it runs no code and makes no network calls itself.
This is third-party code. Review the repository files before installing.
What it does
Dashboard Design gives an agent a rule set for data screens: analytics, revenue, metrics and admin. The skill covers KPI cards, charts, heatmaps, bullet graphs, comparison periods, ranked lists, date range pickers, filters, empty states and wide and phone layouts. The web and SwiftUI variants have separate references. The rules are distilled from 127 reviewed dashboards, the work of Stephen Few, Edward Tufte and Cole Nussbaumer Knaflic, and six Apple WWDC sessions on charts. Every job ends with a screenshot pass: the agent judges what is on screen, not what is in the code. The skill is wordless by design: numbers and shapes on the screen, explanations in tooltips.
Who it is for. Frontend developers and product people building analytics and admin screens who do not want the agent to produce generic template dashboards.
Good fit when
- A dashboard for visitors, signups and revenue by source is needed from scratch.
- Existing KPI tiles look heavy and should be simplified.
- A range picker made of native date inputs is awkward to use.
- A dashboard should be reviewed from a screenshot with issues ranked by harm.
Not a fit when
- A drop-in charting library with a ready API is needed: the skill gives rules and examples, not a component.
- Storage and a data pipeline for the metrics must be set up.
- The project uses a native mobile stack other than SwiftUI.
Example request
Build an analytics dashboard for this app: visitors, signups, revenue by source.Limitations
The skill enforces a strict visual style: wordless screens, dense typography, restrained highlighting. If a project already has a design system, the rules must be reconciled with it by hand. The screenshot pass requires the agent to have access to a browser or page render. For Codex, Cursor and other agents there is no automatic install: point AGENTS.md or a rules file at SKILL.md and the references load from there. The README carries a sponsor block advertising two third-party apps.
How to disable. Remove the plugin with /plugin, or delete the dashboard-design folder from ~/.claude/skills if the skill was installed by hand.
FAQ
How do I install Dashboard Design in Claude Code?
Run `/plugin marketplace add abdiraimov-otabek/dashboard-design-skill`, then `/plugin install dashboard-design@dashboard-design-skill`. The skill also triggers on its own during dashboard work.
Is there a SwiftUI variant?
Yes, the references folder has a separate swiftui.md. Apple chart guidance is included in the general rules.
What does a wordless dashboard mean?
There is no sentence under each number: a delta with a one-word baseline and a tooltip remain. The QA pass counts sentences on screen, with zero as the target.
How do I use it in Codex or Cursor?
Point `AGENTS.md` or a rules file at `skills/dashboard-design/SKILL.md`. The references load from that folder.
Which components are described?
KPI tiles, charts, heatmaps, bullet graphs, ranked lists, date range pickers, filters, tooltips and empty states. Each has rules and examples in references.
Discussion
No questions or reviews yet.
Related
PluginsA UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI
A Claude Code skill pack: token and component audits, governance, docs and reports for a design system team
A UI design skill: art direction per product, a shared DESIGN.md, tokens, and layout and accessibility checks in a browser.
A web-design skill for Claude Code: a DESIGN.md spec first, then code that follows it
A Codex skill: three distinct visual concepts, screenshot review and cutting excess, so interfaces look less templated.
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Dashboard Design (this card) | no | 457 | |
| Lieflat Charts | no | 6,839 | rules for charts; Dashboard Design covers the whole dashboard screen: tiles, filters, pickers and empty states |
| AntV Chart Visualization Skills | no | 534 | helps pick and build a chart; this skill sets composition and checks for the whole dashboard |
README in short
Version 2.1 adds target tiles, a stat strip with deltas and hatched movement bars. A density scale is defined: 14 px text, 16 px icons. The repository holds three single-file HTML examples: sales, traffic and status.