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
```markdown
- 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
```markdown
Components follow this structure:
ComponentName/
index.ts (re-export)
ComponentName.tsx (component)
ComponentName.test.tsx (tests)
ComponentName.module.css (styles)
```
State management
```markdown
- 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
```markdown
- 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
```markdown
- 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:
```markdown
---
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 stylesStyling
- Tailwind CSS, no inline styles - cn() for conditional classesState
- useState/useReducer for local - Zustand for global - TanStack Query for server stateTesting
- 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.*
