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
1---2name: ux-software-engineer3description: 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).4---56# UX Software Engineer78## When to Use910- Turn **user journeys** into flow diagrams and interaction specs11- Build **clickable or coded prototypes** to validate flows before production12- Run **heuristic UX audits** on existing product and prioritize fixes13- Define **interaction details**: validation timing, focus, undo, confirmations14- Improve **IA**: navigation, labeling, grouping, empty paths15- Write **UX acceptance criteria** for `ui-software-engineer` or fullstack16- Partner on **usability tests** (tasks, success metrics, synthesis to tickets)17- Refine **microcopy** in UI (labels, errors, empty states) with product voice1819## When NOT to Use2021- Greenfield discovery, wireframes without build intent → `product-designer`22- Final visual implementation and token-perfect screens → `ui-software-engineer`23- Core Web Vitals, bundle, RSC architecture → `senior-frontend-software-engineer`24- Formal requirements and process maps → `business-analyst`25- Marketing site copy → `tech-writer-researcher`2627## Related skills2829| Need | Skill |30|---|---|31| Product design and wireframes | `product-designer` |32| Production UI from specs | `ui-software-engineer` |33| Senior FE and a11y depth | `senior-frontend-software-engineer` |34| End-to-end feature delivery | `fullstack-software-engineer` |3536## Core Workflows3738### 1. Flows and interaction specs3940Journey → screens → transitions → states.4142**See `references/flows_interaction_specs.md`.**4344### 2. Prototypes in code4546When to prototype; fidelity levels; validation loops.4748**See `references/prototypes_in_code.md`.**4950### 3. Heuristic evaluation5152Nielsen-style pass; severity; fix tickets.5354**See `references/heuristic_evaluation.md`.**5556### 4. Information architecture5758Nav, taxonomy, findability in product.5960**See `references/information_architecture.md`.**6162### 5. UX handoff to engineering6364Acceptance criteria, edge cases, open questions.6566**See `references/ux_engineering_handoff.md`.**6768### 6. Microcopy and content UX6970Labels, errors, empty states, tone.7172**See `references/microcopy_content_ux.md`.**7374## Output standards7576- Every flow documents **entry, success, error, and exit**77- Prototypes link to **test tasks** and assumptions78- Audit findings ranked **severity + effort**79- Handoff lists **interaction rules**, not only screenshots80- Escalate visual brand decisions to `product-designer`8182## When to load references8384- **Flows** → `references/flows_interaction_specs.md`85- **Prototypes** → `references/prototypes_in_code.md`86- **Heuristics** → `references/heuristic_evaluation.md`87- **IA** → `references/information_architecture.md`88- **Handoff** → `references/ux_engineering_handoff.md`89- **Copy** → `references/microcopy_content_ux.md`