How to use the Admin Dashboard Template agent skill

What is an agent skill, and what does this one make the agent do?

An agent skill is a folder containing a SKILL.md file that tells an AI agent how to handle a certain kind of task. When a request matches the skill, the agent follows the structure written in that file.

This skill defines a standard admin or analytics dashboard layout as a single page. The described structure is a fixed left sidebar with logo, navigation and a user footer; a top bar with search, notifications and an avatar; a row of three to five KPI cards; one or two main charts (line, bar or area); and a recent activity list at the bottom. The skill is scoped to layout only. The included example.html shows the expected look.

Install the dashboard skill from a ZIP file

Download the ZIP for the dashboard skill from this page, then unzip it. The folder should contain example.html and SKILL.md.

Choose where to put it. For a personal install, place the unzipped folder inside ~/.claude/skills/. For a single project, place it inside that project's .claude/skills/ folder. Alternatively, in the Claude apps, open Settings → Capabilities → Skills and upload the skill there.

• Personal: ~/.claude/skills/ (available across your projects)
• Project: .claude/skills/ inside the project folder
• Claude apps: Settings → Capabilities → Skills, then upload

Trigger the skill with a natural request

You do not need a special command. Ask for a dashboard in plain language and say what it is for, since the skill is built around admin and analytics screens. Naming the data type (sales, operations, support tickets) helps the agent label the KPI cards and charts sensibly.

The skill targets a desktop canvas of about 1440 pixels wide, so you can mention that if you want the layout tuned for it.

• "Make an admin dashboard mockup for an e-commerce operations team."
• "Build an analytics dashboard page with four KPI cards and a revenue line chart."
• "Create a reporting screen prototype with a sidebar, top bar and recent activity list."

Check the output against the included example

Compare the agent's result with example.html in the skill folder. It shows the expected sidebar, top bar, KPI grid, chart area and activity list, so you can judge whether the agent followed the structure.

Because the template is generic, expect to edit colours, fonts, labels and chart data yourself if you need brand-specific styling.

What the skill needs and safety notes

According to the skill's listing, it requires nothing beyond the agent itself. It does not run scripts and does not use the network. Its only files are example.html and SKILL.md.

The skill only defines layout. It includes no data connections, no authentication and no security review. Do not treat its output as ready for production dashboards that show live or sensitive business data. Add your own data handling and access controls when you wire up real data.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no

Tips for better dashboards

Ask for a specific number of KPI cards (three to five is the range the skill uses) and one or two charts, rather than a long list of widgets.

Use the output as a starting point for a developer, not a finished screen. Reviewing the HTML and replacing placeholder values keeps the mockup honest.

• Name the metrics you want in the KPI cards.
• Specify the chart type you prefer: line, bar or area.
• Iterate by asking the agent to change one part at a time, such as the sidebar or activity list.