What is the primary problem when using Claude Code for React without a custom skill?

Without a custom skill, Claude Code generates generic React components that often require significant cleanup to match specific project conventions. This includes adapting to team preferences for export types (e.g., named vs. default), state management (e.g., Zustand vs. useState), styling (e.g., Tailwind vs. inline styles), testing co-location, and file structure patterns (e.g., atomic design vs. flat structure).

How should a React skill define component patterns for Claude Code?

A React skill should define component patterns by specifying that only functional components are allowed, never class components. It should enforce named exports from an index.ts barrel file. Props should be defined as TypeScript interfaces rather than inline types, and destructured in the function signature. Additionally, it should clarify that React.FC should only be used when children are accepted by the component.

What are the common state management rules a React skill should cover for Claude Code?

A React skill should cover state management by specifying that useState should be used for simple local state and useReducer for complex local state. For global state, it should recommend Zustand stores located in src/stores/. For server state, TanStack Query (React Query) should be used for all API calls. It should also explicitly state to never use Redux or Context for server-cached data.

Which styling conventions should a React skill enforce when generating components?

A React skill should enforce styling conventions such as using Tailwind CSS utility classes and avoiding inline styles, except for dynamic values. It should also specify the use of a 'cn()' utility for conditional classes and reference design tokens from 'tailwind.config' for consistent colors and spacing, ensuring a uniform visual style across components.

What key aspects should a React testing skill include for effective test generation?

A React testing skill should define the preferred test framework (e.g., Jest, Vitest, React Testing Library) and specify what to test (e.g., render, user interaction, async behavior) versus what not to test (e.g., implementation details, internal state). It should also outline mock patterns, such as using MSW for API mocks and jest.mock for modules, and establish a clear snapshot policy for when to use or avoid them, ensuring consistency and relevance in generated tests.

Claude Code Skills for React Developers: Component Patterns (2026)

Published: May 10, 2026

Category: Guides

React projects have enormous variation in conventions. Two React codebases might use completely different state management, styling, file structure, and testing approaches. Without a skill, Claude Code defaults to generic React patterns that probably don't match yours.

> Quick Answer: Claude Code's generic React component generation often requires extensive cleanup to match specific project conventions, including export types, state management, styling, testing, and file structure; a custom skill resolves this by enforcing project-specific patterns.

The problem without a React skill

Ask Claude Code to create a component and you'll get something functional but generic:

Default export (maybe your team uses named exports)
useState for everything (maybe you use Zustand or Jotai)
Inline styles or unstyled (maybe you use Tailwind or CSS modules)
No tests alongside (maybe you co-locate tests)
Flat component structure (maybe you use atomic design)

You spend 10 minutes cleaning up every generated component to match your patterns. A skill eliminates this entirely.

What a React skill should cover

Component patterns

- Functional components only, never class components
Named exports from index.ts barrel file
Props defined as TypeScript interface, not inline type
Destructure props in function signature
Use React.FC only when children are accepted

File structure

Components follow this structure:
ComponentName/
  index.ts              (re-export)
  ComponentName.tsx      (component)
  ComponentName.test.tsx (tests)
  ComponentName.module.css (styles)

State management

- Local state: useState for simple, useReducer for complex
Global state: Zustand stores in src/stores/
Server state: TanStack Query (React Query) for all API calls
Never use Redux or Context for server-cached data

Styling

- Tailwind CSS utility classes
No inline styles except for dynamic values
Use cn() utility for conditional classes
Design tokens from tailwind.config for colors and spacing

Hooks

- Custom hooks go in src/hooks/
Name: use[Feature] (e.g., useAuth, useProducts)
Return typed objects, not arrays
Handle loading, error, and data states

Next.js specific skills

If you use Next.js, your skill needs to cover:

Server Components vs Client Components (when to use "use client")
App Router patterns (layout.tsx, page.tsx, loading.tsx)
Data fetching (server functions vs client-side React Query)
Metadata and SEO (generateMetadata function)
Route handlers (route.ts patterns)

Testing React with skills

A React testing skill defines:

Test framework (Jest, Vitest, React Testing Library)
What to test (render, user interaction, async behavior)
What NOT to test (implementation details, internal state)
Mock patterns (MSW for API mocks, jest.mock for modules)
Snapshot policy (when to use, when to avoid)

Browse testing skills on Agensi.

Building your React skill

Start with this template and customize for your project:

---
name: react-standards
description: Enforces React component conventions when creating, editing, or reviewing React components and hooks.

React Standards
Components
Functional components with TypeScript
Named exports via index.ts barrel
Props as interface, destructured in signature
Co-located tests and styles

Styling
Tailwind CSS, no inline styles
cn() for conditional classes

State
useState/useReducer for local
Zustand for global
TanStack Query for server state

Testing
Vitest + React Testing Library
Test behavior, not implementation
One test file per component

Drop this in ~/.claude/skills/react-standards/SKILL.md and every React component Claude generates will match your patterns.

Find React and frontend skills at Agensi.