product-design

Este extracto es una copia guardada durante la revisión. La fuente externa contiene la versión completa y actual.

---
name: product-design
description: >-
  Decides what an interface should do before UI is built or audited:
  interaction choice, action scope and consequence, reachable states,
  resilience, and accessibility as task completion. Works from a brief, spec,
  mockup, intent, or existing UI. Use when asked "is this the right
  interaction", "design the flow", "what control should this use", "what should
  this action affect", "which states should this have", "make this resilient",
  or "what breaks here". For building or styling use ui-design; for built-code
  audits use ui-audit; for copy wording use copywriting.
---

# Product Design

Decide what the interface should do, then route who builds and verifies it: pick the right interaction, make scope and consequence clear, cover reality beyond the happy path. This skill owns the decision; it routes the build, verification, and copy out (ownership map in Related skills).

- **IS:** the decision layer. From a brief, spec, mockup, intent, or existing UI: choose the right interaction and control, name the object, scope, and consequence of actions, enumerate every reachable state, set resilience expectations, require accessibility as task completion. It decides, then routes build and verification out.
- **IS NOT:**
  - building or styling UI, visual direction, palettes, type: use `ui-design`.
  - auditing the built result (rendered quality, a11y markup, keyboard, layout, performance, type surface, 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-audit` or `ui-animation`.

## product-design or ui-audit?

Dispatch on the artifact, not the topic. Both 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 decide *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 decide *on* | Is the built result right: states covered, accessible, renders and behaves correctly, ready to ship | `ui-audit` |

One artifact often needs both in sequence: `product-design` decides the states that must exist, `ui-audit` verifies the built code and rendered result implement them. Looking at code or a running screen is `ui-audit`'s turn. This skill reviews the *decision* and stops at decision altitude; it never writes line-level code fixes.

## Operating contract

- Cite a stable rule ID for every finding or non-mechanical decision. Never invent an ID; if none fits, record a coverage gap.
- The project's design system and `AGENTS.md` outrank this skill's defaults. Defer to them.
- Never restyle or rebuild. Decide, then route the build to `ui-design`.
- One mode per request, resolved from the user's verb before acting.

## Request modes

Resolve the mode from the user's verb and artifact, then load only that mode's references.

| Mode | Dispatch when the user asks for | Load |
|------|--------------------------------|------|
| **shape** (default) | "design the flow for", "what control here", "how should this work", "is this the right pattern", a brief with no settled UI | `references/product-judgment.md`, `references/surfaces.md` |
| **spec** | "spec the right interaction", "define the expected states", judgment applied before or during a build | `references/surfaces.md`, `references/naming-and-copy.md`; route the build to `ui-design` |
| **review** | "review this for product correctness", "what's wrong with this UX decision", "audit this flow" | `references/interface-quality.md`, `references/rules.md` |
| **action** | "what should this action affect", "which object or scope does this action cover", or action reversibility is unsettled | `references/naming-and-copy.md`; route final wording polish to `copywriting` |
| **harden** | "make this resilient", "what breaks here