React Architecture Checklist

"A checklist cannot fly a plane, but a pilot cannot fly safely without one." — Atul Gawande

Core Philosophy

Shared across the dotnet / python / php / rust / react architecture checklists — same values, language-specific checks.

Grounding note: the knowledge base has no React corpus. Use collection="javascript" for TS/JS idioms, collection="ui_ux" for accessibility, and collection="internal" for architecture standards; cite react.dev as the primary React authority. Never invent a react collection.

Workflow

Shared skeleton: DETECT → SCAN → REPORT → RECOMMEND.

DETECT     React version (package.json `react`), bundler (Vite/CRA/Next.js), TypeScript (tsconfig +
           strict), state library (Redux/RTK/Zustand/Context/none), router, and whether the React
           Compiler is wired (`babel-plugin-react-compiler` / Next.js `experimental.reactCompiler`).
           Record findings; version and compiler presence both change what is idiomatic.

SCAN       Run the React Checklist below section by section. Gather evidence with tooling:
             npx eslint . --max-warnings 0          # baseline — incl. eslint-plugin-react-hooks
             npx tsc --noEmit                        # type errors gate the review
             npx knip                                # dead code / unused exports / deps
             grep -rn "useEffect" src/ | wc -l       # effect surface to audit
           Every violation becomes a finding with file:line and a severity (critical/high/medium/low).

REPORT     Emit the graded report (Output Template). Grade = function of counted findings.

RECOMMEND  Prioritize: critical → quick wins → modernization. Version-gate every recommendation.

React Checklist (language-specific)

ESLint config: eslint configuration. Full section-by-section list (with the hooks & effects audit table) + grounding query map: review checklist.

State Block

<arch-checklist-state>
language: react
mode: DETECT | SCAN | REPORT | RECOMMEND | COMPLETE
detected: [react-version | bundler | ts:strict/loose | state-lib | tests:yes/no]
issues_found: [critical:N high:N medium:N low:N]
last_action: [what was just done]
next_action: [what should happen next]
</arch-checklist-state>

Output Template

Shared across all architecture checklists.

## Architecture Checklist: [app/package] (React)
**React**: [19] | **Bundler**: [Vite/CRA/Next] | **Compiler**: [wired/absent] | **TS**: [strict/loose/none] | **State**: [RTK/Zustand/Context] | **Tests**: [yes/no]

| Section | Pass | Fail | Warn |
|---------|------|------|------|
| Hooks / Effects / Cohesion / State / Render / Types / a11y / Boundaries | … | … | … |

### Grade: [A–F]
Grading: **A** 0 crit/0 high/≤3 med · **B** 0 crit/≤2 high · **C** 0 crit, gaps in one area ·
**D** 1+ crit · **F** fundamental problems (conditional hooks, `any` everywhere, no a11y, server state in effects throughout).

| Severity | Location | Finding | Recommendation |
|----------|----------|---------|----------------|
| CRITICAL | file:line | [pattern] | [version-gated fix] |

**Hooks/effects audit**: | location | issue | dep array | cleanup | risk |
**Quick wins**: [low-effort, high-impact] · **Modernization**: [larger items with effort estimate]

AI Discipline Rules

• Lint + types must pass first. eslint --max-warnings 0 and tsc --noEmit are the baseline; report failures before the architectural checklist.
• Evidence or it is not a finding. Cite file:line; show the eslint/grep output. Never grade on vibes.
• Version-gate recommendations. Do not suggest React 18/19 APIs (useTransition, Actions, use(), server components) for a React 16/17 codebase.
• Architecture, not security. XSS, secret leakage, and dependency CVEs belong to react-security-review — note them and route there.

Integration with Other Skills

• architecture-review — When the grade is D/F, escalate to the Socratic critic: this checklist finds what is wrong; architecture-review builds why.
• react-security-review — Companion for the security dimension (XSS, bundle secrets, npm audit).
• react-feature-slice — Correct-pattern reference when the checklist flags structural/cross-feature violations.
• react-modernization-analyzer — When findings cluster around legacy patterns (class components, CRA), route to the modernization plan.
• tdd — Methodology for adding the RTL tests the checklist flags as missing, and for driving any refactor.
• dotnet / python / php / rust-architecture-checklist — Sibling skills sharing this exact Core Values + workflow + output.