skills.rest
junainfinity
junainfinityCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

dashboard

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

Updated Aug 23, 2026
Search Tags:#ui#analytics#layout#dashboard#svg#design-system
One-click install
npx skills add https://github.com/junainfinity/osmDesign --skill dashboard-junainfinity
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/junainfinity/osmDesign/tree/main/skills/dashboard
Command: npx skills add https://github.com/junainfinity/osmDesign --skill dashboard-junainfinity

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-made, single-page analytics dashboard UI that saves time in prototyping admin interfaces by providing a consistent layout and design system tokens.

Core Features & Use Cases

  • A fixed left sidebar with brand, 6–8 navigation items, and active state aligned to the design system.
  • A top bar containing the page title, search, and user/status indicators.
  • A main content area with 3–4 KPI cards, a primary chart, and a secondary chart or table.
  • Inline SVG charts that render without external libraries and follow the design tokens from DESIGN.md.
  • Use cases include dashboards for product analytics, operations monitoring, and executive summaries.

Quick Start

Generate a self-contained single-page dashboard HTML file that follows the design system and renders a left sidebar, top bar, KPI section, and charts.

Frequently Asked Questions about dashboard

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

FAQPage Schema
How do I create a single-page admin analytics dashboard in HTML?▼

To create an admin analytics dashboard, you need a structured HTML layout with a sidebar, top bar, KPI cards, and charts. This Skill generates a self-contained single-page HTML file with inline SVG charts that render without external libraries.

What is the best way to build an operations monitoring dashboard without external chart libraries?▼

The best way to build a dashboard without external libraries is using inline SVG charts. This Skill generates a single HTML file containing SVG-based KPI cards and charts that render independently and respect design system tokens.

Can I use this generated dashboard layout for executive summary interfaces?▼

Yes, you can use this dashboard layout for executive summary interfaces. It produces a single-screen design with a left navigation, top bar, KPI cards, and secondary charts suitable for product analytics and operations monitoring.

Does the generated dashboard UI require any external dependencies to render charts?▼

No, the generated dashboard UI does not require external dependencies to render charts. It utilizes inline SVG charts that render directly in the browser, ensuring a self-contained single HTML file output.

How do I apply design system tokens to a dashboard layout?▼

To apply design system tokens to a dashboard layout, the HTML output must reference predefined styling rules. This Skill generates dashboard components that follow the design tokens specified in DESIGN.md for consistent visual alignment.

Related Skills

Explore More Design & Creative Skills→
jwmyersjwmyers

visual-style-guide

Define color palettes, SVG styling, and token designs for Zero-Day Attack interfaces.

Community
Intermediate
mhattingpetemhattingpete
657

dashboard-creator

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

Community
Basic
aaronjullger-lgtmaaronjullger-lgtm

dashboard-trust

Audit dashboard metrics for accuracy, null-safety, and rendering integrity.

Community
Advanced
bomberoxenviosdosruedasbomberoxenviosdosruedas

agency-analytics-reporter

Analyze data, build statistical models, and generate business intelligence reports.

Community
Advanced