React Project copilot-instructions.md Template

Description

## copilot-instructions.md for React Projects

This project is a React application. Follow these instructions for all code suggestions.

### Tech Stack
- React 19 with TypeScript 5
- Vite for build tooling
- React Router v7 for routing
- Tailwind CSS 4 for styling
- Zustand for client state management
- React Query (TanStack Query) for server state
- Vitest + React Testing Library for tests

### Component Conventions
- Functional components with TypeScript interfaces for props
- File naming: `PascalCase.tsx` for components, `camelCase.ts` for utilities
- One component per file; co-locate styles and tests
- Export components as named exports, not default exports
- Props interface named `{ComponentName}Props`

### Hooks
- Custom hooks prefixed with `use`: `useAuth`, `useDebounce`
- Extract hooks into `/hooks` directory when reused across components
- Always specify dependency arrays completely in `useEffect`
- Clean up subscriptions and timers in useEffect return function
- Use `useCallback` for event handlers passed to child components

### Data Fetching
- All API calls through React Query hooks in `/hooks/api/` directory
- Query keys follow convention: `['resource', params]`
- Mutations use `useMutation` with `onSuccess` for cache invalidation
- Show skeleton loaders during initial fetch, spinners during refetch
- Handle error states with error boundary and retry buttons

### Forms
- React Hook Form with Zod validation schemas
- Schema files co-located with form components
- Inline error messages below each field
- Disable submit during pending submission

### Styling
- Tailwind utility classes only; no inline styles or CSS modules
- Use `cn()` utility for conditional class merging
- Responsive: mobile-first with `sm:`, `md:`, `lg:` breakpoints
- Component variants using `cva` (class-variance-authority)

### Testing
- Test user behavior, not implementation details
- Use `screen.getByRole()` over `getByTestId()` for queries
- Mock API calls with MSW (Mock Service Worker)
- Test accessibility: `toBeAccessible()` or axe-core integration

Free to copy and use. Compatible with GitHub Copilot, GPT-5.

Usage Instructions

Tags

Compatible AI Models

Version History

Related Prompts