ui-ux-engineer

---
name: ui-ux-engineer
description: Use when a requested interface review or redesign requires product-level hierarchy, interaction, accessibility, forms, navigation, states, or responsive UX judgment.
---

# UI/UX Engineer

## Overview

Use this skill to review and improve the user experience of any interface.
This skill is framework-agnostic and focuses on design quality, interaction logic, and usability.
It applies equally to desktop, web, and mobile surfaces.

## Workflow

1. Detect project shape.
- New or greenfield UI: establish the user goal and primary flow first, choose a
  window posture or page layout, and defer visual polish until the interaction
  structure is sound.
- Improving an existing interface: read the existing surface first, identify the
  main friction points across hierarchy, interaction quality, and state coverage,
  then scope changes by user impact.
- Read [`references/project_workflow.md`](references/project_workflow.md) for both paths.

2. Classify the UX task and route it.
- Read [`references/task_selection.md`](references/task_selection.md) when the request is underspecified
  or several UX framings fit.
- Consult [`references/topic_index.md`](references/topic_index.md) to route the problem to the UX task,
  default approach, common failure modes, audit fixtures, and the best local book.
- Determine what the user is trying to accomplish and what states must be handled: loading, empty, valid,
  invalid, busy, success, and failure.
- Identify the main workflow path and any secondary paths.

3. Review visual hierarchy and layout.
- Make visual hierarchy obvious with spacing, grouping, alignment, and restrained emphasis.
- Keep forms short, labels explicit, and primary actions visually dominant.
- Check that the screen communicates its purpose in three seconds.
- Check that the main action is obvious and visually dominant.
- Read [`references/ui_ux_review.md`](references/ui_ux_review.md) for the full review checklist covering hierarchy, interaction quality, validation, state coverage, and accessibility.

4. Review interaction quality.
- Give immediate feedback for user actions.
- Prevent errors before showing errors.
- Keep destructive actions explicit and reversible when practical.
- Support keyboard flow, sensible tab order, and accessible names or tooltips where needed.
- Check whether busy work has been removed from the user's path.

5. Review edge states and audit for completeness.
- Check whether edge states (empty, error, loading, offline) look intentional rather than broken.
- Verify that validation messages are clear and actionable.
- Verify that error recovery paths exist.
- Read [`references/testing_and_oracles.md`](references/testing_and_oracles.md) for the state matrix
  fixture corpus, oracle checklists, and inspectable artifact formats.

6. Reference design heuristics when needed.
- Read [`references/design_books.md`](references/design_books.md) when you need durable design heuristics, typography guidance, grid and layout thinking, or design-system perspective.
- Reach for these books when they match the problem:
  - "Refactoring UI" for visual hierarchy, spacing, typography, color, and component polish.
  - "Practical UI" for logic-driven accessibility, interaction, and usability rules.
  - "About Face" for flow, task structure, dialog behavior, and interaction model decisions.

## Implementation defaults

- Load the local-only books first when present; see [`references/local_books.md`](references/local_books.md)
  for the reading order, the coverage map in [`references/reference_survey.md`](references/reference_survey.md),
  and the broader design literature in [`references/design_books.md`](references/design_books.md).

## Quality bar

- Favor clarity over decoration.
- Avoid cramped layouts, unlabeled icons, ambiguous submit buttons, and dialogs that ask questions without context.
- UI decisions should be defensible in terms of user goals, not personal taste.

## Output expectations

When using this skill, aim to produce:
- Specific, actionable feedback tied to user goals and usability principles.
- A short explanation of key UX decisions when the change is non-obvious.
- Recommendations grounded in the reference materials rather than subjective opinion.