R1: Components should have one reason to change.
R2: Prefer composition over boolean prop combinations.
R3: Keep JSX shallow enough to scan; extract named components for meaningful sections.
R4: Effects synchronize with external systems; do not use them for ordinary data derivation.
R5: Derive values during render when possible; do not mirror props or computed values into state.
R6: Keep state as local as possible and lift it only when multiple owners need it.
R7: Separate server/cache state from local UI state.
R8: Custom hooks own reusable stateful behavior, not arbitrary helper code.
R9: Event handlers should describe user intent and keep mutation paths obvious.
R10: Tests should assert user-visible behavior, accessibility, and state transitions, not incidental styling details.
R11: Organize files by dependency ownership; keep private dependencies with their owner and shared dependencies in the nearest common/.
R12: Model mutually exclusive component modes with discriminated union props.
R13: Render explicit loading, error, empty, and success states for remote or nullable data.
R14: Keep render pure; side effects belong in event handlers, effects, or boundary code.
R15: Prefer realistic test data builders over brittle inline fixtures.

Skill Routing

Work	Use
Component props, JSX, conditional rendering, event handlers	`clean-react-components`
Effects, dependency arrays, custom hooks	`clean-react-hooks`
Local state, derived state, reducers, server state	`clean-react-state`
React Testing Library tests	`clean-react-tests`
Owner folders, shared dependencies, CSS modules	`clean-react-file-organization`
Names, comments, functions, general code quality	`clean-general`, `clean-general-names`, `clean-general-comments`, `clean-typescript`, and focused TypeScript skills

Review Checklist

AI Behavior

When reviewing code, use this skill for the first-pass sweep: identify violations by rule number (e.g., "R4 violation: effect used for derived state").

When writing detailed fixes or explanations for a specific category, read the corresponding sub-skill file before proceeding — for example, read ../clean-react-components/SKILL.md when addressing R1/R2/R3/R9/R12/R13/R14 violations. If the Skill tool is available, invoke the skill by name instead. The sub-skills contain code examples and nuance that this index omits.

When fixing or editing code, report what was fixed (e.g., "Fixed: moved derived value out of state (R5)").

clean-react

Clean React: Index And Review Guide

Core Rules (R1-R15)