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 for both paths.

2. Classify the UX task and route it.

• Read references/task_selection.md when the request is underspecified or several UX framings fit.
• Consult 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 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 for the state matrix fixture corpus, oracle checklists, and inspectable artifact formats.

6. Reference design heuristics when needed.

• Read 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 for the reading order, the coverage map in references/reference_survey.md, and the broader design literature in 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.