ui-ux-engineer

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. Identify the surface and its primary user goal.

• 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.

2. 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.

3. 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.

4. Review edge states.

• 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.

5. 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.

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.