Menu
Review de UI — WCAG 2.2, CWV, WAI-ARIA, React 19/Next.js.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Executa o milestone inteiro de forma autonoma ate concluir.
Executa exatamente uma unidade de trabalho e para (step mode).
Task autonoma sem milestone — brainstorm, discuss, plan, execute.
Gerencia múltiplas contas Claude e troca entre elas (setup-token). Use ao esgotar a sessão de uma conta.
Qualidade do codebase — lint, nomenclatura. Flags: --fix, --paths.
Configuracoes do Forge — status line, hooks, MCPs.
| name | forge-ui-review |
| description | Review de UI — WCAG 2.2, CWV, WAI-ARIA, React 19/Next.js. |
<essential_principles>
Read project config to identify:
| Signal | Framework |
|---|---|
react + react-dom 19+ in package.json | React 19 |
react 18.x in package.json | React 18 |
next in package.json | Next.js (check App Router vs Pages) |
vue 3.x in package.json | Vue 3 |
nuxt in package.json | Nuxt (Vue) |
svelte in package.json | Svelte |
.astro files | Astro |
| None of the above | Vanilla / Web Components |
Also detect:
app/ directory with layout.tsx)<img> without alt → ✗ SC 1.1.1 Non-text Contentalt="" → ⚠ SC 1.1.1 (screen readers announce filename)<video>/<audio> without captions or transcript → ⚠ SC 1.2.2 Captions<button>/<a> without visible text or aria-label → ✗ SC 4.1.2 Name, Role, Value<div onClick> without role="button", tabIndex, and onKeyDown → ✗ SC 2.1.1 Keyboard✗ SC 4.1.2<input> without <label> or aria-label → ✗ SC 1.3.1 Info and Relationships⚠ SC 3.3.1 Error Identificationautocomplete on common fields (name, email, tel) → info SC 1.3.5⚠ SC 1.3.1<main>, <nav>, <header>) → ⚠ SC 1.3.1lang attribute on <html> → ✗ SC 3.1.1 Language of Page⚠ SC 1.4.3 (4.5:1 normal text, 3:1 large text)⚠ SC 1.4.1 Use of Colorprefers-reduced-motion check → ⚠ SC 2.3.3✗. Focused element must be at least partially visible.✗. Every drag action must have a non-dragging fallback.⚠. Minimum 24px; recommend 44px for primary actions.⚠.⚠.✗. Must allow paste, password managers, passkeys.When reviewing custom widgets, verify they implement the correct APG pattern:
Modal dialog: role="dialog", aria-modal="true", aria-labelledby → visible title. Focus trap (Tab/Shift+Tab inside), Escape closes, focus returns to trigger.
Tabs: role="tablist" container, role="tab" with aria-selected, role="tabpanel" with aria-labelledby. Arrow keys between tabs, Tab into panel content, Home/End to first/last.
Accordion: Headers with aria-expanded, aria-controls pointing to panel. Enter/Space toggles. Optional arrow keys between headers.
Combobox/autocomplete: Input with role="combobox", aria-expanded, aria-autocomplete, aria-controls → listbox. Options with role="option", aria-selected. Down arrow opens, Escape closes, Enter selects.
Toast/notification: role="status" (polite) or role="alert" (assertive). Don't auto-dismiss critical messages. Actions in toasts must be keyboard-accessible.
aria-hidden="true" on icon is correctdisplay: none, hidden): skip| Metric | Good | Needs Improvement | Poor |
|---|---|---|---|
| LCP | ≤2.5s | 2.5s-4.0s | >4.0s |
| INP | ≤200ms | 200ms-500ms | >500ms |
| CLS | ≤0.1 | 0.1-0.25 | >0.25 |
INP replaced FID in March 2024. INP measures the latency of ALL interactions (not just first), making it more representative.
Server Components (default in App Router):
'use client' → ⚠ unnecessary client bundle. Remove directive.'use client' → ⚠ push directive down to interactive leaves only.useState/useEffect → ✗ will crash at runtime.useEffect + fetch when server-side fetch would suffice → ⚠ creates waterfall.await in Server Component instead of Promise.all() → ⚠ waterfall.React 19 hooks:
use(promise) without Suspense boundary above → ✗ will crash.useFormStatus() called outside <form> context → ✗ returns stale data.useOptimistic() without error rollback handling → ⚠ UI desyncs on failure.useActionState() (replaces useFormState) not adopted when using form actions → info.Next.js App Router:
loading.tsx for routes with async data → ⚠ no loading state.error.tsx for routes with fallible data → ⚠ no error boundary.info use Server Action instead.<img> instead of next/image → ⚠ LCP loses image optimization.Rendering:
.map() defined inline → ⚠ INP creates new reference each renderkey prop on list items → ✗ reconciliation breaks⚠ INP suggest react-window/tanstack-virtual⚠ INP forces full re-render treeBundle:
import _ from 'lodash' for debounce) → ⚠ bundle bloat. Use lodash/debounce or lodash-es.info lazy load with dynamic importUX states:
⚠ (UX)⚠ (UX)info (UX)✗ Critical: causes crashes, visible jank, or data loss (missing keys, infinite rerenders, no Suspense boundary)⚠ Warning: measurable CWV degradation (large lists, context re-renders, unsized images)info: improvement opportunity (lazy loading, memoization, modern patterns)| Pattern | When appropriate | Anti-signal |
|---|---|---|
| Compound Components | Related elements sharing implicit state (Select+Option, Tabs+Panel) | >8 boolean props controlling modes |
| Custom Hooks | Reusable stateful logic without UI. Preferred over HOCs/render props | Logic duplicated across 3+ components |
| Container/Presentational | Data layer separated from display. Server Components are natural containers | useEffect + fetch + rendering in same component |
| Composition (children/slots) | Flexible component API without prop drilling | Component has >5 render-related props |
Responsibility:
⚠ god componentProps:
⚠ consider compound component or composition pattern⚠ prop drilling. Suggest context, composition, or Zustand slice⚠ should be two componentsState:
useState that always change together → ⚠ use useReducer or single object⚠ computed value, not stateinfoMissing patterns:
⚠<Suspense> with lazy-loaded or use() components → ✗ (React 19)info# UI Review
**Framework:** [React 19 / Next.js App Router / Vue 3 / Svelte / ...]
**Styling:** [Tailwind / CSS Modules / ...]
**State management:** [Zustand / Redux / Context / TanStack Query / ...]
## Accessibility (WCAG 2.2 AA)
### Critical
- `✗` [file:line] — [issue] — SC [number] [name] → [fix]
### Warnings
- `⚠` [file:line] — [issue] — SC [number] [name] → [fix]
## Performance (Core Web Vitals)
### Critical
- `✗` [file:line] — [issue] — [CWV metric] → [fix]
### Warnings
- `⚠` [file:line] — [issue] — [CWV metric] → [fix]
## Architecture
- `⚠` [file:line] — [issue] → [recommendation + pattern name]
## Summary
| Category | Critical | Warning | Info |
|----------|----------|---------|------|
| Accessibility | N | N | N |
| Performance | N | N | N |
| Architecture | — | N | N |
<fast_mode>
When invoked with -fast flag: audit only files changed in the current branch. Skip architecture review. Focus on accessibility critical + performance critical only.
</fast_mode>
<success_criteria>