Set up your tools
before class starts.

Yes, this part is a drag. You only do it once.

Installing all this stuff isn't the fun part. It takes a while, a few things will look confusing, and none of it feels like "building a website" yet. That's normal — setup always feels like this.

Everything below is a one-time setup for your computer. After today, you open VS Code and go straight to building — no installing, no accounts, no drag. So take a breath, follow along, and let Claude do the heavy lifting.

Four free tools, installed and logged in.

The four tools

• VS Code — where the files for your website live on your computer.
• Claude Code — the AI that edits those files for you.
• GitHub — the backup + history of every change.
• Vercel — turns your files into a live website on the internet.

VS Code is just a really fancy file manager.

• Install VS Code (free, from code.visualstudio.com).
• Install the Claude Code extension from the VS Code extension marketplace.
• File → Open Folder → "New Folder" — create a brand new folder for your project, then open it. (The #1 stuck-point.)

Stop using a tool. Start delegating to a person.

This is the habit for the whole setup below: when something looks confusing, you don't go hunting — you describe what you see to Claude and let it handle it.

GitHub: like Google Drive or Dropbox, but for code.

• A cloud backup of your whole project, with a full history of every change.
• You do not need to learn git commands. Claude handles the saving and uploading.
• It's also what Vercel watches — every change you send up can trigger a fresh publish of your site.

Vercel: free hosting that auto-deploys when you push.

• It takes your files and turns them into a live website anyone can visit.
• You'll get a dashboard — this is where every site you build lives.
• Hobby plan = free forever for personal projects like this.
• Every change you send to GitHub → Vercel rebuilds automatically. No buttons to click.

Sign up for GitHub and Vercel — two free accounts.

The next step logs Claude into these for you. But you have to have the accounts first. Both are free, and it's two quick sign-ups:

• GitHub — sign up at github.com. Pick a username you'd put on a resume; you'll see it forever.
• Vercel — sign up at vercel.com using the "Continue with GitHub" button. One click, no separate password — and it links the two accounts automatically.

Log Claude into GitHub, Vercel, and itself.

The tools are installed, but they don't know who you are yet. One prompt logs you into all three — Claude drives it and pauses when a browser window needs a click.

Make sure your terminal itself works.

Claude runs everything through your computer's terminal. If its configuration is broken, things fail in confusing ways later — agents won't launch, commands won't be found. Verify it now, while there's nothing to break:

• Quit and reopen VS Code first. Freshly installed tools only show up in fresh terminals — this alone fixes most problems.
• "command not found" right after installing ≠ broken install. The terminal just hasn't reloaded. Restart VS Code, then ask Claude to check again.
• Red text when the terminal opens? Don't read it — copy it and paste it to Claude: "my terminal shows this when it opens — fix it."

Stop clicking Approve for the safe stuff.

Claude asks your permission before running commands. That's a good safety feature — but it also asks about harmless things constantly (listing files, installing packages, saving checkpoints), and the clicking slows you down. This pre-approves only the safe, everyday commands we use in class:

• Risky things still ask — deleting files, publishing to the internet, deploying. That's on purpose: those prompts are your safety net.
• Takes effect in new sessions — if nothing seems to change, restart Claude Code once.

Creating agents inside Claude Code.

An agent is just a specialist Claude calls when needed. Now we'll install two: code-reviewer security-reviewer

You don't build these by hand. Each one is a ready-made message — you paste it into Claude, and Claude creates the agent for you.

→ Open agent prompts (copy & paste)

Now you know how to make your own agents for anything — a copywriter, a tax helper, whatever.

Steps

• Open the agent prompts handout and click Copy on the first agent.
• Paste it into the Claude chat and press enter. The message already tells Claude to create the agent and install it globally.
• Let Claude finish. It writes the agent into your global ~/.claude/agents/ folder, so it works in every project.
• Do the same for the second agent.
• To check both landed, ask Claude: list my global agents

Claude Code used to have a menu for this. Now it's simpler: you just ask Claude, and it builds the agent for you.

Make code-review and security-review automatic.

Update your global CLAUDE.md so Claude always runs both reviews after code changes — no need to remember.

You just gave Claude a permanent instruction. This is how you train it to your standards.

What CLAUDE.md is and how it works.

A plain markdown file Claude reads automatically every time it starts. Permanent instructions you don't have to repeat.

When making a decision, you need to decide where the direction belongs: global or project.

Note: these live in a .claude folder that's hidden by default — let Claude open them for you rather than hunting for the files.

Global or project?

Rule of thumb: same for every AI session → global. About this website → project.

To view or edit: just ask Claude — "open my global CLAUDE.md" or "open the project CLAUDE.md."

You're done. Here's what you set up.

• VS Code + Claude Code, signed in and on Opus.
• All the tools installed and logged in (git, Node, gh, vercel, claude).
• Two review agents and a global CLAUDE.md rule.
• GitHub + Vercel accounts, created and logged in — we wire them to your project in class.

Stuck? Tell Claude. It's the troubleshooter.

This is the habit for everything going forward: when something doesn't work, you don't go hunting for the fix — you describe what happened to Claude, and it diagnoses and fixes it. Paste the error, or just say what you see:

Claude reads the error, knows the usual causes, and walks you through it — the same way it ran the setup. It can almost always get you unstuck.