Repolode
Submit
abdiraimov-otabek

abdiraimov-otabek/dashboard-design-skill

A Claude Code skill that teaches a coding agent to build, redesign and critique clean, honest dashboard UIs with a screenshot QA pass.

View on GitHub
Stars
384
Forks
21
Open issues
1
Last commit
10 days ago

What is it?

This is an agent skill for Claude Code, written as Markdown instructions and reference files, that guides an AI coding agent through designing analytics, revenue, metrics and admin dashboards. It covers KPI cards and deltas, charts, heatmaps, bullet graphs, comparison periods, ranked lists, date range pickers, filters, empty and error states, and wide and phone layouts. The guidance favours numbers and shapes on screen, with explanations moved into tooltips.

The skill ends each job with a screenshot QA pass at several browser widths, so the result is judged on what is visible rather than on the code. Web specs use Tailwind terms with React snippets, and a SwiftUI and Swift Charts reference is included. The rules are drawn from data-visualization literature and from a set of shipped dashboards.

It can be installed as a Claude Code plugin or copied in as a plain skill, and other Markdown-reading agents can load it through an AGENTS.md or rules file.

Key features

  • 01Covers KPI tiles, charts, heatmaps, bullet graphs, ranked lists and date range pickers.
  • 02Includes a screenshot QA pass at desktop, wide and phone widths.
  • 03Provides Tailwind v4 colour tokens and React snippets for web projects.
  • 04Offers a SwiftUI and Swift Charts reference with simulator checks.
  • 05Includes a critique format that ranks issues by harm.

Use cases

  • Having a coding agent build an analytics dashboard from scratch.
  • Asking an agent to critique or redesign an existing dashboard screenshot.
  • Standardising dashboard components such as date pickers and KPI tiles across a team's projects.

Quick start

  1. 1

    Add the marketplace in Claude Code

    /plugin marketplace add abdiraimov-otabek/dashboard-design-skill
  2. 2

    Install the dashboard-design plugin

    /plugin install dashboard-design@dashboard-design-skill

Things to know

  • Built for Claude Code; other agents need their AGENTS.md or rules file pointed at the skill manually.
  • Web specs use Tailwind and React snippets, so other stacks need adapting, apart from the separate SwiftUI reference.
  • When it finishes a job it adds a short sign-off promoting the author's Mac apps unless you remove that section.

In collections

UI design skills for AI coding agentsClaude Code tools, skills & pluginsAI agent skill librariesDashboards & business intelligence toolsData science courses & tools

Topics

#agent-skills#claude-code#dashboard-design#data-visualization#ui-design#tailwindcss#analytics#claude-skill#dashboard

FAQ

What is dashboard-design-skill?
A Claude Code skill that teaches a coding agent to build, redesign and critique clean, honest dashboard UIs with a screenshot QA pass. This is an agent skill for Claude Code, written as Markdown instructions and reference files, that guides an AI coding agent through designing analytics, revenue, metrics and admin dashboards. It covers KPI cards and deltas, charts, heatmaps, bullet graphs, comparison periods, ranked lists, date range pickers, filters, empty and error states, and wide and phone layouts. The guidance favours numbers and shapes on screen, with explanations moved into tooltips.
Is dashboard-design-skill free to use? What license does it have?
dashboard-design-skill is open source under the MIT license. Check the license terms before using it in commercial products.
Is dashboard-design-skill still maintained?
Actively maintained. The last commit to dashboard-design-skill was on Oct 28, 2026.
What can I use dashboard-design-skill for?
Having a coding agent build an analytics dashboard from scratch. Asking an agent to critique or redesign an existing dashboard screenshot. Standardising dashboard components such as date pickers and KPI tiles across a team's projects.
How do I install dashboard-design-skill?
Add the marketplace in Claude Code: /plugin marketplace add abdiraimov-otabek/dashboard-design-skill Install the dashboard-design plugin: /plugin install dashboard-design@dashboard-design-skill
Where can I get dashboard-design-skill?
The source code and installation instructions are on GitHub: https://github.com/abdiraimov-otabek/dashboard-design-skill

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects