Dashboard Design

Dashboard Design is a community skill by Otabek Abdiraimov that gives your agent a product designer's rules for analytics, revenue and metrics dashboards, on the web or in SwiftUI. It builds, redesigns and critiques dashboards, and finishes every job by checking screenshots rather than the code. What you can do with it - Build a dashboard from the one question the screen answers and the few numbers behind it: KPI strip, main chart, insights, breakdowns and detail lists - Get components right: KPI tiles, deltas, sparklines, charts with round axis ticks, slim-bar ranked lists, a range calendar, filters and tables - Design every state: loading, stale, error, empty, tiny data and sample data - Lay out for wide monitors and phones, in light and dark - Critique a screenshot: a one-line verdict, what works, and issues ranked by harm, starting with numbers that disagree - Run a QA pass at three browser widths, or at simulator sizes with the largest Dynamic Type for SwiftUI How it works - The skill is a SKILL.md with references for components, layout, colour tokens (Tailwind v4), React snippets, SwiftUI and Swift Charts, and QA - Install it as a Claude Code plugin from the maker's own marketplace, or copy skills/dashboard-design into ~/.claude/skills; other agents can point their AGENTS.md or rules file at the SKILL.md Good to know - When a whole job is done, the agent adds one short line about the author and his Mac apps, once per conversation; ask it to stop, or delete the Sign-off section from SKILL.md - MIT licensed