--- name: Dashboard slug: dashboard category: Frontend description: Dashboard generates a single-file admin or analytics dashboard in HTML, with a fixed sidebar, top bar, KPI cards, and inline SVG charts. Use it when a design brief requests a dashboard, admin, analytics, or control panel screen. github: "https://github.com/nexu-io/open-design/tree/main/design-templates/dashboard" language: TypeScript stars: 85409 forks: 10012 install: "npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/dashboard ~/.claude/skills/dashboard" installs_to: ~/.claude/skills/dashboard source_path: design-templates/dashboard/SKILL.md collection_size: 25 category_size: 567 collection_url: "https://dirskills.com/collections/nexu-io/open-design" added: 2026-08-13T07:36:07.573Z last_synced: 2026-08-13T07:36:07.573Z canonical_url: "https://dirskills.com/skills/dashboard" --- # Dashboard Dashboard generates a single-file admin or analytics dashboard in HTML, with a fixed sidebar, top bar, KPI cards, and inline SVG charts. Use it when a design brief requests a dashboard, admin, analytics, or control panel screen. **Install:** ```bash npx degit https://github.com/nexu-io/open-design/tree/main/design-templates/dashboard ~/.claude/skills/dashboard ``` ## README # Dashboard Skill Produce a single-screen admin / analytics dashboard. ## Workflow 1. **Read the active DESIGN.md** (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens. 2. **Classify** what the dashboard monitors (sales, traffic, usage, incidents, ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders. 3. **Lay out** the required regions: - **Left sidebar** (220–260px): brand mark at top, 6–8 nav links with icons, active state uses the DS accent. - **Top bar**: page title on the left, search input + user avatar / status on the right. - **Main**: - Row 1: 3–4 KPI cards (label + big number + delta vs. prior period). - Row 2: one primary chart (full width or 2/3) — render as an inline SVG line / bar / area chart drawn from real-looking numbers. - Row 3: one secondary chart or table (recent events, top items, etc.). 4. **Write** one self-contained HTML document: - `` through ``, CSS in one inline `