Cursor

Composer, Agent Mode & Context Management

Cursor

The AI-First Code Editor

Cursor is a fork of VS Code built around AI from the ground up. Its standout features are Composer (multi-file AI editing), Agent mode (autonomous task execution), and powerful context management that lets you precisely control what the AI sees.

Key Cursor features
Feature	Shortcut	What It Does
Inline Edit	`Cmd+K`	Edit selected code with a prompt
Chat	`Cmd+L`	Conversational AI in sidebar
Composer	`Cmd+I`	Multi-file AI editing with diffs
Agent Mode	Toggle in Composer	Autonomous multi-step execution

You are an expert Next.js 16 developer working on a
production application using App Router.

## Architecture
- Server Components by default
- 'use client' only for interactivity (forms, state, effects)
- Data fetching in Server Components using async/await
- Server Actions for mutations

## Styling
- Tailwind CSS v4 with @import "tailwindcss"
- No tailwind.config — use CSS variables and @theme

## TypeScript
- Strict mode always enabled
- Explicit return types on exported functions
- Use type imports: import type { X } from 'y'

Setup: Download Cursor, import your VS Code settings, and add a .cursorrules file to your project root. Cursor reads this file automatically for every interaction.

Composer & Agent Mode

Multi-File Editing & Autonomous Execution

Composer (Cmd+I) is Cursor's most powerful feature — it edits multiple files simultaneously, showing you diffs before applying. Turn on Agent mode and it can also run terminal commands, read output, and iterate autonomously.

# In Composer (Cmd+I), you type:

"Create a /dashboard page that shows user stats.
It should:
- Fetch data from src/api.ts
- Show a grid of stat cards
- Include a chart component (lazy loaded)
- Add proper metadata
- Follow the patterns in the existing pages"

# Composer generates changes across multiple files:
# ✏️ src/app/dashboard/page.tsx (new)
# ✏️ src/components/stat-card.tsx (new)
# ✏️ src/components/chart.tsx (new)
# ✏️ src/app/layout.tsx (adds nav link)
#
# You review each diff and accept/reject per file

Context references — control what Cursor sees:

@file — Reference a specific file for context
@folder — Include an entire directory
@docs — Search indexed documentation
@web — Search the web for up-to-date info
@codebase — Search your entire project

Tip: Always reference specific files with @filewhen asking Cursor to follow existing patterns. "Follow the pattern in @file:src/app/page.tsx" gives much better results than "follow existing patterns".

Cursor Workflow for Next.js

Daily Development Patterns

Quick edits: Select code, press Cmd+K, describe the change — perfect for renaming, type fixes, small refactors
New features: Open Composer (Cmd+I), describe the feature, reference existing files with @file, review diffs
Debugging: Select the error, press Cmd+L, paste the error message — Chat analyzes with file context
Agent tasks: Enable Agent mode in Composer for tasks that need terminal commands (install packages, run builds, run tests)
Code review: Select a diff, ask Chat to review for issues, performance, or security

# With Agent mode enabled in Composer:

"Add search functionality to the products page.
Use URL search params so the search state is shareable."

# Agent autonomously:
# 1. Reads the current products page
# 2. Identifies the data fetching pattern
# 3. Adds searchParams to the page props
# 4. Creates a SearchInput client component
# 5. Updates the product filtering logic
# 6. Runs 'pnpm build' to verify
# 7. Shows you all changes for review

Key Insight: Use Cmd+K for surgical edits, Chat for understanding, and Composer for multi-file features. Each tool has its sweet spot — knowing when to use which is the real skill.