React With AI

React-with-AI

A `CLAUDE.md` template that teaches [Claude Code](https://docs.anthropic.com/en/docs/claude-code) modern React best practices. Drop it into any React project and Claude will follow production-grade conventions for TypeScript, state management, accessibility, security, testing, and more — automatically, on every interaction.

Why

Claude Code reads `CLAUDE.md` from your working directory and applies its rules to every conversation (including sub-agents). Without guardrails, AI-generated React code can drift: `any` types, raw `useEffect` data fetching, missing error boundaries, inaccessible markup, tokens in localStorage, and more. This template codifies the conventions experienced React teams enforce in code review, so Claude follows them from the first line.

Two Versions

Pick the one that fits your project.

File	Size	Contains	Best for
`CLAUDE.md.FULL`	36,610 chars	All rules plus BAD/GOOD code examples	Teams that want rules plus concrete patterns — Claude follows rules-with-examples more reliably
`CLAUDE.md.SHORT`	26,435 chars	All rules, no code examples	Token-constrained setups, or projects that just need guardrails without inline samples

Both files cover the **same rules** — the only difference is whether each rule is illustrated with a BAD/GOOD code block. SHORT is ~28% smaller because it strips all fenced code blocks while preserving every rule, table, and checklist.

What's inside (click to expand)

Area	Key rules
TypeScript	Strict mode, no any, discriminated unions, exhaustive switch guards
Components	Single responsibility, composition over configuration, stable list keys
State Management	Decision tree: SWR/Query → useState → Context → Zustand; never store derived state
Hooks	useEffect only for external sync, mandatory cleanup, async safet