Dashboard

Name: Dashboard
Author: nexu-io

nexu-io/open-design

283 installs
83.7k repo stars
Updated August 5, 2026
nexu-io/open-design

dashboard is a Claude Code skill from nexu-io/open-design that designs and implements SaaS admin dashboards with charts, filters, and accessible navigation for developers building data-heavy product UIs.

About

dashboard is an open-design skill in the nexu-io/open-design repository that guides agents through SaaS admin dashboard patterns: responsive grid layouts, filterable data tables, chart components, empty states, loading skeletons, and accessible sidebar navigation. The skill applies open-design conventions so generated interfaces stay consistent across admin surfaces rather than one-off page mocks. Developers reach for dashboard when scaffolding analytics home screens, settings consoles, or ops panels that must handle real data density and keyboard-friendly navigation. It pairs layout decisions with implementation guidance rather than delivering static Figma exports alone.

Responsive dashboard grids
Chart and KPI modules
Filter and table patterns
Empty and loading states
Accessible navigation shells

Dashboard by the numbers

283 all-time installs (skills.sh)
+1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
Ranked #844 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

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

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/open-design/dashboard.svg)](https://skillselion.com/skills/nexu-io/open-design/dashboard)

Installs	283
repo stars	★ 83.7k
Last updated	August 5, 2026
Repository	nexu-io/open-design ↗

How do you build a SaaS admin dashboard UI?

Design and implement SaaS admin dashboards with responsive layouts, filterable data views, chart patterns, empty states, and accessible navigation using open-design conventions.

Who is it for?

Frontend developers shipping SaaS admin or analytics consoles who want open-design conventions baked into component structure.

Skip if: Projects needing only marketing landing pages or backend API design without admin UI surfaces.

When should I use this skill?

The user asks to design or build a SaaS dashboard, admin panel, analytics home, or data-heavy console with charts and filters.

What you get

Responsive dashboard layouts, filterable table views, chart sections, empty-state components, and accessible navigation scaffolding.

Dashboard layout scaffold
Chart and table component patterns
Navigation and empty-state markup

Files

SKILL.mdMarkdownGitHub ↗

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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Pulse — analytics overview</title>
  <style>
    :root {
      --bg: #fafaf9; --fg: #1c1b1a; --muted: #6b6964; --border: #e6e4e0;
      --accent: #c96442; --surface: #ffffff; --good: #2f7d4a; --bad: #b53a2a;
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.5 -apple-system, system-ui, sans-serif; display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
    .sidebar { background: var(--surface); border-right: 1px solid var(--border); padding: 16px; }
    .brand { font-weight: 600; padding: 8px 10px 18px; }
    .nav { display: flex; flex-direction: column; gap: 2px; }
    .nav a { padding: 7px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; }
    .nav a.active { background: var(--bg); font-weight: 500; }
    .nav a:hover { background: var(--bg); }
    .nav .group-label { font-size: 11px; color: var(--muted); padding: 14px 10px 6px; text-transform: uppercase; letter-spacing: 0.06em; }
    main { padding: 0 28px 56px; }
    .topbar { padding: 16px 0; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
    .topbar h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
    .topbar .right { display: flex; align-items: center; gap: 12px; color: var(--muted); }
    button { font: inherit; cursor: pointer; padding: 7px 13px; border-radius: 6px; }
    .btn-primary { background: var(--accent); color: white; border: 1px solid var(--accent); }
    .btn-secondary { background: transparent; color: var(--fg); border: 1px solid var(--border); }
    .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; }
    @media (max-width: 900px) { .kpis { grid-template-columns: repeat(2, 1fr); } }
    .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; }
    .kpi .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
    .kpi .value { font-size: 28px; letter-spacing: -0.02em; }
    .kpi .delta { font-size: 12px; margin-top: 4px; }
    .kpi .delta.up { color: var(--good); }
    .kpi .delta.down { color: var(--bad); }
    .panel { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 16px; }
    .panel h3 { margin: 0 0 16px; font-size: 14px; font-weight: 500; }
    .chart { height: 240px; background: linear-gradient(180deg, rgba(201,100,66,0.06), transparent); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
    .chart svg { width: 100%; height: 100%; display: block; }
    .panels-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
    @media (max-width: 900px) { .panels-row { grid-template-columns: 1fr; } }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 10px 6px; border-top: 1px solid var(--border); }
    th { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
    .pill { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); }
    .pill.good { color: var(--good); border-color: rgba(47,125,74,0.3); }
    .pill.bad { color: var(--bad); border-color: rgba(181,58,42,0.3); }
  </style>
</head>
<body>
  <aside class="sidebar" data-od-id="sidebar">
    <div class="brand">◐ Pulse</div>
    <nav class="nav">
      <a href="#" class="active">Overview</a>
      <a href="#">Funnels</a>
      <a href="#">Cohorts</a>
      <a href="#">Sessions</a>
      <span class="group-label">Workspace</span>
      <a href="#">Sources</a>
      <a href="#">Members</a>
      <a href="#">Billing</a>
      <a href="#">Settings</a>
    </nav>
  </aside>
  <main>
    <div class="topbar" data-od-id="topbar">
      <h1>Overview · April 2026</h1>
      <div class="right">
        <button class="btn-secondary">Last 30 days ▾</button>
        <button class="btn-primary">+ New report</button>
      </div>
    </div>

    <div class="kpis" data-od-id="kpis">
      <div class="kpi"><div class="label">MRR</div><div class="value">$48.2K</div><div class="delta up">+12.4% MoM</div></div>
      <div class="kpi"><div class="label">Active accounts</div><div class="value">3,184</div><div class="delta up">+204 this month</div></div>
      <div class="kpi"><div class="label">Churn (30d)</div><div class="value">2.1%</div><div class="delta down">+0.4 pp</div></div>
      <div class="kpi"><div class="label">P95 latency</div><div class="value">182 ms</div><div class="delta up">-23 ms</div></div>
    </div>

    <div class="panels-row">
      <div class="panel" data-od-id="chart-panel">
        <h3>Revenue · 30 days</h3>
        <div class="chart">
          <svg viewBox="0 0 600 240" preserveAspectRatio="none">
            <polyline fill="none" stroke="#c96442" stroke-width="2" points="0,180 30,170 60,150 90,160 120,140 150,120 180,130 210,110 240,90 270,100 300,80 330,70 360,80 390,60 420,50 450,60 480,40 510,30 540,40 570,20 600,10" />
          </svg>
        </div>
      </div>
      <div class="panel" data-od-id="signups-panel">
        <h3>New accounts</h3>
        <table>
          <thead><tr><th>Account</th><th>Plan</th><th>Status</th></tr></thead>
          <tbody>
            <tr><td>Linear</td><td>Team</td><td><span class="pill good">active</span></td></tr>
            <tr><td>Cursor</td><td>Pro</td><td><span class="pill good">active</span></td></tr>
            <tr><td>Notion</td><td>Team</td><td><span class="pill bad">trial</span></td></tr>
            <tr><td>Vercel</td><td>Enterprise</td><td><span class="pill good">active</span></td></tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="panel" data-od-id="recent-events">
      <h3>Recent events</h3>
      <table>
        <thead><tr><th>Time</th><th>Account</th><th>Event</th><th>Plan</th></tr></thead>
        <tbody>
          <tr><td>2:14 pm</td><td>Acme Co</td><td>Upgraded to Team</td><td>Team</td></tr>
          <tr><td>1:48 pm</td><td>Northwind</td><td>Connected GitHub</td><td>Pro</td></tr>
          <tr><td>1:32 pm</td><td>Globex</td><td>Cancelled subscription</td><td>Solo</td></tr>
          <tr><td>12:51 pm</td><td>Initech</td><td>New seat invited</td><td>Team</td></tr>
        </tbody>
      </table>
    </div>
  </main>
</body>
</html>

Related skills

Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k

Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k

Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k

Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476

Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k

Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What UI patterns does dashboard cover?

The dashboard skill covers responsive SaaS admin layouts, filterable data views, chart patterns, empty states, and accessible navigation using nexu-io open-design conventions for production admin surfaces.

Is dashboard only for design mockups?

dashboard guides both design and implementation of SaaS admin dashboards, producing working UI structure with charts, filters, and navigation—not static wireframes alone.

Design & UI/UXuiux