Cursor rule

1---
2description: Core architecture and quality rules for React + Vite + shadcn/ui template
3globs: ["src/**/*.{tsx,ts}", "package.json", "vite.config.ts", "tailwind.config.ts"]
4alwaysApply: true
5---
6 
7# React + Vite + shadcn/ui Template - Core Rules
8 
9## CRITICAL ARCHITECTURE RULES
10 
11### Component Size & Organization
12- **NEVER** create components over 300 lines
13- **ALWAYS** break down complex components into smaller, focused pieces (20-100 lines)
14- **EXTRACT** reusable logic to custom hooks, not copy-paste
15- **USE** composition patterns - build complex UI from smaller components
16 
17### File Structure Requirements
18```
19src/
20├── components/
21│   ├── ui/              # shadcn/ui components (READ-ONLY)
22│   ├── common/          # Reusable components
23│   ├── forms/           # Form components
24│   └── features/        # Feature-specific components
25├── hooks/               # Custom React hooks
26├── lib/
27│   ├── utils.ts         # Utilities (includes cn function)
28│   ├── types.ts         # Shared TypeScript types
29│   ├── constants.ts     # App constants
30│   └── validations/     # Zod schemas
31├── pages/               # Route components (composition only)
32├── services/            # API calls
33└── context/             # React context providers
34```
35 
36### Import Organization
37```tsx
38// 1. React imports
39import React, { useState, useEffect } from 'react'
40 
41// 2. Third-party libraries
42import { useQuery } from '@tanstack/react-query'
43import { zodResolver } from '@hookform/resolvers/zod'
44 
45// 3. UI components
46import { Button } from '@/components/ui/button'
47import { Card } from '@/components/ui/card'
48 
49// 4. Local components
50import { UserCard } from '@/components/common/UserCard'
51 
52// 5. Hooks and utilities
53import { useDisclosure } from '@/hooks/useDisclosure'
54import { cn } from '@/lib/utils'
55 
56// 6. Types and constants
57import type { User } from '@/lib/types'
58import { API_ENDPOINTS } from '@/lib/constants'
59```
60 
61### Essential Commands
62```bash
63npm run dev          # Start development server (port 8080)
64npm run build        # Production build  
65npm run lint         # Run ESLint - MUST pass before shipping
66```
67 
68### Quality Gates
69- **BEFORE SHIPPING**: Run `npm run lint` and fix all issues
70- **ACCESSIBILITY**: Maintain WCAG 2.1 AA contrast (4.5:1 minimum)
71- **NO CONSOLE ERRORS**: Zero warnings in browser console
72- **RESPONSIVE**: Test on mobile and desktop
73- **DESIGN QUALITY**: Industry-appropriate visual identity with purposeful color psychology
74- **CUSTOM DESIGN**: Interfaces should feel premium and custom-crafted, not template-like
75