Cursor

# macOS (Homebrew)
brew install --cask cursor

# Windows
# Pobierz instalator ze strony cursor.com
winget install Anysphere.Cursor

# Linux (AppImage)
# Pobierz AppImage ze strony cursor.com
chmod +x cursor.AppImage
./cursor.AppImage

// Twoje ustawienia VS Code będą w ~/.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
}

// Zacznij pisać funkcję...
function validateEmail(email: string) {
  // Cursor przewidzi całą implementację:
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return emailRegex.test(email)
}

// Lub bardziej zaawansowane przypadki:
async function fetchUserData(userId: string) {
  // Cursor wie, że używasz Prisma i wygeneruje:
  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
}

// Zaznacz tę funkcję i wpisz: "dodaj obsługę błędów i logowanie"
function processPayment(amount: number) {
  return stripe.charges.create({ amount })
}

// Cursor przekształci to w:
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 })
  }
}

Ty: Jak zaimplementować autentykację JWT w tym projekcie?

Cursor: Na podstawie twojego projektu Next.js z Prisma, oto
implementacja JWT:

1. Najpierw zainstaluj zależności:
   npm install jsonwebtoken bcryptjs

2. Stwórz lib/auth.ts:
   [pokazuje kod dostosowany do twojego projektu]

3. Dodaj API route w app/api/auth/login/route.ts:
   [pokazuje kod używający twojego schematu Prisma]

4. Stwórz middleware w middleware.ts:
   [pokazuje kod dopasowany do twojej struktury]

# Debugging
Ty: Dostaję błąd "Cannot read property 'map' of undefined"
    w komponencie UserList.tsx na linii 23

Cursor: [Analizuje plik i znajduje problem]
    Widzę, że `users` może być undefined zanim dane się załadują.
    Oto poprawka z proper loading state...

# Code review
Ty: Przejrzyj ten PR pod kątem security vulnerabilities
    @file src/api/auth.ts

Cursor: [Analizuje kod i wskazuje potencjalne problemy]
    Znalazłem kilka potencjalnych problemów:
    1. SQL injection w linii 45...
    2. Brak rate limiting...
    3. Token expiration zbyt długi...

# Architektura
Ty: Jak powinienem zorganizować state management dla tej aplikacji?
    @codebase

Cursor: [Analizuje całą aplikację]
    Na podstawie struktury twojej aplikacji rekomendowałbym:
    1. Zustand dla globalnego stanu UI...
    2. React Query dla server state...
    3. Context dla auth state...

Ty (Cmd+I): Stwórz system zarządzania użytkownikami z CRUD operations,
walidacją Zod, i obsługą błędów

Composer analizuje projekt i tworzy:
├── app/api/users/route.ts       (GET all, POST)
├── app/api/users/[id]/route.ts  (GET one, PUT, DELETE)
├── components/UserForm.tsx       (Formularz z walidacją)
├── components/UserTable.tsx      (Lista z akcjami)
├── components/UserModal.tsx      (Modal do edycji)
├── hooks/useUsers.ts            (React Query hooks)
├── types/user.ts                (TypeScript types)
├── lib/validations/user.ts      (Zod schemas)
└── prisma/schema.prisma         (Aktualizacja schematu)

# Dodawanie nowej funkcji
"Dodaj dark mode do aplikacji używając next-themes,
z przełącznikiem w navbar i zapisem preferencji w localStorage"

# Refaktoryzacja
"Przenieś logikę autentykacji z app/api/auth do osobnego
modułu w lib/auth z proper error handling i typami"

# Integracja
"Zintegruj Stripe checkout z naszą aplikacją.
Stwórz endpoint do tworzenia sesji, webhook dla zdarzeń,
i komponent przycisku zakupu"

# Testowanie
"Dodaj testy jednostkowe w Jest dla wszystkich funkcji
w lib/utils z minimum 80% code coverage"

# Przykład złożonego promptu z @ mentions
Ty: @file src/components/Cart.tsx
    @file src/hooks/useCart.ts
    @docs https://stripe.com/docs/payments/accept-a-payment

    Zaimplementuj integrację z Stripe Checkout używając
    istniejącej logiki koszyka

# 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 przewiduje kontekstowo
interface User {
  id: string
  email: string
  // Tab: name: string
  // Tab: createdAt: Date
  // Tab: updatedAt: Date
  // Tab: role: 'admin' | 'user'
}

// Automatyczne importy
// Zacznij pisać nazwę funkcji, Cursor doda import
// formatDate( <- Tab doda: import { formatDate } from '@/lib/utils'

1. Użyj Cmd+I (Composer)

2. Wpisz szczegółowy prompt:
   "Stwórz system komentarzy z:
   - Nested replies (max 3 poziomy)
   - Reakcje emoji (like, love, laugh, sad, angry)
   - Real-time updates przez WebSocket
   - Moderacja (soft delete, report)
   - Infinite scroll

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

3. Przejrzyj wygenerowane pliki:
   - Sprawdź typy i interfejsy
   - Zweryfikuj logikę biznesową
   - Upewnij się o obsłudze błędów

4. Zaakceptuj lub zmodyfikuj poszczególne zmiany

5. Testuj i iteruj:
   "Dodaj jeszcze pagination do listy komentarzy
   i cache'owanie z React Query"

1. Zaznacz kod do refaktoryzacji (Cmd+K)

2. Wpisz konkretne wymagania:
   "Zrefaktoruj ten komponent klasowy na funkcyjny z:
   - Wszystkie lifecycle methods jako hooks
   - TypeScript strict types
   - Rozbij na mniejsze komponenty
   - Dodaj error boundaries
   - Zoptymalizuj rerenders z useMemo/useCallback"

3. Przejrzyj diff:
   - Sprawdź czy logika została zachowana
   - Zweryfikuj typy
   - Upewnij się o poprawności hooks

4. Testuj zrefaktoryzowany kod

1. Skopiuj błąd do czatu (Cmd+L)

2. Dodaj kontekst z @:
   "@file src/components/Checkout.tsx
   @file src/hooks/usePayment.ts

   Dostaję ten błąd przy submit formularza:
   TypeError: Cannot read property 'price' of undefined

   Stack trace:
   [wklej stack trace]"

3. Cursor przeanalizuje:
   - Znajdzie źródło problemu
   - Wyjaśni przyczynę
   - Zaproponuje rozwiązanie z kodem

4. Zastosuj poprawkę i zweryfikuj

1. W czacie (Cmd+L):
   "@git diff from main

   Przejrzyj te zmiany pod kątem:
   - Bezpieczeństwa
   - Wydajności
   - Best practices
   - Potencjalnych bugów
   - Czytelności kodu"

2. Cursor zwróci szczegółową analizę z:
   - Lista problemów z priorytetami
   - Sugestie poprawek z kodem
   - Rekomendacje usprawnień

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

   Wygeneruj testy jednostkowe dla wszystkich funkcji:
   - Framework: Jest + Testing Library
   - Minimum 90% coverage
   - Edge cases
   - Error scenarios
   - Mocks dla external dependencies"

2. Przejrzyj wygenerowane testy:
   - Sprawdź pokrycie przypadków
   - Zweryfikuj asercje
   - Upewnij się o izolacji testów

❌ Zbyt ogólne:
"Napraw ten kod"

✅ Precyzyjne:
"Ten endpoint zwraca 500 przy pustym body.
Dodaj walidację z Zod, zwróć 400 z opisem błędu,
i zaloguj attempt do Sentry"

❌ Zbyt ambitne:
"Stwórz całą aplikację e-commerce"

✅ Iteracyjne:
1. "Stwórz model Product z Prisma"
2. "Dodaj CRUD API dla produktów"
3. "Stwórz komponent ProductCard"
4. "Dodaj koszyk z Zustand"
5. "Zintegruj Stripe checkout"

Ty: [generowany kod]

Cursor: [kod]

Ty: "Dobry początek, ale:
1. Brakuje obsługi loading state
2. Dodaj optimistic updates
3. Użyj React.memo dla listy"

Cursor: [poprawiony kod]

{
  "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"
  ]
}