Framework-Specific Claude Rules: Next.js, React, Vue

## Next.js Conventions (App Router)

### Rendering Strategy
- Default to Server Components — only add "use client" when needed
- Use "use client" for: event handlers, hooks, browser APIs, interactive state
- Never add "use client" to layout.tsx or page.tsx unless truly needed

### Data Fetching
- Fetch data in Server Components directly (no useEffect for initial load)
- Use `cache: 'no-store'` for dynamic data, default for static
- Use React cache() for deduplicating expensive fetches

### File Conventions
- page.tsx — route page (Server Component by default)
- layout.tsx — shared layout (Server Component)
- loading.tsx — Suspense fallback
- error.tsx — error boundary ("use client")
- route.ts — API route handlers

### API Routes
- Use NextRequest/NextResponse (not Node Request/Response)
- Export named functions: GET, POST, PUT, PATCH, DELETE
- Always handle errors with try/catch and return NextResponse.json

### Don't Do This
- Don't use getServerSideProps or getStaticProps (Pages Router patterns)
- Don't use useRouter from next/router (use next/navigation)
- Don't wrap everything in "use client" — defeats SSR benefits

## React Conventions

### Component Rules
- Functional components only — no class components
- One component per file
- Component files use PascalCase: UserProfile.tsx
- Utility files use camelCase: formatDate.ts

### Hooks
- Custom hooks go in hooks/ directory, named useXxx
- No hooks in utility files
- Avoid useEffect for derived state — compute during render

### State Management
- Local state: useState
- Shared client state: Zustand (see store/ directory)
- Server state: React Query (see lib/query.ts for client config)

### TypeScript with React
- Always type props explicitly — no implicit prop spreading
- Use React.FC<Props> or just (props: Props) => JSX.Element
- Use React.ReactNode for children prop type

### Performance
- Memoize expensive child renders with React.memo
- Memoize callbacks passed to children with useCallback
- Avoid anonymous functions in JSX — extract to named handlers

## Vue 3 Conventions

### Component Structure (Composition API)
- Always use `<script setup lang="ts">`
- Define props with defineProps<{ ... }>()
- Define emits with defineEmits<{ ... }>()
- Use ref() for primitives, reactive() for objects

### File Naming
- Components: PascalCase.vue (UserProfile.vue)
- Composables: useCamelCase.ts (useUserStore.ts)
- Stores: camelCase.store.ts

### Template Rules
- Use v-bind shorthand (:prop) not v-bind:prop
- Use v-on shorthand (@event) not v-on:event
- Use the ternary in templates sparingly — move logic to computed

### Pinia (State Management)
- One store per feature domain
- Use defineStore with setup syntax (not options API style)
- Store files go in stores/ directory

### Don't Do This
- Don't use Options API — we use Composition API throughout
- Don't use this — with `<script setup>`, this is not available
- Don't mutate props directly — emit events instead