Stats
Actions
Tags
From design-systems
Generates a full component specification from a name or description, including overview, anatomy, props, variants, states, accessibility, tokens, and usage guidelines.
How this command is triggered — by the user, by Claude, or both
Slash command
/design-systems:create-component [component name, e.g., 'date picker' or 'notification banner']The summary Claude sees in its command listing — used to decide when to auto-load this command
# /create-component Generate a comprehensive component specification. ## Steps 1. **Research** — Understand purpose and common implementations. 2. **Anatomy** — Break down parts using `component-spec` skill. 3. **Variants** — Define size, style, layout variants. 4. **States** — Map interactive states using `component-spec` skill. 5. **Tokens** — Identify consumed tokens using `design-token` skill. 6. **Accessibility** — Specify ARIA, keyboard, screen reader using `accessibility-audit` skill. 7. **Naming** — Follow conventions using `naming-convention` skill. 8. **Documentation** — Structure...
Generate a comprehensive component specification.
component-spec skill.component-spec skill.design-token skill.accessibility-audit skill.naming-convention skill.documentation-template skill.Complete spec: overview, anatomy, props/API, variants, states, accessibility, usage guidelines, tokens.
Consider following up with /audit-system.
npx claudepluginhub owl-listener/designer-skills --plugin design-systems/create-componentGenerates a full component specification from a name or description, including overview, anatomy, props, variants, states, accessibility, tokens, and usage guidelines.
/describe-componentGenerates structured AI-optimized descriptions for design system components covering purpose, props, anti-patterns, composition rules, accessibility, usage examples, and JSON metadata.
/design-exportGenerates a dev-handoff spec from component/screen descriptions, including component inventory, design token map, interaction states, redlines, and accessibility checklist.
/design-componentGenerate a single component. Skips browsing. Uses existing design-system.md tokens + Gemini snippet_frontend. Fast path for isolated UI elements.
/ux-componentGenerates a single production-grade UI component (button, modal, navbar, etc.) from a user spec, with full interaction states, accessibility, and brand alignment. Triggers on phrases like 'create a [component]'.
/create-componentGuides UI component creation: detects framework/styling, asks for name/purpose/complexity/props/state specs, generates code with best practices.