dashboard
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.
Profile →npx skills add nexu-io/open-design --skill dashboard --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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: - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block. - CSS Grid for the overall layout; Flexbox inside cards. - Semantic HTML: `<aside>`, `<header>`, `<main>`, `<section>`. - Tag each log
- Workflow
- Output contract
What does the dashboard skill do?
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.
How do I install it?
Run `npx skills add nexu-io/open-design --skill dashboard --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From nexu-io/open-design, a repository with 83,577 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.