mcpField
D
dashboard

dashboard

github.com/nexu-ioDesign & UI105.0k286 installsUpdated 1d ago
Repository

About dashboard

dashboard is a design skill for agents creating single-screen admin or analytics dashboards. It uses DESIGN.md to guide the layout and styling, then outputs a self-contained HTML page with metric cards and charts.

Key features

  1. 01Reads DESIGN.md design tokens
  2. 02Creates KPI cards and data charts
  3. 03Lays out sidebar, top bar, and main area
  4. 04Draws charts with inline SVG
  5. 05Outputs HTML with comment-mode tags

Use cases

  1. 01Drafting sales or traffic dashboards
  2. 02Creating operations or incident views
  3. 03Building analytics pages from a design system

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/nexu-io/open-design --skill dashboard

After installing, type/dashboardin Claude Code to confirm it loaded.

Bundled filesexample.html

Details

From the project README

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 logical region with data-od-id="slug" for comment mode.
  5. 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).
  6. 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.

Comments

Markdown supported