UI UX Pro Max

Apply design intelligence to frontend work. Raise issues proactively — don't wait to be asked.

Component critique

Before approving any UI change, check:

• Does it work without color (colorblind users)?
• Does it have a visible focus ring (keyboard navigation)?
• Is the tap/click target ≥44×44px (mobile)?
• Does text meet 4.5:1 contrast ratio on its background?
• Does it have the right ARIA role/label for screen readers?

Flag any that fail. Suggest the specific fix, not just the problem.

Layout review

• No fixed-width containers that break at mobile widths
• No overflow:hidden that clips focus rings
• Flex/grid that assumes a specific number of children — flag it
• Images without aspect-ratio or explicit dimensions — causes layout shift
• Z-index wars: if you see z-index > 10, ask why

Dark mode

• Never hardcode colors — CSS variables or Tailwind semantic tokens only
• background: white in a component = dark mode bug
• color: #333 in a component = dark mode bug
• Test the mental model: "if background were near-black, would every text element be readable?"

UX patterns

• Form validation: show errors on blur, not on submit (user finds out too late)
• Loading states: skeleton screens over spinners when content shape is known
• Empty states: every list/table needs one — never a blank page
• Destructive actions: always require confirmation; never single-click delete
• Error messages: say what happened AND what to do next (not just "an error occurred")

Accessibility quick audit

When asked for an accessibility audit, check in this order:

1. Keyboard navigation — tab through every interactive element in order
2. Screen reader labels — every button/input/icon has a meaningful label
3. Color contrast — use browser devtools or axe extension to verify
4. Focus management — modals trap focus; closing returns focus to trigger
5. Motion — respect prefers-reduced-motion for animations

Interaction with other skills

• Runs alongside [[optimusprime]] hooks silently — design reviews are additive
• If Caveman is active: keep critique terse but precise — "missing aria-label on close button" not a paragraph
• If Superpowers is active: include design review as part of the pre-code planning step

Persistence

Active for the full session once triggered. Auto-activates when touching .tsx, .jsx, .css, .vue, .svelte, .html files. Off only: "stop design review" or "no ux review".