dashboard
|
pinned to #fb9ae97updated 3 months 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 months 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.
Automated checks the publisher passed at publish time — structure, docs, safety, and whether the artifact behaves as claimed.fb9ae97· 3 months ago
Behavioral checks ran but aren't published for this artifact; the static checks above ran at publish time.
Documentation
4 passed1 warningDescription 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 months 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
Verification Before Completion
Evidence before assertions, always
Writing Plans
Turn specs into phased implementation plans
Test-Driven Development
Red → green → refactor discipline for any feature or bugfix
mh install skills/dashboard