New to Claude Skills? Learn how to install them →

Get Claude Skills
nexu-io on GitHub

Dashboard

Free

Create a single-screen admin analytics dashboard.

by nexu-io84.9k stars on nexu-io/open-design
6 views
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What Dashboard does

The Dashboard skill allows you to produce a fully functional admin or analytics dashboard in a single HTML file. It is designed for developers and designers who need to quickly generate a user interface that displays key performance indicators (KPIs) and other relevant metrics in a visually organized manner. By following a structured workflow, users can ensure that the dashboard adheres to specified design guidelines, making it suitable for various applications such as sales, traffic monitoring, or operational oversight.

The skill operates by first reading an active DESIGN.md file, which provides the necessary design tokens for colors, typography, and component styling. This ensures that the output is consistent with existing design systems. Users will classify the metrics to be displayed based on the project brief, generating realistic metric names and values instead of generic placeholders. The layout includes a fixed left sidebar for navigation, a top bar for user interaction, and a main area for displaying KPI cards and charts, all structured using CSS Grid and Flexbox for responsive design.

In terms of output, the skill generates a self-contained HTML document that includes inline CSS and SVG charts. This eliminates the need for external libraries, making the dashboard lightweight and easy to integrate. The emphasis on semantic HTML and adherence to design specifications ensures that the final product is both functional and aesthetically pleasing. This skill is particularly useful for quick prototyping or when a brief explicitly requests a dashboard interface.

When to use it

Use this skill when tasked with creating an admin, analytics, or control panel dashboard that requires a clear display of metrics and KPIs.

When not to use it

This skill may not be suitable for highly customized dashboards that require complex interactions or dynamic data updates, as it generates static HTML.

What you can build with it

Sales Dashboard

Quickly generate a sales dashboard that displays key metrics such as total sales, conversion rates, and sales trends.

Traffic Analytics

Create a dashboard that monitors website traffic, showing metrics like unique visitors, page views, and bounce rates.

Operational Oversight

Design an operations dashboard to track incidents, usage statistics, and operational KPIs for better management.

How to install Dashboard

View source

1. Install with the skills CLI

npx skills add nexu-io/open-design/dashboard --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by nexu-io

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.

Frequently asked questions about Dashboard

Similar skills

Penpot UI/UX Design

Create professional UI/UX designs in Penpot with ease.

UX Theming

Streamline your VS Code theming process with best practices.

Wireframe

Create low-fidelity UI wireframes in SVG format.

Waitlist Page

Create a clean, focused pre-launch landing page.

Hallmark

Design skill for creating unique, structured UIs.

UI Styling

Create beautiful, accessible user interfaces effortlessly.