skills.rest
nexu-io
nexu-ioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

dashboard

Create a single HTML admin analytics dashboard with inline SVG charts.

84.7k|9.9k|Updated Apr 28, 2026
Search Tags:#ui#analytics#charts#layout#dashboard#prototype#admin
One-click install
npx skills add https://github.com/nexu-io/open-design --skill dashboard-nexu-io
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: dashboard
Source: https://github.com/nexu-io/open-design/tree/main/skills/dashboard
Command: npx skills add https://github.com/nexu-io/open-design --skill dashboard-nexu-io

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Admin / analytics dashboard in a single HTML file. Fixed left sidebar, top bar with user/search, main grid of KPI cards and one or two charts. Use when the brief asks for a "dashboard", "admin", "analytics", or "control panel" screen.

Core Features & Use Cases

  • Layout-driven dashboard with a sticky left navigation and top bar, KPI cards, and charts.
  • Design-system aligned colors, typography, spacing, and components driven by the DESIGN.md; ready for prototyping.
  • Use cases include executive overviews, product metrics, user engagement dashboards, and system health summaries.

Quick Start

Open this HTML prototype and customize the KPI cards and charts to match your data.

Frequently Asked Questions about dashboard

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

FAQPage Schema
How do I create an admin analytics dashboard in a single HTML file?▼

An admin analytics dashboard can be created in a single HTML file by using inline CSS to build a fixed left sidebar, top bar, KPI grid, and inline SVG charts without external dependencies.

What is the best way to prototype a control panel layout for a desktop web app?▼

The best way to prototype a control panel layout is using a single-page HTML document with a sticky left navigation, top bar, and main grid for KPI cards and charts aligned to a design system.

Can I use inline SVG charts for a dashboard prototype without external libraries?▼

Yes, you can use inline SVG charts for a dashboard prototype without external libraries. A single HTML document with inline CSS can render KPI cards and charts independently.

Does a single-page admin dashboard support design system constraints for typography and color?▼

A single-page admin dashboard supports design system constraints by referencing a design system for color, typography, spacing, and components to ensure the prototype aligns with established guidelines.

How do I build a dashboard for executive overviews and product metrics with mock data?▼

To build a dashboard for executive overviews and product metrics with mock data, use a single HTML file featuring a KPI grid and charts that can be customized to match your specific data requirements.

What are the limitations of building an analytics dashboard in a single HTML document?▼

The limitation of building an analytics dashboard in a single HTML document is that it is designed for single-page prototyping of admin panels in desktop web apps, rather than full-scale production applications.

Related Skills

Explore More Design & Creative Skills→
labs21-devlabs21-dev
28

design-foundations

Apply artifact-agnostic design rules for colors, typography, spacing, and charts.

Official
Advanced
PiercingXXPiercingXX
1

dashboard

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

Community
Intermediate
pipixia-labspipixia-labs
38

dashboard

Generate a self-contained admin analytics dashboard in a single HTML file.

Official
Intermediate
gaoqiongxiegaoqiongxie
1

web-artifacts-builder

Build interactive web applications with React 18, Tailwind CSS, and shadcn/ui components.

Community
Intermediate