What is a react claude skill?

It is a skill that loads React principles for your agent to follow. The agent applies them when reading, writing or editing React files, covering hooks, state, performance and TypeScript.

Does it support React 19?

Yes. It includes React 19 patterns such as useActionState for form submission state, useOptimistic for optimistic UI updates and use for reading resources in render.

React Patterns

SkillAI & models

The react-patterns skill is a set of React principles your agent follows while working on your code. It covers component design, hook extraction rules, state management choices, React 19 patterns, performance profiling, error boundaries and TypeScript typing. The agent applies this guidance when reading, writing or editing React files.

Use React Patterns in Claude, ChatGPT or Ahel Desktop

Free. Sign in, add React Patterns and connect your AI. About a minute.

Claude ChatGPT Ahel Desktop

Also: Claude Code · Cursor · Codex

Then ask your AI: use the React Patterns skill

Details

Instructions available. Your AI can read the instructions. Execution depends on the setup they require.

Account requirements not reviewed. Check the skill instructions before use; ahel provides instructions and does not run this skill.

No other account needed.

Have a React project with TypeScript files the agent can read and edit.

React PatternsStart free

What your AI can do with it

Apply component design rules: one responsibility per component, props down, events up
Extract custom hooks such as useLocalStorage, useDebounce, useFetch and useForm
Choose state management based on complexity, from useState to Zustand or Redux Toolkit
Use React 19 hooks including useActionState, useOptimistic and use
Follow a performance order: check, profile with DevTools, find the bottleneck, fix it
Type component props with interfaces and unions

Getting started

Have a React project with TypeScript files the agent can read and edit.
Add the react-patterns skill to your agent so it loads the React principles.
Confirm the agent has Read, Write, Edit, Glob and Grep access to your React files.
Ask the agent to write or edit a component and it will apply the patterns.

What this skill tells your AI

The instructions your AI receives, as published by davila7/claude-code-templates in cli-tool/components/skills/development/react-patterns/SKILL.md and read by ahel’s review.

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

Check if actually slow
Profile with DevTools
Identify bottleneck
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

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.

Signals

GitHub stars: 32k
Forks: 4k
Last commit: Oct 2026

Others that do the same job

react-patterns
Skill · vodailocz

Questions

What is a react claude skill?: It is a skill that loads React principles for your agent to follow. The agent applies them when reading, writing or editing React files, covering hooks, state, performance and TypeScript.
Does it support React 19?: Yes. It includes React 19 patterns such as useActionState for form submission state, useOptimistic for optimistic UI updates and use for reading resources in render.

Advanced

Item type: skill
Key: react-patterns-davila7
Source: github.com/davila7/claude-code-templates

github.com/davila7/claude-code-templates