Help us improve
Share bugs, ideas, or general feedback.
From godmode
Provides architecture for design systems: three-tier tokens, light/dark themes, Figma-to-code pipelines via Style Dictionary, component APIs, Storybook integration, versioning.
npx claudepluginhub arbazkhan971/godmodeHow this skill is triggered — by the user, by Claude, or both
Slash command
/godmode:designsystemThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
- User invokes `/godmode:designsystem`
Guides building and maintaining a design system—coordinating tokens, components, documentation, and tooling for UI consistency across products.
Manages design systems by detecting reusable UI patterns, extracting design tokens, organizing components with Atomic Design, and warning on hard-coded values or duplicates. Activates on component libraries, style guides, or patterns.
Build or audit a design system: component library, design tokens, naming conventions, contribution model, documentation. Use when teams are inconsistent across products.
Share bugs, ideas, or general feedback.
/godmode:designsystemDESIGN SYSTEM ASSESSMENT:
Project: <name> Framework: <React/Vue/Angular/Svelte/Web Components>
Existing system: <none/partial/mature>
Token coverage: Colors/Spacing/Typography/Shadows/Borders/Motion — <defined/partial/none> each
Theme support: <none/light-dark/multi-brand>
Component count: <N> Storybook: <yes/no> Figma integration: <yes/no>
Maturity: NONE | STARTER | GROWING | MATURE
Three-tier architecture is mandatory:
TIER 1: PRIMITIVES (raw values) --primitive-blue-500: #3b82f6;
TIER 2: SEMANTIC (meaning) --color-primary: var(--primitive-blue-500);
TIER 3: COMPONENT (specific) --button-bg: var(--color-primary);
Colors: Neutral scale (50-950), brand scale, feedback (red/green/amber). Semantic: bg, surface, text-primary/secondary/tertiary, primary/hover/active, error/success/warning, border/border-strong/border-focus.
Spacing: 4px base unit scale: 0, px, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24 (in rem).
Typography: Font families (sans, mono), sizes (xs-5xl modular 1.25 scale), weights (400-700), line heights (tight/normal/relaxed).
Shadows: xs through 2xl + inner + focus ring.
STANDARDS:
- variant: "primary"|"secondary"|"ghost"|"danger" size: "sm"|"md"|"lg"
- Extend native HTML element props. Export all prop types.
- forwardRef on every component wrapping native elements. Set displayName.
- Compound components: <Card><Card.Header/><Card.Body/></Card>
- Defaults: variant="primary", size="md"
- on<Event> convention. Support controlled and uncontrolled modes.
- className always accepted as escape hatch.
Light/dark via CSS custom properties on [data-theme]. ThemeProvider with system preference detection,
localStorage persistence, flash-free SSR. Multi-brand via [data-brand] overriding primitive tokens.
Figma Variables/Tokens Studio -> tokens.json (W3C format) -> Style Dictionary -> outputs (CSS variables, TypeScript constants, Tailwind config). CI automation: Figma webhook -> generate -> PR -> visual regression test.
Semantic versioning: MAJOR (remove token/component, rename, change defaults), MINOR (add component/token/variant), PATCH (fix values/bugs). Package structure: dist/css/, dist/js/, dist/tokens/. Release: version bump -> build -> changelog -> publish -> deploy Storybook.
Initialize with essential addons (a11y, viewport, docs, designs). Structure: Introduction > Foundations (Colors, Typography, Spacing, Shadows) > Components (Atoms, Molecules, Organisms) > Patterns > Theming.
DESIGN SYSTEM AUDIT:
Token Coverage: Colors/Spacing/Typography/Shadows — <N>/<N> used, <N> hardcoded
Component API Compliance: <N>/<N> standards-compliant
Theme System: Light/Dark/System preference/Persistence/Flash-free
Pipeline: Figma sync automated/manual/none
Documentation: Storybook coverage <X>%
Score: <N>/100 Maturity: NONE | STARTER | GROWING | MATURE
Priority 1 (Critical): blocks adoption. Priority 2 (High): degrades consistency. Priority 3 (Medium): improves DX. Priority 4 (Low): polish.
Commit per area: "designsystem: <tokens|theme|pipeline|storybook> — <description>"
Transition: Run /godmode:ui for component audit, /godmode:a11y for accessibility
| Flag | Description |
|---|---|
--audit | Audit existing design system maturity |
--tokens | Token architecture only |
--theme | Theme system setup |
--pipeline | Figma-to-code pipeline setup |
--storybook | Storybook documentation setup |
--init | Initialize complete design system from scratch |
# Build and test design system
npx storybook build --ci
npx chromatic --exit-zero-on-changes
npx style-dictionary build
IF token coverage < 90%: audit for hardcoded values. WHEN Storybook build fails: fix imports, check addon compatibility. IF visual regression detected: review diff, update baseline if intentional.
1. Scan for tailwind.config, CSS :root/[data-theme], tokens.json, style-dictionary config, .storybook/
2. Detect component library: shadcn/ui, radix, chakra, mantine, MUI
3. Check for Figma integration: .figma*, figma-tokens.json
4. Determine maturity: NONE (>10 hardcoded) | STARTER (<50% coverage) | GROWING | MATURE
Agent 1 (tokens): Build/audit token architecture — primitives, semantics, themes
Agent 2 (components): Audit component API compliance — ref forwarding, prop naming
Agent 3 (pipeline): Configure Figma-to-code pipeline — Style Dictionary, CI
Agent 4 (docs): Set up Storybook — foundation stories, component stories
MERGE: All -> visual regression test -> unified report
Log to .godmode/designsystem-results.tsv:
timestamp\tskill\ttarget\taction\ttokens_count\tcomponents_count\tcoverage_pct\tstatus
Run sequentially if Agent() or EnterWorktree unavailable. Branch per task: git checkout -b godmode-designsystem-{task}. See adapters/shared/sequential-dispatch.md.
Print: DesignSystem: {tokens} tokens, {components} components. Theme: {light_dark|single}. Storybook: {passing|failing}. Status: {DONE|PARTIAL}.
After EACH design system change:
KEEP if: all components use semantic tokens AND Storybook builds AND visual regression passes
DISCARD if: primitive token used directly OR Storybook breaks OR visual regression detected
On discard: revert. Fix token mapping before retrying.
Loop until target or budget. Never ask to continue — loop autonomously.
Measure before/after. Guard: test_cmd && lint_cmd.
On failure: git reset --hard HEAD~1.
STOP when ALL of:
- All components reference semantic tokens only
- Storybook builds and deploys successfully
- Theme switching works (light/dark) without layout breaks
- Visual regression baseline established