Skip to content
Get packs

Admin Dashboard Template

Generates a single-page admin analytics dashboard with sidebar, KPI cards and charts

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill is a layout template that tells the agent how to build a standard admin or analytics dashboard as a single HTML page. When you ask for a dashboard, the agent follows the described structure: a fixed left sidebar with logo, navigation and user footer, a top bar with search, notifications and avatar, a row of three to five KPI cards, one or two main charts, and a recent activity list at the bottom. An example HTML file is included to show the expected look.

Great for

  • Designers or founders who need a quick mockup of an analytics or operations dashboard
  • Front-end developers who want a starting layout for an internal admin panel
  • Anyone prototyping a reporting screen before wiring up real data

Skip it if

  • Production dashboards that must show live or sensitive business data, since the skill only defines layout and includes no data connections or security review
  • Users who need a pixel-perfect brand design without editing the output, because the template is generic

Try asking

  • “Create a single-page admin dashboard for an e-commerce store with KPI cards and a sales line chart”
  • “Build an analytics dashboard mockup sized for a 1440px desktop screen”
  • “Make an operations dashboard with a sidebar, search top bar and recent activity list”
Step-by-step guide: how to use Admin Dashboard TemplateInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    dashboard.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip dashboard.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip dashboard.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the metrics and chart types you want (for example revenue line chart, orders bar chart) so the KPI cards and charts reflect your domain
  • Ask for a specific screen size or colour scheme, since the template hints at a 1440px desktop layout
  • Replace the sample numbers with your real data before sharing the page, because the output uses placeholder content

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.