# Dashboard Design > Gives your agent a designer's rules for clean, honest dashboards on the web or in SwiftUI, from KPI tiles to a screenshot QA pass. 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 - Type: Skill - Made by: abdiraimov-otabek - Category: Data & analytics - Formats: Skills - Version: a9c6c76 - Source: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design - Page: https://pluginboard.ai/skills/dashboard-design ## Works with - ChatGPT - Claude - Gemini - GitHub Copilot - Cursor - Claude Code - Codex - Antigravity - Gemini CLI - Replit - OpenClaw - OpenCode - Hermes Agent ## Install ### ChatGPT In ChatGPT: Download the dashboard-design folder and zip it, then Plugins → Skills → Create → Upload from your computer. Business and Enterprise plans. View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Claude In Claude (web or desktop): Download the dashboard-design folder and zip the folder itself, then upload it in Customize → Skills. View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Gemini In Gemini: Download the dashboard-design folder, then at gemini.google.com click Customize → Skills → Create → Upload and pick the folder (or a .zip of it). View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### GitHub Copilot Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.copilot/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Cursor Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.cursor/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Claude Code Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.claude/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design Or as a Claude Code plugin: ```text /plugin marketplace add abdiraimov-otabek/dashboard-design-skill /plugin install dashboard-design@dashboard-design-skill ``` ### Codex Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.agents/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Antigravity In Antigravity: Copy the dashboard-design folder into ~/.gemini/config/skills (Antigravity app and IDE) or ~/.gemini/antigravity-cli/skills (Antigravity CLI). View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Gemini CLI Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.gemini/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Replit Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design .agents/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### OpenClaw Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.openclaw/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### OpenCode Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.config/opencode/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design ### Hermes Agent Run in your terminal: ```shell npx -y degit abdiraimov-otabek/dashboard-design-skill/skills/dashboard-design ~/.hermes/skills/dashboard-design ``` View the folder on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill/tree/HEAD/skills/dashboard-design --- From Pluginboard (https://pluginboard.ai).