Cursor Rules Examples: 20+ Templates for Every Stack

# Next.js 14 App Router Project

## Tech Stack
- Next.js 14 with App Router
- TypeScript in strict mode
- React 18 Server Components
- Tailwind CSS
- Supabase for backend

## Architecture Patterns
- Server Components by default
- Client Components only for interactivity (hooks, events)
- Server Actions for mutations (use 'use server')
- Route handlers in app/api/ for external integrations

## File Organization
```
app/
├── (auth)/           # Route group for auth pages
├── (dashboard)/      # Protected routes
├── api/              # Route handlers
├── layout.tsx        # Root layout
└── page.tsx          # Home page
components/
├── ui/               # Reusable UI
└── features/         # Feature-specific
lib/
├── db.ts             # Database client
├── auth.ts           # Auth helpers
└── utils.ts          # Utilities
```

## Security Rules
- NEVER use template literals in database queries
- ALWAYS validate input with Zod in Server Actions
- Check authentication before processing any Server Action
- Use parameterized queries: `$1, $2` not `${var}`
- Never expose server secrets in Client Components
- Always use HTTPS for external API calls

## Code Patterns

### Server Component (Default)
```tsx
// No 'use client' = Server Component
export default async function Page() {
  const data = await getData() // Direct server call
  return <div>{data}</div>
}
```

### Client Component (When Needed)
```tsx
'use client'
import { useState } from 'react'
export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
}
```

### Server Action Pattern
```tsx
'use server'
import { auth } from '@/lib/auth'
import { z } from 'zod'

const schema = z.object({ title: z.string().min(1) })

export async function createPost(formData: FormData) {
  const session = await auth()
  if (!session) throw new Error('Unauthorized')

  const input = schema.parse(Object.fromEntries(formData))
  // Database operation here
}
```

# React + Vite SPA Project

## Tech Stack
- React 18 with Vite
- TypeScript strict mode
- React Router v6
- TanStack Query for data fetching
- Tailwind CSS

## Code Conventions
- Functional components only
- Custom hooks for reusable logic
- Named exports (not default exports)
- Collocate related files
- Props interfaces in same file

## Component Structure
```tsx
// components/Button/Button.tsx
interface ButtonProps {
  variant: 'primary' | 'secondary'
  children: React.ReactNode
  onClick?: () => void
}

export function Button({ variant, children, onClick }: ButtonProps) {
  return (
    <button className={styles[variant]} onClick={onClick}>
      {children}
    </button>
  )
}
```

## Security Rules
- Sanitize ALL user input before rendering
- Never use dangerouslySetInnerHTML with user data
- Validate API responses before use
- Store tokens in httpOnly cookies (not localStorage)
- Use Content Security Policy headers

## Data Fetching Pattern
```tsx
// hooks/useUser.ts
export function useUser(id: string) {
  return useQuery({
    queryKey: ['user', id],
    queryFn: () => fetchUser(id),
    staleTime: 5 * 60 * 1000,
  })
}
```

## Anti-Patterns to Avoid
- Don't store sensitive data in localStorage
- Don't use inline event handlers in JSX
- Don't use array index as key for dynamic lists
- Don't mutate props or state directly

# SvelteKit Project

## Tech Stack
- SvelteKit 2.x with Svelte 5
- TypeScript
- Supabase / Prisma for database
- Tailwind CSS

## Svelte 5 Runes (Required)
- Use $state() for reactive state
- Use $derived() for computed values
- Use $effect() for side effects
- NO let for reactive declarations

## File Structure
```
src/
├── routes/
│   ├── +page.svelte      # Pages
│   ├── +page.server.ts   # Server load/actions
│   ├── +layout.svelte    # Layouts
│   └── api/              # API routes
├── lib/
│   ├── components/       # Reusable components
│   ├── server/           # Server-only code
│   └── utils/            # Shared utilities
└── app.d.ts              # Type definitions
```

## Security Rules
- Validate ALL form data in +page.server.ts actions
- Use parameterized queries in database operations
- Check authentication in load functions
- Never expose secrets in +page.ts (client-accessible)
- Use locals.user from hooks for auth state

## Load Function Pattern
```typescript
// +page.server.ts
export const load: PageServerLoad = async ({ locals }) => {
  if (!locals.user) {
    redirect(303, '/login')
  }
  const data = await db.query('SELECT * FROM posts WHERE user_id = $1', [locals.user.id])
  return { posts: data }
}
```

## Form Action Pattern
```typescript
// +page.server.ts
export const actions = {
  create: async ({ request, locals }) => {
    if (!locals.user) return fail(401)

    const form = await request.formData()
    const schema = z.object({ title: z.string().min(1) })
    const result = schema.safeParse(Object.fromEntries(form))

    if (!result.success) return fail(400, { errors: result.error.flatten() })

    await db.insert(posts).values({ ...result.data, userId: locals.user.id })
    return { success: true }
  }
}
```

## Svelte 5 Component Pattern
See svelte.dev/docs for component syntax. Key patterns:
- Use $state() for reactive variables
- Use $derived() for computed values
- Use $effect() for side effects
- Event handlers: onclick={() => action()}
- Two-way binding: bind:value={variable}