Switch language to English

Cursor

AI pair programming with Cursor. The AI-first code editor built for vibe coding.

What is Cursor?

Cursor is a code editor built from the ground up for AI-assisted development. It combines VSCode's editing experience with powerful AI features like Composer, Chat, and inline completions.

Composer

Multi-file AI editing. Describe changes across your codebase.

Chat

Ask questions about your code with full context awareness.

Tab Completion

Context-aware code completions as you type.

Configuration

Configure Cursor for your project.

.cursor/settings.jsonjson
// .cursor/settings.json
{
  "ai.model": "claude-3-5-sonnet",
  "ai.provider": "anthropic",
  "ai.contextMode": "full",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "files.associations": {
    "*.cursorrules": "markdown"
  }
}

Cursor Rules

Define rules that guide Cursor's AI behavior for your project.

.cursorrulesmarkdown
# .cursorrules

You are an expert in TypeScript, Node.js, Next.js 15 App Router, React 19,
Shadcn UI, Radix UI, and Tailwind CSS 4.

## Key Principles

- Write concise, technical TypeScript code
- Use functional and declarative programming patterns
- Prefer iteration and modularization over duplication
- Use descriptive variable names with auxiliary verbs

## Project Structure

app/
├── [lang]/
│   └── (root)/
│       └── [feature]/
│           └── page.tsx
components/
├── ui/           # shadcn/ui primitives
├── atom/         # 2+ primitives combined
└── root/
    └── [feature]/
        ├── content.tsx
        ├── actions.ts
        └── types.ts

## TypeScript

- Use interfaces over types
- Avoid enums; use const objects with `as const`
- Export TypeScript interfaces for component props

## React Patterns

- Prefer Server Components
- Minimize "use client", "useEffect", "useState"
- Wrap client components in Suspense

## Styling

- Use Tailwind CSS; mobile-first responsive design
- Use OKLCH color tokens from design system
- Support RTL layout with Tailwind logical properties

Keyboard Shortcuts

Shortcutsmarkdown
# Useful Cursor Shortcuts

## AI Features
Cmd+K          # Open AI command bar
Cmd+L          # Open chat panel
Cmd+Shift+L    # New chat
Cmd+Enter      # Accept AI suggestion

## Code Navigation
Cmd+P          # Quick open file
Cmd+Shift+P    # Command palette
Cmd+G          # Go to line
Cmd+D          # Select next occurrence

## Editing
Cmd+Shift+K    # Delete line
Cmd+/          # Toggle comment
Option+Up/Down # Move line up/down

## Terminal
Ctrl+`         # Toggle terminal
Cmd+Shift+C    # New terminal

Using Composer

Cursor Composer enables multi-file AI editing with a single prompt.

Composer Workflowmarkdown
# Using Cursor Composer

## Step 1: Select Files
Select the files you want to work with in the sidebar.

## Step 2: Describe Task
"Create a new atom component called StatCard that:
- Uses Card from shadcn/ui
- Displays a title, value, and optional icon
- Has hover effects
- Supports className override"

## Step 3: Review Changes
Cursor shows a diff of proposed changes.
Accept (Cmd+Enter) or reject individual hunks.

## Step 4: Apply
Click "Apply All" or accept changes file by file.

## Tips
- Be specific about file locations
- Reference existing patterns
- Break complex tasks into steps

Best Practices

Use .cursorrules

Define project conventions so Cursor follows your patterns.

Reference Files

Use @file to include specific files in context.

Review Diffs

Always review proposed changes before accepting.

Iterate

Break complex tasks into smaller, reviewable steps.