product-design
Installation
SKILL.md
Product Design
Decide what the interface should do, then route who builds and verifies it. Choose the right interaction, make scope and consequence clear, and cover reality beyond the happy path. This skill owns the decision of what should exist and how it should behave; it routes the visual build to ui-design, the verification of the built result to ui-audit, and copy wording to copywriting.
- IS: the decision layer. Given a brief, spec, mockup, intent, or existing UI, decide the right interaction and control, name the object, scope, and consequence of actions, enumerate every reachable state, set resilience expectations, and require accessibility as task completion. It decides, then routes the build and the verification out.
- IS NOT:
- building or styling UI in code, visual direction, palettes, type: use
ui-design. - auditing the built result (rendered quality, a11y markup, keyboard, layout resilience, performance, type surface, and React/Next code-level UX with a ship verdict): use
ui-audit. - copy wording, persuasion, or AI-ism removal: use
copywriting. - deep typography or motion: use
typography-auditorui-animation.
- building or styling UI in code, visual direction, palettes, type: use
product-design or ui-audit?
The dispatch signal is the artifact, not the topic. Both skills care about states and interaction; they act at different moments.
| You have... | The question is | Use |
|---|---|---|
| A brief, spec, mockup, intent, or a UI you are deciding about | What should exist: the right interaction, the action's name, which states should be reachable | product-design |
| Code, a diff, or a running UI you are deciding on | Is the built result right: does the code cover the states, is it accessible, does it render and behave correctly, is it ready to ship | ui-audit |