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

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.