React Patterns
- 499 installs
- 30.1k repo stars
- Updated August 4, 2026
- davila7/claude-code-templates
react-patterns is an agent skill that teaches production-grade React component patterns including hooks, composition, performance, and TypeScript practices for developers using Claude Code or Cursor on modern React apps.
About
react-patterns is a frontend skill from davila7/claude-code-templates covering modern React architecture for production applications. The skill defines server, client, presentational, and container component types with clear state boundaries, emphasizing one responsibility per component, props down and events up, and composition over inheritance. It covers hooks usage, performance optimization, and TypeScript best practices with Read, Write, Edit, Glob, and Grep tool access for agent sessions. Developers reach for react-patterns when Claude Code or Cursor sessions need consistent guidance on component design rather than ad hoc React advice. The skill suits teams standardizing how agents generate and refactor React code across a codebase.
- Curated library of reusable React component and hook patterns
- Optimized for agentic coding workflows with Claude and Cursor
- Includes TypeScript, Tailwind, and modern React 18+ conventions
- Reduces boilerplate and context-window waste when building UIs
React Patterns by the numbers
- 499 all-time installs (skills.sh)
- Ranked #623 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/davila7/claude-code-templates --skill react-patternsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 499 |
|---|---|
| repo stars | ★ 30.1k |
| Last updated | August 4, 2026 |
| Repository | davila7/claude-code-templates ↗ |
What React patterns work best with coding agents?
Get production-grade React component patterns that work consistently with Claude Code and Cursor.
Who is it for?
Developers using Claude Code or Cursor who want consistent, production-grade React component patterns across agent-generated code.
Skip if: Teams building non-React frameworks or developers who only need a single framework-agnostic TypeScript style guide.
When should I use this skill?
User asks for React hooks patterns, component composition, server versus client components, or production React TypeScript conventions in agent sessions.
What you get
Production-ready React components following hooks, composition, performance, and TypeScript conventions aligned with agent tooling.
- component architecture guidelines
- refactored React components
- TypeScript-typed component patterns
Files
React Patterns
Principles for building production-ready React applications.
---
1. Component Design Principles
Component Types
| Type | Use | State |
|---|---|---|
| Server | Data fetching, static | None |
| Client | Interactivity | useState, effects |
| Presentational | UI display | Props only |
| Container | Logic/state | Heavy state |
Design Rules
- One responsibility per component
- Props down, events up
- Composition over inheritance
- Prefer small, focused components
---
2. Hook Patterns
When to Extract Hooks
| Pattern | Extract When |
|---|---|
| useLocalStorage | Same storage logic needed |
| useDebounce | Multiple debounced values |
| useFetch | Repeated fetch patterns |
| useForm | Complex form state |
Hook Rules
- Hooks at top level only
- Same order every render
- Custom hooks start with "use"
- Clean up effects on unmount
---
3. State Management Selection
| Complexity | Solution |
|---|---|
| Simple | useState, useReducer |
| Shared local | Context |
| Server state | React Query, SWR |
| Complex global | Zustand, Redux Toolkit |
State Placement
| Scope | Where |
|---|---|
| Single component | useState |
| Parent-child | Lift state up |
| Subtree | Context |
| App-wide | Global store |
---
4. React 19 Patterns
New Hooks
| Hook | Purpose |
|---|---|
| useActionState | Form submission state |
| useOptimistic | Optimistic UI updates |
| use | Read resources in render |
Compiler Benefits
- Automatic memoization
- Less manual useMemo/useCallback
- Focus on pure components
---
5. Composition Patterns
Compound Components
- Parent provides context
- Children consume context
- Flexible slot-based composition
- Example: Tabs, Accordion, Dropdown
Render Props vs Hooks
| Use Case | Prefer |
|---|---|
| Reusable logic | Custom hook |
| Render flexibility | Render props |
| Cross-cutting | Higher-order component |
---
6. Performance Principles
When to Optimize
| Signal | Action |
|---|---|
| Slow renders | Profile first |
| Large lists | Virtualize |
| Expensive calc | useMemo |
| Stable callbacks | useCallback |
Optimization Order
1. Check if actually slow 2. Profile with DevTools 3. Identify bottleneck 4. Apply targeted fix
---
7. Error Handling
Error Boundary Usage
| Scope | Placement |
|---|---|
| App-wide | Root level |
| Feature | Route/feature level |
| Component | Around risky component |
Error Recovery
- Show fallback UI
- Log error
- Offer retry option
- Preserve user data
---
8. TypeScript Patterns
Props Typing
| Pattern | Use |
|---|---|
| Interface | Component props |
| Type | Unions, complex |
| Generic | Reusable components |
Common Types
| Need | Type |
|---|---|
| Children | ReactNode |
| Event handler | MouseEventHandler |
| Ref | RefObject<Element> |
---
9. Testing Principles
| Level | Focus |
|---|---|
| Unit | Pure functions, hooks |
| Integration | Component behavior |
| E2E | User flows |
Test Priorities
- User-visible behavior
- Edge cases
- Error states
- Accessibility
---
10. Anti-Patterns
| ❌ Don't | ✅ Do |
|---|---|
| Prop drilling deep | Use context |
| Giant components | Split smaller |
| useEffect for everything | Server components |
| Premature optimization | Profile first |
| Index as key | Stable unique ID |
---
Remember: React is about composition. Build small, combine thoughtfully.
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kHow it compares
Use react-patterns for general React architecture with agents; use react-selective-hydration when optimizing SSR hydration performance specifically.
FAQ
Which component types does react-patterns define?
react-patterns defines server components for data fetching, client components for interactivity, presentational components for UI display, and container components for heavy state and logic separation.
Which coding agents is react-patterns designed for?
react-patterns targets Claude Code and Cursor sessions, providing consistent React hooks, composition, performance, and TypeScript guidance when agents read and write project files.