Menu
Review de UI — WCAG 2.2, CWV, WAI-ARIA, React 19/Next.js.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Basé sur la classification professionnelle SOC
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>