Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
Review files for compliance with Web Interface Guidelines.
file:line formatWhen a user provides a file or pattern argument:
If no files specified, ask the user which files to review.
aria-label<label> or aria-labelonKeyDownonKeyUp<button> for actions, <a>/<Link> for navigation (not <div onClick>)alt (or alt="" if decorative)aria-hidden="true"aria-live="polite"<button>, <a>, <label>, <table>) before ARIA<h1>–<h6>; include skip link for main contentscroll-margin-top on heading anchorsfocus-visible:ring-* or equivalentoutline-none / outline: none without focus replacement:focus-visible over :focus (avoid focus ring on click):focus-within for compound controlsautocomplete and meaningful nametype (email, tel, url, number) and inputmodeonPaste + preventDefault)htmlFor or wrapping control)spellCheck={false})… and show example patternautocomplete="off" on non-auth fields to avoid password manager triggersbeforeunload or router guard)prefers-reduced-motion (provide reduced variant or disable)transform/opacity only (compositor-friendly)transition: all—list properties explicitlytransform-origin<g> wrapper with transform-box: fill-box; transform-origin: center… not ..." " not straight "10 MB, ⌘ K, brand names…: "Loading…", "Saving…"font-variant-numeric: tabular-nums for number columns/comparisonstext-wrap: balance or text-pretty on headings (prevents widows)truncate, line-clamp-*, or break-wordsmin-w-0 to allow text truncation<img> needs explicit width and height (prevents CLS)loading="lazy"priority or fetchpriority="high"virtua, content-visibility: auto)getBoundingClientRect, offsetHeight, offsetWidth, scrollTop)<link rel="preconnect"> for CDN/asset domains<link rel="preload" as="font"> with font-display: swap<a>/<Link> (Cmd/Ctrl+click, middle-click support)useState, consider URL sync via nuqs or similar)touch-action: manipulation (prevents double-tap zoom delay)-webkit-tap-highlight-color set intentionallyoverscroll-behavior: contain in modals/drawers/sheetsinert on dragged elementsautoFocus sparingly—desktop only, single primary input; avoid on mobileenv(safe-area-inset-*) for notchesoverflow-x-hidden on containers, fix content overflowcolor-scheme: dark on <html> for dark themes (fixes scrollbar, inputs)<meta name="theme-color"> matches page background<select>: explicit background-color and color (Windows dark mode)Intl.DateTimeFormat not hardcoded formatsIntl.NumberFormat not hardcoded formatsAccept-Language / navigator.languages, not IPvalue need onChange (or use defaultValue for uncontrolled)suppressHydrationWarning only where truly neededhover: state (visual feedback)& over "and" where space-constraineduser-scalable=no or maximum-scale=1 disabling zoomonPaste with preventDefaulttransition: alloutline-none without focus-visible replacementonClick navigation without <a><div> or <span> with click handlers (should be <button>).map() without virtualizationaria-labelIntl.*)autoFocus without clear justificationGroup by file. Use file:line format (VS Code clickable). Terse findings.
## src/Button.tsx
src/Button.tsx:42 - icon button missing aria-label
src/Button.tsx:18 - input lacks label
src/Button.tsx:55 - animation missing prefers-reduced-motion
src/Button.tsx:67 - transition: all → list properties
## src/Modal.tsx
src/Modal.tsx:12 - missing overscroll-behavior: contain
src/Modal.tsx:34 - "..." → "…"
## src/Card.tsx
✓ pass
State issue + location. Skip explanation unless fix non-obvious. No preamble.