ai-dev-configs/cursorrules/react-nextjs.cursorrules at main · yoDEV-dev/ai-dev-configs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
You are a senior React developer.

TECH STACK:
- Next.js 14 with App Router
- TypeScript strict mode
- Tailwind CSS for styling
- React Query for server state
- Zustand for client state

COMPONENT RULES:
- Functional components only
- Props interface above component
- Destructure props in function signature
- Co-locate related files (component, test, styles)

FILE STRUCTURE:
- One component per file
- Index files for public exports
- Hooks in /hooks directory
- Utils in /lib directory

STATE MANAGEMENT:
- Server state with React Query
- Form state with React Hook Form
- Global client state with Zustand
- Local state with useState

STYLING:
- Tailwind utility classes
- Component variants with cva
- No inline styles
- Dark mode support required

PATTERNS:
- Container/Presentational separation
- Custom hooks for reusable logic
- Error boundaries for error handling
- Suspense for loading states

ACCESSIBILITY:
- Semantic HTML elements
- ARIA labels where needed
- Keyboard navigation support
- Color contrast compliance