skills.rest
PiercingXX
PiercingXXCOMMUNITY
Explore all skills by this author →
GitHub

dashboard

Generate a single-file admin dashboard with KPI cards and SVG charts.

1|Updated Jul 9, 2026
Search Tags:#html#analytics#design system#dashboard#admin ui#svg charts#kpi cards
One-click install
npx skills add https://github.com/PiercingXX/xx-stack --skill dashboard-piercingxx
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/PiercingXX/xx-stack/tree/main/packs/design/runtime/skills/design/dashboard
Command: npx skills add https://github.com/PiercingXX/xx-stack --skill dashboard-piercingxx

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

It turns a vague request for an “admin,” “analytics,” or “control panel” screen into a complete, single-file dashboard layout with realistic metrics and charts.

Core Features & Use Cases

  • Single-screen HTML output: Produces one self-contained page with a fixed sidebar, sticky top bar, KPI cards, and inline SVG charts.
  • Design-system compliant styling: Uses the active DESIGN.md tokens for colors, typography, spacing, and components without inventing new tokens.
  • Brief-driven content realism: Classifies what the dashboard monitors and generates plausible metric names, values, deltas, and event/table content rather than placeholders.

Quick Start

Use the dashboard skill to generate an admin analytics dashboard for your ops metrics using your current DESIGN.md tokens.

Frequently Asked Questions about dashboard

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate a single-file HTML admin dashboard from a text prompt?▼

You can generate a single-file HTML admin dashboard by providing a natural-language brief. The output is a self-contained page with a fixed sidebar, sticky top bar, KPI cards, and inline SVG charts.

What is the best way to build an analytics control panel with inline SVG charts?▼

The best way to build an analytics control panel is using brief-driven content generation to create realistic metrics and inline SVG charts. This approach ensures a complete, single-screen layout without manual chart coding.

Does the generated dashboard HTML require external CSS or JavaScript dependencies?▼

No, the generated dashboard HTML does not require external dependencies. It produces a production-ready, single-file layout using semantic HTML regions and design-system compliant styling from active tokens.

Can I use my own design system tokens for the admin UI layout?▼

Yes, you can use your own design system tokens for the admin UI. The dashboard generation applies active DESIGN.md tokens for colors, typography, and spacing without inventing new component styles.

How do I add realistic metrics and event tables to an analytics overview screen?▼

To add realistic metrics and event tables to an analytics overview, classify what the dashboard monitors. The generation logic creates plausible metric names, values, deltas, and table content rather than using placeholders.

What layout structure is included in a generated admin panel HTML file?▼

The layout structure in a generated admin panel HTML file includes a fixed left sidebar with navigation, a sticky top bar with search and user controls, KPI cards, and an events or table section.

Related Skills

Explore More Design & Creative Skills→
google-labs-codegoogle-labs-code
8.0k

design-md

Analyze Stitch project assets to generate a DESIGN.md design system document.

Official
Advanced
mhattingpetemhattingpete
657

dashboard-creator

Generate HTML dashboards with KPI cards, SVG charts, and data tables.

Community
Basic
yuping322yuping322
17

pitch-deck

Populate investment banking PowerPoint templates with source data and validate formatting.

Community
Advanced
sevenbelowllcsevenbelowllc

artifacts-builder

Initialize React projects and bundle them into single HTML files.

Official
Advanced