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:

You type a prompt in English
Cursor reads it (and your .cursorrules files if you reference them)
Cursor responds with code or actions
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:

Click the model dropdown
Select "Claude Sonnet"
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

"Implement the lobby feature.

Use:
- .cursorrules-product.md for requirements
- .cursorrules-mobile-ui.md for layout

Start with a test for player nickname input."

Step 2: Select mode (Plan)

Step 3: Send (press Enter or click Send)

What Happens Next

Cursor responds in Plan mode:

You'll see:

The Plan - Cursor shows you the steps it will take
Your Decision - Accept the plan or ask for changes
Execution - Cursor executes step-by-step
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:

"Explain what the .cursorrules folder does in a context-driven development project"

Step 6: Press Enter and watch the response

What You Should See

Cursor should:

Show you it's thinking
Provide an explanation in plain English
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?