dashboard

Generate a single-screen admin analytics dashboard HTML from a brief.

Updated May 2, 2026
One-click install
npx skills add https://github.com/az9713/open-design-tutorial --skill dashboard-az9713
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/az9713/open-design-tutorial/tree/main/skills/dashboard
Command: npx skills add https://github.com/az9713/open-design-tutorial --skill dashboard-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Consolidates admin analytics needs into a single, self-contained HTML dashboard, reducing setup time and ensuring consistent visuals across teams.

Core Features & Use Cases

  • Single HTML dashboard with a fixed left sidebar, top bar, KPI cards, and charts.
  • Reusable across admin panels, analytics pages, and operational overviews in web apps.
  • Works with a design system tokens to ensure consistent typography, color, and spacing.

Quick Start

Open index.html and replace the placeholder data with your real metrics to render the dashboard.

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-screen admin analytics dashboard from a brief?

Generate a single-screen admin analytics dashboard by providing a brief to create a self-contained HTML file. It outputs a ready-to-use index.html with a fixed left sidebar, top bar, KPI cards, and inline SVG charts.

What is the best way to prototype an admin panel UI with consistent design tokens?

Prototyping an admin panel UI with consistent design tokens involves generating a single-screen HTML dashboard. It applies a fixed design system to ensure uniform typography, color, and spacing across operational overviews.

Can I use this generated dashboard HTML for operational overviews in web apps?

Yes, you can use the generated dashboard HTML for operational overviews in web apps. The single-screen output is reusable across admin panels and analytics pages, requiring only an index.html entry and design tokens.

Do I need external dependencies to render the analytics dashboard?

You do not need external dependencies to render the analytics dashboard. The output is a self-contained single HTML file featuring a responsive grid and inline SVG charts, operating without external component libraries.

How do I update the KPI cards with real metrics after generating the dashboard?

Update the KPI cards with real metrics by opening the generated index.html file. You replace the placeholder data within the HTML structure to render your actual analytics values on the dashboard.