Session #4:

Cursor 101

30 minutes | Understanding Cursor

What is Cursor?

Cursor is an AI-powered code editor.

Think of it as:

• A text editor (like Microsoft Word, but for code)
• With an AI assistant built-in (like having a developer sitting next to you)
• That can read your context files (the brain) and execute your vision

You talk to it in English. It builds in code.

The Interface Overview

When you open Cursor, you'll see:

Left Side: File Explorer

• Shows all your project files and folders
• This is where you'll see .cursorrules folder
• Click files to open them

Center: Editor

• Where code appears
• Where you'll see Cursor's suggestions
• You can read here, but you won't type code here

Right Side: Chat Panel ← This is where you'll work

• Where you talk to Cursor
• Where you give prompts
• Where Cursor responds

Bottom: Terminal

• Where commands run ("npm start", etc.)
• Where you see if things work or have errors
• Mostly just watch this area

The Interface Overview

When you open Cursor, you'll see:

Left Side: File Explorer

• Shows all your project files and folders
• This is where you'll see .cursorrules folder
• Click files to open them

Center: Editor

• Where code appears
• Where you'll see Cursor's suggestions
• You can read here, but you won't type code here

Right Side: Chat Panel ← This is where you'll work

• Where you talk to Cursor
• Where you give prompts
• Where Cursor responds

The Chat Panel (Where You Work)

This is your main interface with Cursor.

What you see:

• A text input box at the bottom
• Conversation history above
• Cursor's responses and suggestions

How it works:

1. You type a prompt in English
2. Cursor reads it (and your .cursorrules files if you reference them)
3. Cursor responds with code or actions
4. You review and accept/reject

This is your command center.

The Four Modes

Cursor has 4 different modes for different tasks.

You select the mode before giving your prompt.

Located: Above the chat input box, you'll see four options.

Mode 1: Ask

What it's for: Questions and explanations

Use when:

• "What does this code do?"
• "Why did this error happen?"
• "Explain how WebSockets work"

What it does:

• Gives you information
• Doesn't change any code
• Just answers

Example: "Explain what the .cursorrules-tdd.md file does"

Mode 2: Plan (← You'll use this most)

What it's for: Building features step-by-step

Use when:

• "Build the lobby feature"
• "Implement player input validation"
• "Add the sequence animation"

What it does:

• Creates a plan first (shows you the steps)
• You approve the plan
• Then executes step-by-step
• You can watch and stop at any point

This is your primary mode for building today.

Mode 3: Agent

What it's for: Autonomous execution of complex tasks

Use when:

• You want Cursor to do multiple things without asking permission
• More advanced, less control

What it does:

• Runs through multiple steps automatically
• Makes decisions on its own
• Faster but less oversight

For today: Stick with Plan mode. Agent is more advanced.

Mode 4: Debug

What it's for: Fixing errors and bugs

Use when:

• Something's broken
• Tests are failing
• You see errors in the terminal

What it does:

• Analyzes the error
• Proposes a fix
• Often writes a test first (if you have TDD rules)

Example: "Debug this: players aren't joining the lobby when they click the button"

Choosing Your Mode

Quick decision guide:

• Need information? → Ask
• Building a feature? → Plan ← Use this most
• Something broken? → Debug
• Feeling confident and want speed? → Agent (later)

For the afternoon session, you'll primarily use Plan mode.

Selecting Your AI Model (LLM)

Cursor can use different AI models.

Where to find it:

• Look for a dropdown in the chat panel (usually shows the current model)
• Click it to see options

You'll see:

• Claude Sonnet (Anthropic)
• Gemini 3.0 (Google)
• Others (GPT-4, etc.)

Which Model to Use?

For today: Use Claude Sonnet

How to select it:

1. Click the model dropdown
2. Select "Claude Sonnet"
3. You're set

That's it. Don't overthink it.

For this project, Claude Sonnet works excellently.

How Prompting Works

The workflow:

Step 1: Write your prompt

Step 2: Select mode (Plan)

Step 3: Send (press Enter or click Send)

What Happens Next

Cursor responds in Plan mode:

You'll see:

1. The Plan - Cursor shows you the steps it will take
2. Your Decision - Accept the plan or ask for changes
3. Execution - Cursor executes step-by-step
4. Code Changes - You'll see files being modified

Each step, Cursor shows you what it's doing.

Understanding Code Changes

When Cursor modifies code, you'll see:

Diff View:

• Red/strikethrough = old code being removed
• Green/highlighted = new code being added
• Gray = unchanged code (for context)

You don't need to understand every line.

You need to:

• See that it's making changes
• Know which files are affected
• Be able to accept or reject

Accepting or Rejecting Changes

After Cursor proposes changes:

You have options:

✅ Accept

• Click "Accept" or "Apply"
• Changes are saved to your files
• Cursor moves to next step

❌ Reject

• Click "Reject" or "Dismiss"
• No changes made
• You can give a different prompt

✏️ Modify

• Ask Cursor to revise
• "This looks good but use 160px buttons, not 100px"

Always review before accepting.

The Terminal (Awareness Only)

Bottom panel shows the terminal.

What you'll see there:

• Commands running ("Starting development server...")
• Success messages ("Compiled successfully!")
• Errors (red text - these are important)

What you do:

• Watch it
• If you see red errors, copy them and tell Cursor
• Don't worry about the commands themselves

Cursor handles the terminal commands via chat.

The File Explorer

Left sidebar shows your files.

What you'll see:

• Folders (with arrows to expand)
• Files (with different icons/colors)
• Your .cursorrules folder

What you do:

• Click to open and read files
• See what Cursor created
• Verify the .cursorrules folder is there

You won't create files manually - Cursor does that.

Hands-On: Let's Try It

Everyone do this now:

Step 1: Open Cursor on your laptop

Step 2: Find the chat panel (right side)

Step 3: Select Plan mode (above the input box)

Step 4: Click the model dropdown and select Claude Sonnet

Step 5: Type this exact prompt:

Step 6: Press Enter and watch the response

What You Should See

Cursor should:

1. Show you it's thinking
2. Provide an explanation in plain English
3. Maybe reference the files

This proves:

• Chat is working
• You're connected to the AI
• You can communicate

If you see a response → You're ready to build.

Common Questions

Q: What if I make a mistake in my prompt? A: Just send another prompt clarifying or correcting. Cursor keeps the conversation history.

Q: How do I know if Cursor read my .cursorrules files? A: When you reference them in prompts ("Use .cursorrules-product.md"), Cursor will mention them in its response.

Q: What if I don't understand the code Cursor writes? A: That's okay! You're not expected to. Focus on: Does it pass tests? Does it work in the browser?

Q: Can I undo changes Cursor makes? A: Yes - we'll use Git commits. After each feature, we commit. You can always roll back.

Quick Reference

Your Cursor Cheat Sheet:

Where to work: Right panel (Chat)

What mode: Plan (most of the time)

Which AI: Claude Sonnet

How to prompt: Plain English + reference .cursorrules files

What to review: The plan, the file changes

What to accept: Changes that match your context

What to reject: Changes that don't match or you don't understand

When stuck: Ask mode - "Why did this happen?" or "Explain this error"

You're Ready

You now know:

• ✅ Where to type prompts (chat panel)
• ✅ The four modes (and when to use each)
• ✅ How to select your AI model
• ✅ How to review and accept changes
• ✅ Where to watch for errors (terminal)
• ✅ Where your files live (explorer)

Next up: We'll look at the brain architecture, then after lunch, you'll use Cursor to build the entire game.

Questions?