What it is
This skill helps you document UI components in detail — buttons, cards, forms, nav bars, anything in your design system. It creates thorough specifications covering anatomy, behavior, variants, states, accessibility requirements, and usage guidelines. Perfect for product teams building or maintaining design systems who need consistent, implementable component documentation.
What it does
- Generates structured component specifications with anatomy breakdowns, variants, and props
- Documents all component states (hover, focus, disabled, loading, error) with clear descriptions
- Includes accessibility requirements like ARIA roles, keyboard navigation, and screen reader support
- Provides usage guidelines with do/don't examples and content rules
- Covers behavior details like interactions, animations, and responsive breakpoints
Use it when
- You're building a design system and need to document components thoroughly
- Your team needs shared specs so designers and developers stay aligned
- You're onboarding someone and want clear component documentation to reference
- You need to ensure accessibility is baked into every component from the start
Add this skill to your AI
Copy the source URL and ask your AI to add it. Most coding agents — Claude Code, Cursor, Codex, Gemini CLI, OpenCode, Windsurf — will fetch and install it for you.
Try this prompt:
Add this skill to my project: https://github.com/jrbrugger/design-workflow/tree/main/designer-skills-main/design-systems/skills/component-spec