Skill

zenbu-design-system

Zenbu Apps (zenbu-cms, zb-cart, and all Zenbu modules) unified design system. Use when creating or modifying any admin dashboard UI, adding pages, components, layout structures, or applying color/typography/spacing tokens.

npx claudepluginhub zenbuapps/zenbu-powers --plugin zenbu-powers

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Implementation-ready design system for all Zenbu admin dashboard modules (zenbu-cms, zb-cart, future modules). Extracted from the live production UI.

Supporting Assets

components.mdlayout.mdpatterns.mdqa-checklist.mdtokens.md

SKILL.md

Similar Skills

skill-lookup

159.9k

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

next-compile

139.2k

Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.

1 file

vercel-next-js-2

karpathy-guidelines

90.0k

Guides code writing, review, and refactoring with Karpathy-inspired rules to avoid overcomplication, ensure simplicity, surgical changes, and verifiable success criteria.

andrej-karpathy-skills

Stats

Stars0

Forks1

Last CommitApr 28, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

Zenbu Design System

Implementation-ready design system for all Zenbu admin dashboard modules (zenbu-cms, zb-cart, future modules). Extracted from the live production UI.

Reference Files

tokens.md — Color palette (CSS custom properties), typography scale, spacing, border-radius, shadows, z-index

layout.md — Shell structure, sidebar navigation, page headers, list/detail/settings page grid patterns, responsive breakpoints

components.md — Buttons (5 variants), cards, tables, tabs, form inputs, badges, toggles, dropdowns, stat cards, iconography

patterns.md — Batch select bar (canonical /zb-cart/products standard), fixed bottom action bar, filter bar

qa-checklist.md — Accessibility requirements, anti-patterns (prohibited implementations), implementation QA checklist

Core Principles

CSS Custom Properties only: all colors reference var(--color-*). Raw hex values are prohibited in component code.

Consistent radius: cards use rounded-xl (12px), buttons/inputs use rounded-lg (8px). Never mix.

Typography hierarchy: only use font weights 400, 500, 600, 700 with the defined scale (11px–24px).

Spacing scale: only use defined tokens (4/6/8/10/12/16/20/24 px). No one-off values.

Sidebar-aware fixed bars: all fixed bottom-0 elements must offset with left-[220px] on desktop (lg+).

Accessibility first: WCAG 2.2 AA, visible focus rings, semantic HTML elements, ARIA roles on tabs/toggles.

Batch select standard: /zb-cart/products is the canonical reference — other pages will be updated to match.

Quick Token Reference

--color-brand: #2563eb; /* primary actions, links */ --color-text-primary: #111827; /* headings, body */ --color-text-secondary: #374151; /* secondary text, nav */ --color-text-muted: #6b7280; /* placeholders, helpers */ --color-surface: #f9fafb; /* page background */ --color-surface-overlay:#f3f4f6; /* hover states */ --color-border: #e5e7eb; /* all borders */ --color-error: #ef4444; /* destructive actions */ --color-success: #22c55e; /* success states */

Font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif Radius: 4 | 6 | 8 | 12 | 9999 px Spacing: 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 px

Zenbu Design System

Implementation-ready design system for all Zenbu admin dashboard modules (zenbu-cms, zb-cart, future modules). Extracted from the live production UI.

Reference Files

tokens.md — Color palette (CSS custom properties), typography scale, spacing, border-radius, shadows, z-index

layout.md — Shell structure, sidebar navigation, page headers, list/detail/settings page grid patterns, responsive breakpoints

components.md — Buttons (5 variants), cards, tables, tabs, form inputs, badges, toggles, dropdowns, stat cards, iconography

patterns.md — Batch select bar (canonical /zb-cart/products standard), fixed bottom action bar, filter bar

qa-checklist.md — Accessibility requirements, anti-patterns (prohibited implementations), implementation QA checklist

Core Principles

CSS Custom Properties only: all colors reference var(--color-*). Raw hex values are prohibited in component code.

Consistent radius: cards use rounded-xl (12px), buttons/inputs use rounded-lg (8px). Never mix.

Typography hierarchy: only use font weights 400, 500, 600, 700 with the defined scale (11px–24px).

Spacing scale: only use defined tokens (4/6/8/10/12/16/20/24 px). No one-off values.

Sidebar-aware fixed bars: all fixed bottom-0 elements must offset with left-[220px] on desktop (lg+).

Accessibility first: WCAG 2.2 AA, visible focus rings, semantic HTML elements, ARIA roles on tabs/toggles.

Batch select standard: /zb-cart/products is the canonical reference — other pages will be updated to match.

Quick Token Reference

Font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif Radius: 4 | 6 | 8 | 12 | 9999 px Spacing: 4 | 6 | 8 | 10 | 12 | 16 | 20 | 24 px