How to use the Dashboard Designer agent skill

What the dashboard skill makes the agent produce

An agent skill is a folder containing a SKILL.md file with instructions that a compatible agent reads when a request matches them. This skill covers admin, analytics, and control-panel screens. The output is one self-contained HTML file with a left navigation sidebar, a top bar with search and a user area, a row of KPI cards showing numbers and changes, and one or two charts drawn as inline SVG.

The skill tells the agent to take colours and typography from a design system file named DESIGN.md rather than inventing new ones, and to fill the page with realistic-looking metrics instead of placeholder text.

• Left sidebar of roughly 220 to 260px with a brand mark and 6 to 8 navigation links
• Top bar with page title, search input, and user avatar or status
• Row of 3 to 4 KPI cards with label, large number, and change versus prior period
• Primary chart as an inline SVG line, bar, or area chart
• Optional secondary chart or table such as recent events

Install the dashboard skill with a ZIP download

Download the ZIP for the dashboard skill from this page and unzip it. The skill folder contains SKILL.md and an example.html file. Place the folder in one of two locations depending on how you want to use it.

For a personal setup available across projects, put it in your user skills folder. For a single project, put it in that project's skills folder so it only applies there.

You can also upload the skill in the Claude apps under Settings, then Capabilities, then Skills.

• Personal: unzip into ~/.claude/skills/
• Single project: unzip into the project's .claude/skills/ folder
• Claude apps: Settings → Capabilities → Skills, then upload the skill

Prepare a DESIGN.md file before you ask

The skill expects a DESIGN.md design-system file in your project. The agent reads colours, typography, spacing, and component styling from it, and is told not to invent new tokens. Without this file the styling the skill relies on is missing, so add it before generating the dashboard.

The skill also needs a coding agent or AI assistant that reads SKILL.md files, such as Claude Code or the open-design tool, and a web browser to open the resulting HTML file.

• Project contains a DESIGN.md with colour and typography tokens
• Agent supports SKILL.md skill files
• Browser available to view the HTML file

Trigger the skill with natural requests

You do not need a special command. The skill is selected when your brief asks for a dashboard, admin panel, analytics view, or control panel. Name the subject being monitored, because the agent uses that to pick plausible metric names and values.

Names the skill recognises include dashboard, admin panel, analytics, and control panel. The skill also lists 后台 and 管理后台 as triggers.

• "Make an analytics dashboard for a subscription software product with MRR, churn, and trial conversions."
• "Design an admin panel for an online store showing orders, returns, and top-selling items."
• "Create a control panel mockup for a server operations team showing incidents and uptime."

Review the output before you share it

The skill includes a short self-check. Colours should come from DESIGN.md tokens, the accent colour should appear at most twice (the active sidebar item and one chart highlight), and the sidebar and top bar should stay fixed while the main area scrolls. Check these on the generated file before presenting it.

Because the numbers are generated samples, label the screen as a mockup or sample data when you share it. The skill mentions a baseline accessibility check, but its output still needs proper testing.

• Confirm colours match DESIGN.md
• Check the accent appears at most twice
• Confirm the sidebar and top bar stay in place when scrolling
• Label sample figures so they are not mistaken for real results