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.
Before you install
- Last update
- Files in folder
- 2
- Scripts
- No script files found
- SKILL.md size
- 2.7 KB (about 693 tokens of context each time it loads)
- License
- Apache-2.0
- Source on GitHub
- nexu-io/open-design
Skills are plain text instructions the agent follows, sometimes with scripts. Check the source, prefer repositories with many installs and stars, and read any script it ships.
Install
npx skills add nexu-io/open-design@dashboardRuns in a terminal with Node.js 18 or newer. Add -y to skip the prompts and -g to install for every project instead of this one.
Install for your agent
npx skills add nexu-io/open-design@dashboard --agent claude-code -y- Project install writes to
.claude/skills/dashboard- Global install writes to
~/.claude/skills/dashboard
Start a new session afterwards so the agent picks the skill up. In Claude Code you can also call it directly with /dashboard.
What it does
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…
Excerpt from the skill's own SKILL.md. Read the full file on GitHub before installing: skills run with your agent's permissions.
Categories
Related skills
- od-contribute
nexu-io/open-design
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship my OD skill, ship my OD design system, translate OD docs, report an OD bug, od-contribute.
- magazine-poster
nexu-io/open-design
An editorial-style poster — newsprint paper, dateline, oversized serif headline with a struck-through word and italic accent, a 2-column body block, and 6 numbered sections with annotated pull-quote captions. Reads like a Sunday-paper full-page essay or a thoughtful launch poster. Use when the brief asks for "magazine poster", "editorial poster", "newsprint", "essay layout", or "manifesto".
- critique
nexu-io/open-design
Run a 5-dimension expert design review on any HTML artifact in the project — Philosophy / Visual hierarchy / Detail / Functionality / Innovation, each scored 0–10. Outputs a single self-contained HTML report with a radar chart, evidence-backed scores, and three lists: Keep / Fix / Quick-wins. Use when the brief asks for a "design review", "design critique", "5 维度评审", "design audit", or "what's wrong with my design".
- email-marketing
nexu-io/open-design
A brand product-launch email — masthead with wordmark, hero image block, headline lockup with skewed-italic accent, body copy, primary CTA, and a specifications grid. Pure HTML email layout (centered single column, table fallback). Use when the brief asks for an "email", "newsletter blast", "MJML", "product launch email", or "email template".
- docs-page
nexu-io/open-design
A documentation page — inline-start nav, scrollable article body, inline-end table of contents. Use when the brief mentions "docs", "documentation", "guide", "API reference", or "tutorial".
- invoice
nexu-io/open-design
A printable invoice page — sender + recipient block, line items table, tax breakdown, totals, and payment instructions. Use when the brief mentions "invoice", "bill", "billing statement", or "发票".