Session 4 · Build Like a Pro · Advanced vibe coding
🛟 If you get lost, you are not behind.
Type any of these to Claude. She'll pick you back up exactly where you are.
/model → pick Sonnet/introductionIf VS Code opens its own chat panel, close it — that isn't Claude.
The chat. You type English. Claude does the work.
The terminal. You type commands. Your computer does the work, and Claude isn't involved.
The terminal is built into VS Code: Ctrl + backtick (above Tab, left of the 1), or Terminal → New Terminal.
Claude tells you which one, every time.
Two new concepts and one new tool.
Your language, name and mascot. The workspace tour. Your first MCP.
Your colors and feeling, written into the file that holds your instructions.
Plan → build → iterate. Your app comes to life.
Live preview, then a 20-minute capped loop of builders and critics.
Real pronunciation audio, through an API call you make yourself.
Save to GitHub. Connect to Vercel at home.
Everything gets built and judged at phone width. Keep your preview window narrow.
A plug-in pack of new abilities for Claude. A USB port for Claude.
You install it once, with one line. You never write code to use it.
Today's is Playwright — it gives Claude eyes in a real browser. She can open your app, screenshot it, read its errors, and click through it.
When Claude checks her own work she's grading her own homework, and she's a generous grader.
So we split the job. Claude breaks your app into pieces. For each piece: one agent builds it, and a completely separate agent judges it — one that never saw the builder's reasoning.
Every piece loops until its own judge is happy. There's no set number of rounds.
| In the terminal panel | What it does |
|---|---|
claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest --output-dir ~/playwright-output | Installs your browser MCP, everywhere on your machine. The last bit keeps screenshots out of your project. |
claude mcp list | Checks it worked. Look for Connected. If it says failed, wait 5 seconds and run it again — it's still downloading. |
npx live-server | Opens your app in a browser that refreshes itself every time a file changes. |
npm init -y | Sets up a project file. Always before installing anything. |
npm install @fal-ai/client dotenv | The two packages the audio needs. |
node generate-audio.mjs | Runs the script that makes your audio files. |
npx live-server afterwards.
The list down the left side — every file and folder in your project. When Claude makes something, you watch it appear there.
A diff is a before-and-after view of the same file. Current version one side, new version the other, changed lines highlighted. Green is being added, red is being removed.
Hover over any message you sent and click rewind. Your files go back to how they were at that point.
The Gauntlet spawns a lot of agents at once, each carrying its own context. Sonnet is built for that and keeps you comfortably inside your plan. Check yours any time with /usage.
Keep it under a page. If it gets long, Claude follows it less closely.
Write lines she can check. "Buttons have a pressed state" beats "make it look polished" — she can look at the screen and tell you whether she did it.
Ask for it: "create a CLAUDE.md for this project", or type /init for a first draft.
1. Plan → 2. Write your CLAUDE.md → 3. Build → 4. Iterate. Correcting the same thing twice? It belongs in the file.
.env → FAL_KEY=your_key_here .gitignore → .env
.gitignore is a list of things that never leave your laptop. Your key lives in .env, .env is listed in .gitignore, so when your app goes online your key stays home.
Creating .env isn't enough — Node doesn't read it by itself. Your script needs this as its very first line:
import 'dotenv/config'
If your API calls fail with an auth error and you're sure the key is right, this is almost always why.
| What you see | What to do |
|---|---|
Failed to connect on the MCP | Wait 5 seconds, run claude mcp list again. It's still downloading. |
claude: command not found | The VS Code extension doesn't add claude to your terminal — separate install. Mac: curl -fsSL https://claude.ai/install.sh | bash |
| Can't find Claude in VS Code | Orange spark, top right. If VS Code's own chat opens instead, close it. |
| Your app flickers and reloads constantly | Screenshots are landing in your project. The MCP needs the --output-dir part — reinstall it with that flag. |
| The Gauntlet won't stop | It has no off switch, by design. Close the Claude tab, then reopen and type /resume. Nothing is lost. |
| Audio fails with an auth error | Check import 'dotenv/config' is the first line of the script. Then check .env for stray quotes or spaces. |
Cannot find module | You skipped npm init -y, or you're in the wrong folder. Check with pwd. |
| Claude forgot your brand | That's what CLAUDE.md is for. Point her at it and watch it snap back. |
| MCP | A plug-in pack of new abilities for Claude. |
| Gauntlet Loop | One builds, one judges, for every piece — until it beats the bar. |
| IDE | The editor professionals live in. Yours is VS Code. |
| File tree | The list of your files down the left side. |
| Diff | Before and after of the same file, side by side. |
| Agent | An AI worker that uses tools and decides what to do next. |
| API | One program asking another program to do something. |
| API key | A password that belongs to a program, not to you. |
| .env | The file your secrets live in. Never leaves your laptop. |
| .gitignore | The list of things that never get uploaded. |
There are hundreds of MCPs and they all install the same way yours did. One line, once.
Your CLAUDE.md held your brand through an hour of building — and through closing the whole conversation and reopening it.
.env, listed in .gitignoreAnd never in a chat window. This is the habit that saves you real money one day.
Run the Gauntlet on anything you can look at — a deck, a landing page, a cold email.
reference/02-the-gauntlet-loop.md in your workshop folder.