Mmcp.market

dashboard skill

by nexu-io·nexu-io/open-design·98k stars·Apache-2.0

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.

A100/100content scan

Is the dashboard skill safe?

Clean: nothing in its files matched our rules. We read 2 files in the folder on 2026-09-28.

No findings.

Install the dashboard skill

A skill is a folder. Copy it into your agent's skills folder and the agent loads it when the task matches its description. 

git clone --depth 1 https://github.com/nexu-io/open-design.git /tmp/open-design
mkdir -p ~/.claude/skills
cp -r /tmp/open-design/design-templates/dashboard ~/.claude/skills/dashboard
available in every project

In the Claude apps, zip the folder and upload it from the Skills settings. The folder on GitHub

The instructions your agent would load

SKILL.md as published, without the frontmatter. Read it on GitHub

Dashboard Skill

Produce a single-screen admin / analytics dashboard.

Workflow

component styling all come from it. Do not invent new tokens.

  1. Read the active DESIGN.md (injected above). Colors, typography, spacing,

ops, etc.) from the brief. Generate specific, plausible metric names and values — no "Metric A / Metric B" placeholders.

  1. Classify what the dashboard monitors (sales, traffic, usage, incidents,
  1. Lay out the required regions:

icons, active state uses the DS accent.

  • Left sidebar (220–260px): brand mark at top, 6–8 nav links with

on the right.

  • Top bar: page title on the left, search input + user avatar / status

line / bar / area chart drawn from real-looking numbers.

  • 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
  • Row 3: one secondary chart or table (recent events, top items, etc.).
  1. Write one self-contained HTML document:
  • <!doctype html> through , CSS in one inline block.
  • CSS Grid for the overall layout; Flexbox inside cards.
  • Semantic HTML: , , , .
  • Tag each logical region with data-od-id="slug" for comment mode.

with a subtle area fill. A bar chart is N s with DS-accent fill. Label axes lightly (muted text, smaller scale).

  1. Charts: inline SVG only, no JS libraries. A line chart is ~10 lines of
  1. Self-check:

(trading, crypto) tighten rows.

  • 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

Output contract

Emit between tags:

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

One sentence before the artifact, nothing after.

More skills from nexu-io/open-design

  • Aarticle-magazineHuashu / huashu-md-html-inspired magazine article layout for turning Markdown or notes into a polished long-form HTML essay.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Aaudio-jingleAudio generation skill — jingles, beds, voiceover, and sound effects. Routes music requests to Suno V5 / Udio / Lyria, speech to MiniMax TTS / FishAudio / ElevenLabs V3, and SFX to ElevenLabs SFX or AudioCraft. Output is one MP3/WAV file saved to the project folder.
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Ablog-postA long-form article / blog post — masthead, hero image placeholder, article body with figures and pull quotes, author byline, related posts. Use when the brief asks for "blog", "article", "post", "essay", or "case study".
  • Abuild-testRun the project's build / typecheck / lint / test commands and emit the build.passing + tests.passing signals devloop convergence reads.
  • Acard-twitterTwitter quote or data card designed to pair with a post.
  • Acard-xiaohongshuXiaohongshu-style knowledge cards, arranged as a swipeable multi-card carousel.
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Aclinical-case-reportStructured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds", "case summary", or "patient presentation".
  • Acode-importRead an existing repository's structure into the project cwd as a normalised snapshot the agent can analyse without re-walking the tree on every turn.
  • Acodex-interactive-capability-mapTurn a long-form article, thread, memo, or product narrative into a compact clickable capability map with a workflow loop, use-case matrix, and responsive detail panel.

All agent skills → · MCP servers