product-design-and-ux

---
name: product-design-and-ux
description: >-
  Define user-facing product behavior from validated evidence and approved scope. Use for
  information architecture, task flows, state and recovery models, interface contracts,
  usability-study plans, interaction-pattern tradeoffs, AI recommendations and generated
  outputs, uncertainty, human control, feedback, or engineering UX handoffs. Use
  after product discovery and product decisions; route WCAG/ARIA conformance work to
  web-accessibility and formal software specifications to spec-driven-development. Do not
  use this skill for unrelated requests; route to the nearest named specialist.
license: MIT
compatibility: Works with any agent framework supporting the Agent Skills format; no design tool, frontend framework, or proprietary service required.
---

# Product Design and UX

Turn validated evidence and chosen scope into observable behavior people can complete and recover from. Design the interaction, not the brand, pixels, CSS, component implementation, or a particular tool.

## Entry Check

Confirm the approved scope, outcome, users or roles, evidence links, constraints, measurable experience goals, and open product decisions. Record missing inputs rather than inventing them.

- Need stakeholder evidence, validation, or raw research? Use [product-discovery](../product-discovery/SKILL.md).
- Need prioritization, scope, or why a feature is being built? Use [product-methodology](../product-methodology/SKILL.md).
- Need WCAG, ARIA, native semantics, or accessibility testing depth? Use [web-accessibility](../web-accessibility/SKILL.md).
- Need an approved interaction contract translated into a software specification and delivery gates? Use [spec-driven-development](../spec-driven-development/SKILL.md).
- Need to design an AI-assisted, generated, predictive, recommendatory, or tool-using interaction? Read [AI interaction and uncertainty](references/ai-interaction-and-uncertainty.md) and use [the AI interaction contract](templates/ai-interaction-contract.md) alongside the general contract. Route model evaluation and observability design to [agent-evals-and-observability](../agent-evals-and-observability/SKILL.md), governance to [ai-governance](../ai-governance/SKILL.md), runtime authority to [agent-production-operations](../agent-production-operations/SKILL.md), product measurement to [product-analytics-and-measurement](../product-analytics-and-measurement/SKILL.md), accessibility to [web-accessibility](../web-accessibility/SKILL.md), and cost/value decisions to [ai-operating-economics](../ai-operating-economics/SKILL.md).
- Need a person to delegate to an agent they use outside the product, then inspect or resume the work across apps? Read [external agent interactions](references/external-agent-interactions.md) and fill [the external agent handoff](templates/external-agent-handoff.md) alongside the AI interaction and task-flow contracts. Do not assume the product hosts that agent or can see its private conversation.

## Workflow

1. Trace each outcome and design decision to evidence with `templates/outcomes-to-design.md`. Optional personas or jobs must change a decision and cite evidence; do not create decorative demographics.
2. Establish information architecture from goals, content objects, terminology, permissions, findability, and service context. Read `references/information-architecture.md`.
3. Define consequential labels, instructions, status, errors, and completion content; review the task's memory, choice, switching, interruption, and recovery demands. Use heuristics to generate testable questions, not verdicts. Read `references/content-and-cognitive-demand.md`.
4. Model important tasks across every participating role, including recipient-side work after a handoff. Stop at the intended user outcome, not merely submission, delivery, or an intermediate status. Include decisions, alternatives, interruption, re-entry, cancellation, recovery, irreversible actions, side effects, permission changes, and completion evidence. Read `references/task-flows-and-state-models.md` and use `templates/task-flow-state-model.md`.
5. Inventory only states forced by the flow, data, permissions, connectivity, and risk. Record risky omissions. Use `templates/screen-state-inventory.md`.
6. Write framework-neutral contracts for content, controls, accessible interaction requirements, actions, transitions, persistence, permissions, responsive/reflow behavior, telemetry, and open decisions. Read `references/interface-contracts-and-responsive-behavior.md` and use `templates/interface-contract.md`.
7. Treat patterns as hypotheses. Compare alternatives, tradeoffs, evidence, and disconfirming conditions with `references/interaction-pattern-selection.md`.
8. Plan or synthesize only authorized usability work. Read `references/usability-testing-and-privacy.md`; use `templates/usability-study.md`. Never invent participants, consent, observations, quotes, or results.
9. Produce an engineering handoff with observable acceptance evidence, dependencies, owners, gates, and deployed-boundary verification. Read `references/engineering-handoff.md`; use `templates/engineering-handoff.md`. Hand approved behavior to [spec-driven-development](../spec-driven-development/SKILL.md).

## Load On Demand

| Need | Load |
|---|---|
| Scope boundary, traceability, or adjacent-skill routing | `references/boundaries-and-traceability.md` |
| Goals, labels, navigation, findability, permissions | `references/information-architecture.md` |
| Plain-language content, heuristic review, cognitive demand | `references/content-and-cognitive-demand.md` |
| Task paths, state applicability, recovery, side effects | `references/task-flows-and-state-models.md` |
| Interaction contract or inclusive responsive behavior | `references/interface-contracts-and-responsive-behavior.md` |
| Pattern alternatives and decision evidence | `references/interaction-pattern-selection.md` |
| Usability protocol, synthesis, consent, or privacy | `references/usability-testing-and-privacy.md` |
| Handoff, acceptance criteria, or deployed verification | `references/engineering-handoff.md` |
| AI uncertainty, grounding, human control, feedback, or model-change acceptance | `references/ai-interaction-and-uncertainty.md` |
| A person delegates work to their own agent outside the product and returns across app boundaries | `references/external-agent-interactions.md`; `templates/external-agent-handoff.md` |
| Methodology self-check with synthetic fixtures | `references/scenario-probes.md` |
| Source authority, status, and examples | `references/source-index.md` |

## Guardrails

- Accessibility is designed throughout, but WCAG/ARIA/native-semantics and testing depth remain with `web-accessibility`.
- Specify behavior under relevant width, zoom/reflow, text expansion/localization, orientation, input modes, reduced motion, degraded connectivity, interruption, and re-entry. Do not use device breakpoints as the model.
- Use synthetic fixtures such as `sample-user@example.test` and `INV-DEMO-042`; never request real credentials, payments, financial access, or secrets for an unsafe prototype.
- A finding from usability work is bounded evidence, not accessibility conformance, population prevalence, analytics, or outcome proof.
- AI output, confidence, explanation, citation, or user feedback is not proof of correctness by itself. Record the evidence boundary and route model-quality and statistical questions to the owning specialist.

## Completion

Stop when every in-scope behavior has traceable evidence, an applicable state/recovery model, observable acceptance criteria, and either a resolved decision or an owner and resolution gate. Report limitations and untested risks rather than filling gaps with assumptions.

From magnus919/agent-skills at c545c2b, shown as plain text under its license: MIT (permissive). The license text is in product-design-and-ux/SKILL.md.

• SKILL.md7.8 KB · 74e76f4ff152
• README.md2.7 KB · b487b375d88e
• evals/
• evals.json16 KB · 90d5e3974203
• references/
• ai-interaction-and-uncertainty.md7.7 KB · 947ef84b9ec8
• boundaries-and-traceability.md1.9 KB · 63a739eb5522
• content-and-cognitive-demand.md4.2 KB · fdb66bef3d51
• engineering-handoff.md4.2 KB · f2c8d74663b8
• external-agent-interactions.md6.3 KB · 57108aee84bc
• information-architecture.md3.3 KB · 94d5362a8d02
• interaction-pattern-selection.md3.8 KB · 66634acd71a7
• interface-contracts-and-responsive-behavior.md3.8 KB · 4b371dd551e6
• scenario-probes.md2.1 KB · b2056d626b38
• source-index.md6.1 KB · 4b34176be6a4
• task-flows-and-state-models.md2.3 KB · eb1c2b550b6e
• usability-testing-and-privacy.md4.6 KB · 78a564d19c96
• templates/
• ai-interaction-contract.md2.4 KB · d0b82e7f6a43
• engineering-handoff.md905 B · d2a22d2a53ef
• external-agent-handoff.md3.7 KB · 75045f5f30e7
• interface-contract.md703 B · afc5bf713ffc
• outcomes-to-design.md627 B · 1a1d752f5007
• screen-state-inventory.md410 B · 815d34b32e24
• task-flow-state-model.md737 B · 973cb7e04ef2
• usability-study.md1.0 KB · 9dc49a523ef4

23 files, 87 KB in total. Each file has a sha256 in the pin's manifest; the first 12 characters are shown.