dashboard

Name: dashboard
Availability: InStock
Author: piercingxx

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

Ready to run

npx skills add https://github.com/PiercingXX/xx-stack --skill dashboard-piercingxx

💬 Prompt for ChatGPT / Claude Chat▼

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.