dashboard
|
pinned to #fb9ae97updated 3 weeks ago
Ask your AI client: “install skills/dashboard”.
Requires the metahub MCP server installed in your client. Set up MCP.
mh install skills/dashboardmetahub onboarded this repo on the author's behalf.
If you own github.com/nexu-io/open-design on GitHub, claim the listing to take over publishing. Your claim preserves the existing eval history and badges; only the curator label is replaced with verified-publisher on your next publish.
Stars
77,069
Last commit
3 weeks ago
Latest release
published
- #agent-skills
- #ai-agents
- #ai-design
- #byok
- #claude-code-for-design
- #claude-design
- #codex-design
- #coding-agents
- #cursor-design
- #design-systems
- #design-tools
- #desktop-app
- #figma-alternative
- #generative-ai
- #hermes-agent
- #local-first
- #no-code
- #prototyping
- #ui-generator
- #vibe-coding
About this skill
Pulled from SKILL.md at publish time.
Produce a single-screen admin / analytics dashboard.
Evaluation report
WarningsAutomated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· 3 weeks ago
Documentation
41Description qualitywarn
49 words · 305 chars — manifest description is empty; graded the GitHub repo description instead
A skill's manifest description doubles as its trigger — add one to SKILL.md (15+ words, e.g. “use this skill when …”).
README is present and substantial
54,272 chars · 20 sections · 10 code blocks
Tags / topics declared
20 total — agent-skills, ai-agents, ai-design, byok, claude-code-for-design, claude-design (+14)
README has usage / example sections
found: Quick start
Homepage / docs URL declared
https://open-design.ai
Release history
1- releasecurrentfb9ae97warn3 weeks ago
Contents
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.
Reviews
No reviews yet. Be the first.
Related
Planning With Files
Claude Code skill implementing Manus-style persistent markdown planning — the workflow pattern behind the $2B acquisition.
Browser Use
🌐 Make websites accessible for AI agents. Automate tasks online with ease.
Frontend Slides
Create beautiful slides on the web using Claude's frontend skills
mh install skills/dashboard