After completing this lesson, you'll be able to confidently do the following three things:

• ▸✅ Install Cursor → write your first prompt → verify results — all within an hour
• ▸✅ Set up a standard .cursorrules / CLAUDE.md template
• ▸✅ Use the key shortcuts + inline editing (Cmd+K)

Keep your learning objectives as a checklist, and close the lesson once you can answer every item.

Download

cursor.com → Download for your operating system:

• ▸macOS: .dmg file
• ▸Windows: .exe installer
• ▸Linux: .AppImage or .deb

On first launch after installation, sign up for free:
1. Sign in with GitHub or Google
2. 14-day Pro trial activates automatically (reverts to the free plan after the trial)
3. VS Code settings import option — if you're an existing VS Code user, click OK

Free Plan Limits

• ▸Tab autocomplete: Unlimited ✅
• ▸Cmd+K inline editing: 50 uses/month
• ▸Composer multi-file editing: 50 uses/month
• ▸Chat: 50 uses/month (slow model), plus 50 additional uses with the fast model

During the 14-day trial you get unlimited Pro access — use it at your own learning pace.

Initial Settings

Open settings with Cmd+, (Mac) or Ctrl+, (Windows):

Cursor Settings

• ▸Models → Recommended default: claude-sonnet-4-6 (when on Pro)
• ▸Privacy Mode → OFF for personal learning; ON for company code (disables data transmission)
• ▸Privacy Mode off → more accurate responses

Editor Environment

• ▸Theme: Dark+ or Tokyo Night Storm (easier on the eyes)
• ▸Font: JetBrains Mono or Fira Code (ligature support)
• ▸Font size: 14–15
• ▸Tab size: 2

Quick Summary

• ▸Download from cursor.com → sign in with GitHub → 14-day Pro trial
• ▸Unlimited Tab autocomplete even on the free plan
• ▸For personal learning, keep Privacy Mode OFF

Opening the Terminal

Inside Cursor, press ` Ctrl+ ` (backtick) or go to Terminal > New Terminal in the menu.

Create the Next.js Project

npx create-next-app@latest myapp

Answer the prompts:

✔ TypeScript?           → Yes
✔ ESLint?               → Yes
✔ Tailwind CSS?         → Yes
✔ src/ directory?       → Yes
✔ App Router?           → Yes
✔ Turbopack?            → Yes (faster)
✔ Import alias?         → No (use the default @/)

Open the Folder

cd myapp
cursor .

The project opens in a new Cursor window.

Run the Dev Server

npm run dev

→ Visit http://localhost:3000. If you see the default page, you're all set.

Minimal Understanding of the Folder Structure

myapp/
├── src/
│   ├── app/
│   │   ├── page.tsx        # Home page (/)
│   │   ├── layout.tsx      # Global layout
│   │   └── globals.css
│   └── components/         # (create this folder and add components as needed)
├── public/                  # Images and icons
├── package.json
└── tsconfig.json

page.tsx is the entry point for each URL. Creating app/about/page.tsx automatically generates the /about page.

Quick Summary

• ▸One command: npx create-next-app@latest myapp
• ▸Recommended options: TypeScript + Tailwind + App Router + Turbopack
• ▸npm run dev` → localhost:3000

Why You Need It From the Start

Let the AI learn your project conventions from the very first prompt. No need to explain them every time.

Create the File in Your Project Root

In Cursor, right-click the myapp/ folder → New File → .cursorrules

Copy-Paste Template (for Next.js 14+)

# Project: myapp

## Stack
- Next.js 15 (App Router, TypeScript strict)
- Tailwind CSS
- React 19

## Coding Rules
- Components: function declaration (no arrow)
- Export: named (default only for page.tsx·layout.tsx)
- Korean comments OK
- No any
- No var

## Folder Conventions
- src/app/         Pages·API
- src/components/  Reusable Components
- src/lib/         Utility Functions
- src/types/       Type Definitions

## Response Style
- When changing code, show *only the changed parts*
- Explanations should be *concise*
- Respond in Korean

The Difference — A Comparison

❌ Without .cursorrules:
> Me: "Make me a button component"
> AI: "What's your stack? Tailwind? Material UI? TypeScript? ..."
> 4–5 follow-up questions

✅ With .cursorrules:
> Me: "Make me a button component"
> AI: (Writes the exact code using Next.js + TypeScript + Tailwind, with named export and function declaration)
> 0 follow-up questions

Quick Summary

• ▸One .cursorrules file acts as context for every conversation
• ▸Saves 5–10× tokens and boosts accuracy
• ▸Write once → use forever

Instead of a Simple "Make a Button" — a Practical First Task

Press Cmd+L (Mac) or Ctrl+L (Windows) to open Cursor Chat.

Example First Prompt

Replace src/app/page.tsx with the following:
- Page title "Hello, Vibe Coding!"
- A counter component (using useState)
- +1 on each click / a reset button that sets to 0
- Dark mode styling with Tailwind
- Extract the component to src/components/Counter.tsx

Show code only. No explanation.

→ Cursor automatically generates 2 files:

• ▸src/app/page.tsx
• ▸src/components/Counter.tsx

Click the checkmark on each file → auto-saved.

Verify the Result

Refresh the browser → confirm the counter works.

• ▸Click the button → number increments? ✅
• ▸Reset → goes to 0? ✅
• ▸Dark mode colors? ✅

Second Prompt — Iteration

In @Counter.tsx, *cap the count at 10*. When 10 is reached, disable the button + show a "Maximum reached" message.

Keep the existing design. Add the logic only.

→ The AI shows only the changed parts and applies them. The intent is clear, so 0 unnecessary changes.

Quick Summary

• ▸Make your first prompt specific + explicit about component separation
• ▸Use @filename to reference a specific file
• ▸Use "code only / no explanation" to save tokens

AI-Generated Code Is Still Your Responsibility

Interviewers will ask: "How did you verify it?" Build these 3 verification habits.

1. Always Open the Console

In the browser, press F12 (or right-click → Inspect) → Console tab.

Things to check:

• ▸Red errors — must be resolved
• ▸Yellow warnings — resolve if possible
• ▸React Hook violations, missing keys, etc.

❌ "It looks fine but there are console errors" → you'll fail the interview.

2. Check TypeScript Errors

# In the terminal
npx tsc --noEmit

→ Lists all type errors. There should be 0.

Or use the Problems tab in VS Code (same in Cursor): Ctrl+Shift+M

3. Test Actual Behavior — 3 Edge Cases

Using the counter we built as an example:

✅ Happy path: click +1 nine times → 9 → one more → 10 → button disabled ✅

❓ Edge case 1: Does it reset to 0 on page refresh? (state is cleared)
→ You can ask the AI to "persist the count with localStorage"

❓ Edge case 2: Does it display correctly on mobile? Check with Chrome DevTools Device Toolbar

❓ Edge case 3: Does it look right for users without dark mode, i.e. in light mode?

Checklist — Always

After every task:

• ▸[ ] 0 console errors
• ▸[ ] 0 TypeScript errors
• ▸[ ] Intended behavior works
• ▸[ ] At least 1 edge case verified
• ▸[ ] Mobile layout checked

These 5 habits are what separate working code from broken code.

git commit — Immediately After Verifying It Works

git add -A
git commit -m "feat(counter): max 10 limit + disable state"

Commit frequently in small increments. If you break something later, you can roll back to the previous state.

Quick Summary

• ▸Console, TS errors, and behavior checks = the basics
• ▸Covering at least 1 edge case = intermediate level
• ▸Committing after every task = advanced level

Once you understand the concepts in this lesson, you can give the AI specific, targeted instructions — not vague requests like "fix this," but requests armed with vocabulary. That's the starting point for saving tokens.

• ▸"Walk me through the steps to finish Cursor install + first prompt + CLAUDE.md setup in under an hour"
• ▸"Review whether this .cursorrules accurately captures our code style"

Why This Reduces Tokens

Without understanding the concepts, even after receiving an AI response you have to ask "What does that mean?" again. Those follow-up questions are what consume tokens. Learn the concepts once, and the conversation ends in a single round.