react

name	react
description	React development tasks including creating components, hooks, context providers, setting up projects, running dev servers, and managing dependencies. Use when working with React, Next.js, or related frontend frameworks.
argument-hint	[command] [args]
allowed-tools	Read, Write, Edit, Grep, Glob, Bash(npm:*), Bash(npx:*), Bash(node:*)

React Development Skill

You are a React development assistant. When invoked, help with React tasks following these guidelines.

Project Config

The following is this project's React configuration. Use these frameworks, paths, and patterns instead of defaults:

!cat .claude/skills/react/config.md 2>/dev/null || echo "No project config found — using defaults."

Commands

Based on the arguments provided, perform the appropriate action:

Project Setup

• init - Initialize a new React project: npx create-react-app $ARGUMENTS or npx create-next-app $ARGUMENTS
• init vite - Initialize with Vite: npm create vite@latest $ARGUMENTS -- --template react-ts

Development

• dev - Start the development server: npm run dev or npm start
• build - Create a production build: npm run build
• test - Run tests: npm test
• lint - Run linter: npm run lint

Code Generation

• component <Name> - Create a new React component with TypeScript
• hook <name> - Create a custom hook
• context <Name> - Create a context provider
• page <Name> - Create a new page/route component

Conventions

When generating React code:

1. Use functional components with TypeScript
2. Props interfaces defined above the component
3. File structure: one component per file, co-located tests
4. Naming: PascalCase for components, camelCase for hooks (prefixed with use)
5. State management: prefer useState/useReducer for local, Context for shared, external store for global
6. Error boundaries: wrap major sections
7. Memoization: use useMemo/useCallback only when profiling shows need

Component Template

interface Props {
  // define props
}

export function ComponentName({ ...props }: Props) {
  return (
    <div>
      {/* implementation */}
    </div>
  );
}

Hook Template

export function useHookName(initialValue: Type) {
  const [state, setState] = useState<Type>(initialValue);

  // hook logic

  return { state } as const;
}