skills.rest
Keimoshi
KeimoshiCOMMUNITY
Explore all skills by this author →
GitHub

dashboard

Generates a single-file HTML admin dashboard with KPI cards and inline SVG charts.

Updated May 20, 2026
Search Tags:#html#analytics#design system#dashboard#prototype#admin panel#svg charts
One-click install
npx skills add https://github.com/Keimoshi/Silverloft --skill dashboard-keimoshi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/Keimoshi/Silverloft/tree/main/open-design-port/skills/dashboard
Command: npx skills add https://github.com/Keimoshi/Silverloft --skill dashboard-keimoshi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Designing an admin or analytics dashboard prototype from scratch requires layout decisions, realistic sample data, and hand-drawn charts, which slows down rapid prototyping. ## Core Features & Use Cases - Single-file HTML output: Produces one self-contained HTML document with inline CSS, semantic markup, and data-od-id region tags for comment mode. - Design-system driven styling: Reads the active DESIGN.md for colors, typography, and spacing so every token matches the active design system. - Realistic metrics and charts: Generates plausible KPI values, deltas, and inline SVG line or bar charts without any JavaScript libraries. - Use Case: Given a brief asking for a SaaS analytics admin panel, produce a dashboard with a sidebar, top bar, four KPI cards, a revenue line chart, and a recent-events table in one HTML file. ## Quick Start Ask the assistant to use the dashboard skill to create an analytics admin dashboard for a SaaS product with KPI cards and a revenue chart.

Frequently Asked Questions about dashboard

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

FAQPage Schema
How do I generate an admin dashboard HTML prototype?▼

Provide a brief describing what the dashboard monitors, such as sales, traffic, or incidents. The skill reads the active DESIGN.md for styling tokens and outputs one self-contained HTML file with a sidebar, top bar, KPI cards, and SVG charts.

How to create charts in HTML without JavaScript libraries?▼

Use inline SVG elements directly in the markup. A line chart is a polyline with an optional area fill, and a bar chart is a set of rect elements, with lightly labeled axes in muted text.

Does the dashboard output require external CSS or JS frameworks?▼

No. The output is a single HTML document with all CSS in one inline style block and charts drawn as inline SVG. No JavaScript libraries, chart frameworks, or external stylesheets are used.

Can the dashboard layout adapt to different design systems?▼

Yes. All colors, typography, and spacing come from the active DESIGN.md tokens, and density adjusts to the design system mood, with airy systems getting more padding and dense systems tightening rows.

What are the limitations of a single-file HTML dashboard?▼

The output is a static prototype with hardcoded sample data and no interactivity beyond basic hover states. It is not wired to live data sources, routing, or backend APIs.

Related Skills

Explore More Design & Creative Skills→
caobingshengcaobingsheng
1

design-md

Analyze Stitch projects to generate DESIGN.md files documenting design systems.

Community
Advanced
zenbuappszenbuapps

aibdd-auto-frontend-nextjs-pages

Convert static HTML prototypes into dynamic Next.js pages with MSW API integration.

Official
Advanced
dembrandtdembrandt
33

tab-navigation

Create accessible tabbed interfaces with ARIA semantics and keyboard navigation.

Official
Intermediate
dy9759dy9759
1

data-visualization-expert

Design charts, dashboards, and interactive data applications for business analytics.

Community
Intermediate