ClaudeReactArchitecture

React Claude Rules

Claude rules for React: component design, state patterns, performance, and testing conventions in CLAUDE.md.

CLAUDE.md

- Prefer small, focused components; refactor when a component does more than one thing
- Use React Server Components for data fetching; client components only for interactivity
- Model all async state with useQuery or useAction; avoid manual loading/error state
- Use URL state (searchParams) for shareable, bookmark-friendly filters and pagination
- Write React Testing Library tests for all user-facing components
- Use Storybook for component documentation and visual regression testing
- Avoid prop drilling beyond 2 levels; use context or state management
- Use React DevTools Profiler to identify and fix unnecessary re-renders

How to use with Claude

Create a `CLAUDE.md` file in your project root. Claude Code reads this on startup and follows your conventions throughout the session.

← All Claude rules All React rules →

#react#claude#components#testing#coding-rules

Related Rules

Next.js Claude Rules

ClaudeNext.js

Claude rules for Next.js App Router: streaming, server actions, caching, and production deployment patterns.

Architecture

nextjs · claudeCopy Ready

Go Claude Rules

ClaudeGo

Claude rules for Go: project structure, error handling, testing, and idiomatic Go patterns.

Architecture

go · golangCopy Ready

Rust Claude Rules

ClaudeRust

Claude rules for Rust: zero-cost abstractions, async with Tokio, error types, and high-performance Rust patterns.

Performance

rust · tokioCopy Ready

SQL Claude Rules

ClaudeSQL

Claude rules for SQL and database design: schema conventions, query patterns, and migration safety.

Database

sql · databaseCopy Ready