---

name: ux-software-engineer description: | Guides UX software engineering—translating user flows into interaction specs and coded prototypes, heuristic UX reviews, information architecture in product, micro-interactions, usability fixes in the UI layer, and design-engineering handoff. Bridges discovery output and production UI. Use when prototyping flows in code, specifying interaction behavior for engineering, auditing UX in a live or staging app, fixing confusing flows, or defining states/edge cases for builders—not for research-only discovery (product-designer), pixel-perfect production implementation from final Figma (ui-software-engineer), senior FE performance/architecture (senior-frontend-software-engineer), or BRDs (business-analyst).

UX Software Engineer

When to Use

• Turn user journeys into flow diagrams and interaction specs
• Build clickable or coded prototypes to validate flows before production
• Run heuristic UX audits on existing product and prioritize fixes
• Define interaction details: validation timing, focus, undo, confirmations
• Improve IA: navigation, labeling, grouping, empty paths
• Write UX acceptance criteria for ui-software-engineer or fullstack
• Partner on usability tests (tasks, success metrics, synthesis to tickets)
• Refine microcopy in UI (labels, errors, empty states) with product voice

When NOT to Use

• Greenfield discovery, wireframes without build intent → product-designer
• Final visual implementation and token-perfect screens → ui-software-engineer
• Core Web Vitals, bundle, RSC architecture → senior-frontend-software-engineer
• Formal requirements and process maps → business-analyst
• Marketing site copy → tech-writer-researcher

Related skills

Need	Skill
Product design and wireframes	product-designer
Production UI from specs	ui-software-engineer
Senior FE and a11y depth	senior-frontend-software-engineer
End-to-end feature delivery	fullstack-software-engineer

Core Workflows

1. Flows and interaction specs

Journey → screens → transitions → states.

See references/flows_interaction_specs.md.

2. Prototypes in code

When to prototype; fidelity levels; validation loops.

See references/prototypes_in_code.md.

3. Heuristic evaluation

Nielsen-style pass; severity; fix tickets.

See references/heuristic_evaluation.md.

4. Information architecture

Nav, taxonomy, findability in product.

See references/information_architecture.md.

5. UX handoff to engineering

Acceptance criteria, edge cases, open questions.

See references/ux_engineering_handoff.md.

6. Microcopy and content UX

Labels, errors, empty states, tone.

See references/microcopy_content_ux.md.

Output standards

• Every flow documents entry, success, error, and exit
• Prototypes link to test tasks and assumptions
• Audit findings ranked severity + effort
• Handoff lists interaction rules, not only screenshots
• Escalate visual brand decisions to product-designer

When to load references

• Flows → references/flows_interaction_specs.md
• Prototypes → references/prototypes_in_code.md
• Heuristics → references/heuristic_evaluation.md
• IA → references/information_architecture.md
• Handoff → references/ux_engineering_handoff.md
• Copy → references/microcopy_content_ux.md