Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From design-systems
Generates a full component specification from a name or description, including overview, anatomy, props, variants, states, accessibility, tokens, and usage guidelines.
npx claudepluginhub owl-listener/designer-skills --plugin design-systemsHow 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...
/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-componentGenerate a single component. Skips browsing. Uses existing design-system.md tokens + Gemini snippet_frontend. Fast path for isolated UI elements.
/create-componentGuides UI component creation: detects framework/styling, asks for name/purpose/complexity/props/state specs, generates code with best practices.
/uiDesigns UI components with styling and design system implementation. Specify required component need and optional approach like design-system or mobile-first.
/component-docsGenerates Storybook-style component docs from Figma files — props, variants, usage guidelines, spacing specs, and code snippets. Accepts Figma URL, component name, or 'all components'.
Share bugs, ideas, or general feedback.
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.