Cursor

# macOS (Homebrew)
brew install --cask cursor

# Windows
# Download installer from cursor.com
winget install Anysphere.Cursor

# Linux (AppImage)
# Download AppImage from cursor.com
chmod +x cursor.AppImage
./cursor.AppImage

// Your VS Code settings will be in ~/.cursor/settings.json
{
  "editor.fontSize": 14,
  "editor.fontFamily": "JetBrains Mono, Fira Code, monospace",
  "editor.fontLigatures": true,
  "workbench.colorTheme": "One Dark Pro",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true
}

// Start writing a function...
function validateEmail(email: string) {
  // Cursor will predict the entire implementation:
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

// Or more advanced cases:
async function fetchUserData(userId: string) {
  // Cursor knows you're using Prisma and generates:
  const user = await prisma.user.findUnique({
    where: { id: userId },
    include: {
      posts: true,
      profile: true,
      comments: {
        orderBy: { createdAt: 'desc' },
        take: 10
      }
    },
  })

  if (!user) {
    throw new Error('User not found')
  }

  return user
}

// Select this function and type: "add error handling and logging"
function processPayment(amount: number) {
  return stripe.charges.create({ amount })
}

// Cursor transforms it to:
async function processPayment(amount: number): Promise<PaymentResult> {
  const logger = getLogger('payments')

  try {
    logger.info(`Processing payment for amount: ${amount}`)

    if (amount <= 0) {
      throw new PaymentError('Amount must be positive')
    }

    const charge = await stripe.charges.create({
      amount,
      currency: 'usd',
    })

    logger.info(`Payment successful: ${charge.id}`)
    return { success: true, chargeId: charge.id }
  } catch (error) {
    logger.error(`Payment failed: ${error.message}`, { amount, error })
    throw new PaymentError('Payment processing failed', { cause: error })
  }
}

You: How do I implement JWT authentication in this project?

Cursor: Based on your Next.js project with Prisma, here's
JWT implementation:

1. First install dependencies:
   npm install jsonwebtoken bcryptjs

2. Create lib/auth.ts:
   [shows code customized for your project]

3. Add API route in app/api/auth/login/route.ts:
   [shows code using your Prisma schema]

4. Create middleware in middleware.ts:
   [shows code matching your structure]

# Debugging
You: I'm getting error "Cannot read property 'map' of undefined"
    in UserList.tsx component on line 23

Cursor: [Analyzes file and finds the problem]
    I see that `users` can be undefined before data loads.
    Here's the fix with proper loading state...

# Code review
You: Review this PR for security vulnerabilities
    @file src/api/auth.ts

Cursor: [Analyzes code and points out potential issues]
    I found several potential problems:
    1. SQL injection on line 45...
    2. Missing rate limiting...
    3. Token expiration too long...

# Architecture
You: How should I organize state management for this app?
    @codebase

Cursor: [Analyzes entire application]
    Based on your app structure I recommend:
    1. Zustand for global UI state...
    2. React Query for server state...
    3. Context for auth state...

You (Cmd+I): Create a user management system with CRUD operations,
Zod validation, and error handling

Composer analyzes project and creates:
├── app/api/users/route.ts       (GET all, POST)
├── app/api/users/[id]/route.ts  (GET one, PUT, DELETE)
├── components/UserForm.tsx       (Form with validation)
├── components/UserTable.tsx      (List with actions)
├── components/UserModal.tsx      (Edit modal)
├── hooks/useUsers.ts            (React Query hooks)
├── types/user.ts                (TypeScript types)
├── lib/validations/user.ts      (Zod schemas)
└── prisma/schema.prisma         (Schema update)

# Adding new feature
"Add dark mode to the app using next-themes,
with toggle in navbar and preference saved to localStorage"

# Refactoring
"Move authentication logic from app/api/auth to separate
module in lib/auth with proper error handling and types"

# Integration
"Integrate Stripe checkout with our app.
Create endpoint for session creation, webhook for events,
and purchase button component"

# Testing
"Add unit tests in Jest for all functions
in lib/utils with minimum 80% code coverage"

# Example complex prompt with @ mentions
You: @file src/components/Cart.tsx
    @file src/hooks/useCart.ts
    @docs https://stripe.com/docs/payments/accept-a-payment

    Implement Stripe Checkout integration using
    existing cart logic

# Project: E-commerce Platform

## Tech Stack
- Next.js 14 App Router
- TypeScript (strict mode)
- Prisma with PostgreSQL
- TailwindCSS
- Shadcn/ui components
- Zustand for state management
- React Query for server state

## Code Style
- Use functional components with hooks
- Prefer server components where possible
- Keep components under 200 lines
- Use named exports, not default exports
- Prefer early returns over nested conditionals

## Naming Conventions
- Components: PascalCase (UserProfile.tsx)
- Hooks: camelCase with 'use' prefix (useUserData.ts)
- Utils: camelCase (formatDate.ts)
- Types: PascalCase with 'I' prefix for interfaces (IUser)
- Constants: UPPER_SNAKE_CASE

## Architecture
- App Router for routing
- API routes in app/api
- Shared components in components/ui
- Feature components in components/features
- Hooks in hooks/
- Types in types/
- Utils in lib/

## Database
- ORM: Prisma
- All queries through repository pattern
- Use transactions for multi-step operations
- Soft delete with deletedAt field

## Testing
- Jest for unit tests
- Playwright for E2E
- Test files co-located with components
- Minimum 80% coverage for utils

## Performance
- Use React.memo for expensive renders
- Implement virtualization for long lists
- Lazy load below-the-fold components
- Optimize images with next/image

## Security
- Validate all inputs with Zod
- Sanitize user-generated content
- Use parameterized queries
- Implement rate limiting on API routes

# NestJS Backend Rules

## Architecture
- Follow NestJS module structure
- Use dependency injection
- Implement repository pattern
- DTOs for all inputs/outputs

## API Design
- RESTful endpoints
- Swagger documentation required
- Proper HTTP status codes
- Consistent error responses

## Validation
- Use class-validator decorators
- Transform DTOs with class-transformer
- Validate at controller level

# React Frontend Rules

## Component Structure
- Smart components in features/
- Dumb components in ui/
- Hooks for all side effects
- Props interface above component

## State Management
- Local state: useState
- Form state: react-hook-form
- Server state: React Query
- Global state: Zustand

## Styling
- Tailwind CSS only
- No inline styles
- Use cn() for conditional classes

# Dependencies
node_modules/
.pnpm-store/

# Build outputs
dist/
build/
.next/
out/

# Generated files
*.min.js
*.min.css
*.lock
*.log

# Large files
*.mp4
*.zip
*.tar.gz

# Sensitive
.env*
*.pem
*.key

# Test coverage
coverage/
.nyc_output/

# IDE
.idea/
.vscode/

// Cursor Tab predicts contextually
interface User {
  id: string
  email: string
  // Tab: name: string
  // Tab: createdAt: Date
  // Tab: updatedAt: Date
  // Tab: role: 'admin' | 'user'
}

// Automatic imports
// Start typing function name, Cursor adds import
// formatDate( <- Tab adds: import { formatDate } from '@/lib/utils'

1. Use Cmd+I (Composer)

2. Enter detailed prompt:
   "Create a comment system with:
   - Nested replies (max 3 levels)
   - Emoji reactions (like, love, laugh, sad, angry)
   - Real-time updates via WebSocket
   - Moderation (soft delete, report)
   - Infinite scroll

   Stack: Next.js 14, Prisma, Pusher, React Query"

3. Review generated files:
   - Check types and interfaces
   - Verify business logic
   - Ensure error handling

4. Accept or modify individual changes

5. Test and iterate:
   "Also add pagination to the comment list
   and caching with React Query"

1. Select code to refactor (Cmd+K)

2. Enter specific requirements:
   "Refactor this class component to functional with:
   - All lifecycle methods as hooks
   - TypeScript strict types
   - Break into smaller components
   - Add error boundaries
   - Optimize rerenders with useMemo/useCallback"

3. Review diff:
   - Check if logic was preserved
   - Verify types
   - Ensure hook correctness

4. Test refactored code

1. Copy error to chat (Cmd+L)

2. Add context with @:
   "@file src/components/Checkout.tsx
   @file src/hooks/usePayment.ts

   I'm getting this error on form submit:
   TypeError: Cannot read property 'price' of undefined

   Stack trace:
   [paste stack trace]"

3. Cursor will analyze:
   - Find source of problem
   - Explain cause
   - Propose solution with code

4. Apply fix and verify

1. In chat (Cmd+L):
   "@git diff from main

   Review these changes for:
   - Security
   - Performance
   - Best practices
   - Potential bugs
   - Code readability"

2. Cursor returns detailed analysis with:
   - List of issues with priorities
   - Suggested fixes with code
   - Improvement recommendations

1. Use Composer (Cmd+I):
   "@folder src/lib/utils

   Generate unit tests for all functions:
   - Framework: Jest + Testing Library
   - Minimum 90% coverage
   - Edge cases
   - Error scenarios
   - Mocks for external dependencies"

2. Review generated tests:
   - Check case coverage
   - Verify assertions
   - Ensure test isolation

❌ Too vague:
"Fix this code"

✅ Precise:
"This endpoint returns 500 on empty body.
Add Zod validation, return 400 with error description,
and log attempt to Sentry"

❌ Too ambitious:
"Create an entire e-commerce application"

✅ Iterative:
1. "Create Product model with Prisma"
2. "Add CRUD API for products"
3. "Create ProductCard component"
4. "Add cart with Zustand"
5. "Integrate Stripe checkout"

You: [generated code]

Cursor: [code]

You: "Good start, but:
1. Missing loading state handling
2. Add optimistic updates
3. Use React.memo for the list"

Cursor: [improved code]

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma",
    "ms-vscode.vscode-typescript-next",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}