Component Spec
This generates comprehensive component specifications for design systems, covering everything from basic anatomy to accessibility requirements. You'd use it when you need to document a UI component thoroughly enough that designers and developers can work from the same source of truth. It structures specs into eight sections including variants, props/API, states, and behavior, which beats the usual half-documented components that leave everyone guessing about edge cases. The real value is in how it forces you to think through focus management, keyboard navigation, and loading states upfront rather than discovering gaps during implementation. It writes for both audiences simultaneously, which actually saves time compared to maintaining separate design and engineering docs.
- skills.sh installs
- 2.4K
- GitHub stars
- 3.3K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add owl-listener/designer-skills --skill component-spec --agent claude-codeInstalls into .claude/skills of the current project.
Files
Component Spec
You are an expert in writing thorough, implementable component specifications for design systems.
What You Do
You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.
Specification Structure
- Overview — Name, description, when to use / not use
- Anatomy — Visual breakdown, required vs optional elements
- Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
- Props/API — Name, type, default, description, required status
- States — Default, hover, focus, active, disabled, loading, error
- Behavior — Interactions, animations, responsive behavior, edge cases
- Accessibility — ARIA roles, keyboard nav, screen reader, focus management
- Usage Guidelines — Do/don't examples, content rules, related components
Best Practices
- Write for both designers and developers
- Include examples for every variant and state
- Specify behavior, not just appearance
- Consider all input methods
- Document edge cases explicitly
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/owl-listener/designer-skills
- Categories
- Frontend Development, Design & UI/UX
- First seen
- Jun 3, 2026
More from owl-listener/designer-skills
All 68- Design Principles2.4K
- Theming System2.4K
- Competitive Analysis2.3K
- Feedback Patterns2.3K
- Design Brief2.3K
- Prototype Strategy2.3K
- User Persona2.3K
- Jobs To Be Done2.3K
- Gesture Patterns2.3K
- Handoff Spec2.3K
- Experience Map2.3K
- Naming Convention2.3K
- Empathy Map2.3K
- Documentation Template2.3K
- Pattern Library2.3K
- Affinity Diagram2.3K
- Interview Script2.3K
- Card Sort Analysis2.3K
- Design Rationale2.3K
- Accessibility Test Plan2.3K
- A B Test Design2.3K
- Metrics Definition2.3K
- Diary Study Plan2.3K
- Stakeholder Alignment2.3K
Recommended
More Frontend Development
expo-react-native-typescriptmindrally/skillsExpert in Expo React Native TypeScript mobile development with best practices2.3Kskills.sh installs
muapi-ui-designsamuraigpt/generative-media-skillsGenerate high-fidelity UI/UX mockups for mobile and web apps using Atomic Design principles — creates wireframes and design systems via muapi.ai2.2Kskills.sh installs
agent-hooksstarchild-ai-agent/official-skillsManage shell hooks — user scripts that run at agent lifecycle points to block, rewrite, or warn on actions, via the /hooks command.2.2Kskills.sh installs
nuxt-better-authonmax/nuxt-skillsUse when implementing auth in Nuxt apps with @onmax/nuxt-better-auth - provides useUserSession composable, server auth helpers, route protection, and Better Aut2.1Kskills.sh installs