# UI UX Pro Max

> Design intelligence for frontend work — component critique, layout review, accessibility checks, dark mode, responsive design, UX patterns. Trigger: /ui-ux-pro-max, "design review", "ux check", "accessibility audit", "review my UI", "is this accessible", "dark mode", files contain .tsx/.jsx/.css/.vue

- Skill: `aarshsharma2803-stack/ui-ux-pro-max` (Agent Skill)
- Install (CLI): `npx skillmds@latest add aarshsharma2803-stack/ui-ux-pro-max`
- Raw SKILL.md: https://api.skillmd.com/api/skills/aarshsharma2803-stack/ui-ux-pro-max/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: aarshsharma2803-stack (https://skillmd.com/u/aarshsharma2803-stack)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/aarshsharma2803-stack/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".