dashboard

nexu-io/open-design · plugins/_official/examples/dashboard/SKILL.md

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.

Data & AINo license★ 91788⑂ 10564commit 9881cff

Install skillView source on GitHub

What this skill does

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

Workflow

Read the active DESIGN.md (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens.
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.
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.).
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 logical region with data-od-id="slug" for comment mode.
Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of <polyline> with a subtle area fill. A bar chart is N <rect>s with DS-accent fill. Label axes lightly (muted text, smaller scale).
Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes (trading, crypto) tighten rows.

Output contract

Emit between <artifact> tags:

<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/dashboard · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/dashboard

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so dashboard is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

dashboard

nexu-io/open-design · plugins/_official/examples/dashboard/SKILL.md

Data & AINo license★ 91788⑂ 10564commit 9881cff

What this skill does

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

Workflow

Read the active DESIGN.md (injected above). Colors, typography, spacing, component styling all come from it. Do not invent new tokens.
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.
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.).
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 logical region with data-od-id="slug" for comment mode.
Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of <polyline> with a subtle area fill. A bar chart is N <rect>s with DS-accent fill. Label axes lightly (muted text, smaller scale).
Self-check:
- Every color comes from DESIGN.md tokens.
- Accent used at most twice (sidebar active + one chart highlight).
- Sidebar + top bar are sticky; main scrolls independently.
- Density matches the DS mood — airy DSes get more padding, dense DSes (trading, crypto) tighten rows.

Output contract

Emit between <artifact> tags:

<artifact identifier="dashboard-slug" type="text/html" title="Dashboard Title">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact, nothing after.

Installation

Copy a source-pinned command for your client. You run it yourself.

Destination: .claude/skills/dashboard · pinned to the source commit

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Review the source before running. This copies files into your project; it is not a one-click install and does not verify runtime safety.

New here? Step-by-step setup – from installing the agent to using the skill

Operating systemAgentI already use Claude Code

1
Install Git
Install Git with your package manager (Debian/Ubuntu shown; use dnf/pacman on others). Official download.
```
sudo apt update && sudo apt install -y git
```
2
Install Claude Code
Requires Node.js 18+. Install the CLI globally: Official docs. (command-line tool)
```
npm install -g @anthropic-ai/claude-code
```

Get the skill, pinned to its exact version

Open a terminal and run these steps (they clone the source, check out the exact commit, and copy the skill into place):

# Run from your project root
git clone https://github.com/nexu-io/open-design.git .skillboard-tmp
git -C .skillboard-tmp checkout 9881cff70e02be86c2a58130af512011ba23d4af
mkdir -p ".claude/skills"
cp -r ".skillboard-tmp/plugins/_official/examples/dashboard" ".claude/skills/"
rm -rf .skillboard-tmp

Destination: .claude/skills/dashboard

4
Use it in Claude Code
Open Claude Code in your project. It reads skills from the folder above, so dashboard is now available. Always review the source before using it – static checks cannot prove runtime safety.

Security & Audits

Scanner static-checks@0.1.0 · commit 9881cff70e02. Static checks cannot prove runtime safety – review the source and the exact diff before installing. How checks work.

No static rules matched. This is not a safety guarantee.

dashboard

What this skill does

Dashboard Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits

dashboard

What this skill does

Dashboard Skill

Workflow

Output contract

Installation

Install Git

Install Claude Code

Get the skill, pinned to its exact version

Use it in Claude Code

Security & Audits