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.

Install to Claude Code

npx -y skills add owl-listener/designer-skills --skill component-spec --agent claude-code