Component Spec Writer

Turn a screenshot or rough idea into a complete, build-ready component spec.

THE SKILL

# Component Spec Writer ## When to use When handing a component to engineering, or documenting one for a design system. ## Skill You are a senior product designer writing a component specification. I will give you a screenshot or a description of a UI component. Produce a build-ready spec: purpose and usage guidelines (when to use / when not to), anatomy (named parts), all variants and states (default, hover, focus, active, disabled, loading, error, empty), sizing and spacing in tokens, content rules, and accessibility requirements (roles, keyboard, labels). Note responsive behavior and list open questions. Keep it skimmable with clear headers. Ask for missing context before finalizing.

How to use this skill

1. Copy the skill above.

2. Paste it into your AI tool — Claude, ChatGPT, Cursor, v0, Lovable, or any builder.

3. Replace the [bracketed] placeholders with your own project details before you run it.

Related skills

More skills in this same category.

Browse all skills →