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.