00

Why Claude Code?

"With browser-based tools, you're limited. They make decisions on your behalf, and you never learn. At the terminal level, you'll read things you don't understand—but you can ask Claude to explain, and you actually learn. That's the difference."
— Paul Bakaus

If you've been using browser-based AI coding tools, Claude Code will feel bare-bones at first. No pretty buttons. No visual editor. Just a text interface in your terminal.

The discomfort is temporary. The power is permanent.

The Horse & Carriage

Think of the AI model (Opus, Sonnet) as a powerful horse. The tool controlling it is the carriage.

  • Browser tools = carriage with broken wheels
  • VS Code + AI = decent carriage, bad harness
  • Claude Code = a Lamborghini as a carriage

Claude Code is an extremely well-designed harness that lets the AI work at its full potential. It's why Paul uses it "12 hours a day."

01

Prerequisites

First-timers start here

Have you ever set up a terminal and coded anything locally on your machine? If not, you'll need to install some developer tools first. This is a one-time setup.

Already have Node.js installed?

If you've done web development before, you probably have these tools. Run this in Terminal to check:

Terminal 
node --version

If you see a version number (like v20.10.0), skip ahead to Install Claude Code.

Never done this before?

No problem! You need to install two things: Homebrew (a package manager) and Node.js (JavaScript runtime). Here's how:

1
Install Homebrew

Open Terminal (press Cmd + Space, type "Terminal", hit Enter), then paste:

Terminal 
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Follow the prompts. When it finishes, copy and run the commands it tells you to add Homebrew to your PATH.

2
Install Node.js
Terminal 
brew install node
3
Close and reopen Terminal

This refreshes your environment so the new tools are recognized.

02

Install Claude Code

1

Open Terminal

On Mac, press Cmd + Space, type "Terminal", and hit Enter.

You'll see a window with a command prompt. This is where the magic happens.

2

Install Claude Code

Paste this command and press Enter:

Terminal 
npm install -g @anthropic-ai/claude-code
Important: After installation, you'll see a line like:
echo export PATH="/Users/yourname/.npm-global/bin:$PATH" >> ~/.zshrc
Copy and paste that entire line into your terminal, then press Enter.
3

Verify Installation

Terminal 
claude

If you see a welcome screen asking you to pick a color theme, you're in!

4

Connect Your Account

  • Select "Claude Account Subscription"
  • A browser window opens—authorize the connection
  • Return to terminal and confirm
03

Terminal Survival Guide

You don't need to be a hacker. You need five commands:

Command What It Does Example
cd foldername Go into a folder cd my-project
cd .. Go up one folder level cd ..
mkdir foldername Create a new folder mkdir my-new-site
ls List what's in current folder ls
pwd Show where you are pwd

Tab Completion

Type first few letters, hit Tab to auto-complete folder names

Exit Claude Code

Press Ctrl+C twice

New Terminal Tab

Press Cmd+T for multiple sessions

Run Bash Inside

Type ! before any command (e.g., !brew install node)

04

Your First Project

1

Create a Project Folder

Terminal 
mkdir my-first-project
cd my-first-project
2

Launch Claude Code

Terminal 
claude

First time in a new folder, you'll see a welcome/setup screen. Accept the defaults.

3

Talk to It

Now you're in Claude Code. Just type what you want:

Claude Code 
Build me a desktop organizer script that sorts files by type

Claude will ask clarifying questions. Use arrow keys to select options, or type your answers.

4

Approve Actions

When Claude wants to do something, it asks permission:

Yes Allow this one action
Yes, allow all Trust Claude for this session Recommended
No Decline the action
5

See What It Did

Press Ctrl+O to view the full output of what Claude just executed.

05

The Impeccable Style Kit

Claude Code isn't just a chatbot—it's customizable. You can teach it new behaviors with skills (instruction files), trigger pre-built workflows with commands, and even spin up sub-agents for complex tasks. Read the official docs to learn more.

To try this out right away, Paul Bakaus created a ready-made collection that teaches Claude Code how to build beautiful, professional websites instead of generic AI-looking garbage:

Skills

Instruction files that teach Claude best practices for design

Commands

Pre-built prompts you trigger with / (like /audit, /animate, /bolder)

Get Paul's Design Skills

Download the Impeccable design skills from impeccable.style, then install:

1 Download the .claude folder from impeccable.style
2 Global install (recommended): Move to your home folder
Terminal 
mv ~/Downloads/.claude ~/

Or for per-project: Copy the .claude folder into that specific project folder.

Critical: Skills Load at Startup

This WILL bite you. Skills are loaded when Claude Code starts. If you add the .claude folder AFTER you've already launched Claude Code, it won't see them.

The Fix:
  1. Exit Claude Code: Ctrl+C twice
  2. Make sure the .claude folder is in place
  3. Restart Claude Code: claude
06

The Command System

Type / to see all available commands. Use arrow keys to navigate, Enter to select.

/init

Creates a project blueprint (CLAUDE.md file)

First thing on any existing project
/audit

Full design quality analysis with scoring

Always useful—shows what needs fixing
/animate

Adds subtle, professional animations

When site feels static
/colorize

Enhances color palette and contrast

When colors feel flat
/bolder

Makes design more impactful and dramatic

When site feels too subtle
/quieter

Tones down flashy elements

When something is too much

Understanding Audit Scores

When you run /audit, you get:

Overall Score 72/100 → 94/100 after fixes
P0 Issues Critical, fix these first
P1 Issues Important, fix these next
P2 Issues Nice to have

The audit checks: accessibility, contrast, mobile responsiveness, animations, typography, and more.

Go nuclear 
Run all audit fixes on my behalf
07

Working with Existing Projects

Have a website you've already built? Here's how to level it up.

01

Create a New Folder

mkdir my-existing-site && cd my-existing-site
02

Launch Claude Code

claude
03

Copy Your Files

Copy over the contents of ~/Desktop/my-website-folder into this folder
04

Initialize the Project

/init

Creates a CLAUDE.md file—a blueprint that helps Claude understand your project structure.

05

Run Locally

Run this website locally so I can preview it

You'll get a URL like http://localhost:3000

06

Redesign with Skills

Use the front end design skill to redesign this page

Watch the transformation happen.

08

The Monolith Problem

Important for Migrators
"This index.html file is insanely large. So large that no developer would ever build it this way. When you vibe-code, tools just keep appending and appending. This is how people hit a wall."
— Paul Bakaus

The Problem

AI coding tools often create one giant monolithic file. Everything in one index.html. This causes:

  • Token limits in Claude Code (it can't read the whole file)
  • Slow performance
  • Impossible to maintain

The Solution

Refactor into components. Ask Claude:

I noticed index.html is way too large and I want to follow best development practices. What can I do to refactor this?

If you don't understand frameworks:

I don't understand frameworks. What's the simplest option that will make this maintainable?
09

Setting Up GitHub

GitHub saves snapshots of your project so you never lose work. This is a one-time setup.

1. Create GitHub Account

Go to github.com and sign up.

2. Create New Repository

  • Click the green "New" button
  • Name your repository
  • Choose visibility (Public or Private)
  • Click "Create repository"
  • Keep the page open—you'll need the URL

3. Set Up SSH Keys

In Claude Code, type:

I just created a new git repository for this project at https://github.com/USERNAME/REPO-NAME but I haven't set up git on this machine yet. Can you help me install git, set up SSH keys, and connect to GitHub?
What are SSH keys? Think of them as door keys. GitHub has a key to your door, you have a key to GitHub's door. If they match, the two can communicate securely.

4. The Workflow

Make changes → Commit everything → Push → Repeat
10

Auto-Deploy Pipeline

Never Drag & Drop Again

Connect a hosting platform to your GitHub repo. Every time you push, it automatically deploys.

Make Changes
Commit
Push
Auto Deploy

Pick any of these platforms—they all work the same way:

Netlify Great for beginners Vercel Great for React/Next.js Cloudflare Pages Fast global CDN
1

Sign up/log in to your chosen platform

2

Click "Add new project" or "Import" → Connect to GitHub

3

Authorize and select your repository

4

Configure (usually leave defaults for static sites) and click "Deploy"

You'll get a URL like your-project.netlify.app or your-project.vercel.app

From now on: make changes → commit → push → automatically deployed.

11

Claude Everywhere

Cloud-Hosted Claude Code

Access your projects from anywhere—even your phone.

  • Go to claude.ai
  • Click "Code" in the sidebar
  • Click "Connect to GitHub"
  • Select your repositories
Perfect for:
  • Quick fixes on the go
  • Parallel tasks
  • Working without your laptop

Slack Integration

Add Claude to your Slack workspace and @ mention it in any channel.

  • Go to Settings → Integrations
  • Click "Slack" and install
  • Invite Claude to a channel
  • Type @Claude followed by request
Imagine:

"Hey @Claude, implement the feature we just discussed in this thread."

12

Troubleshooting

"Skills not working"

Cause: You added the .claude folder after starting Claude Code.

Fix: Exit (Ctrl+C twice), verify .claude folder is in place, restart (claude).

"Context left until auto compact"

Cause: Claude's memory is filling up.

Fix: Type /clear to wipe the session history and start fresh. Your files are safe.

"Exceeds maximum allowed tokens"

Cause: A file (usually index.html) is too large.

Fix: Ask Claude to refactor into smaller files, or work on specific sections:

Just look at the header section of index.html and fix the navigation
Weird errors after long sessions

Cause: Context corruption from too much back-and-forth.

Fix: /clear and start fresh.

"Command not found: claude"

Cause: PATH not set up correctly.

Fix: Run the echo export PATH... line from installation again, then restart terminal.

Terminal asks for password but nothing happens when I type

This is normal! When typing passwords in the terminal, you won't see any feedback—no asterisks, no dots, no cursor movement. It looks broken, but it's actually a security feature.

What to do: Just type your password and press Enter. It's working even though you can't see it.

Anthropic console shows an error when adding payment

Quick fix: Just refresh the page. Sometimes the console shows an error but the action actually worked. After refreshing, check if your payment method was added successfully.

Something broke and you want to undo

Press Escape twice after Claude finishes working. You'll see a list of your previous prompts. Navigate with arrow keys, select one, and it resets to that state.

Better option: Use Git. After every working state: Commit everything → Push. Now you can always go back.

13

Power User Features

Ctrl+T

View Claude's To-Do List

When Claude is working on a big task, see its internal task list—the order it's working through things.

Cmd+T

Run Multiple Sessions

Open new terminal tabs. Each can run an independent Claude Code session.

Two sessions on the same project don't communicate—they might create conflicts.
!

Run Bash Commands

Prefix with ! for quick system commands without exiting.

!brew install node
/model

Change Models

Switch between Opus, Sonnet, Haiku. Opus 4.5 is default and best for most work.

14

The Backend Reality Check

What Claude Code Gives You

  • Beautiful static sites
  • Client-side interactivity (JavaScript)
  • Design refinement
  • Code organization

What Requires More Work

  • Form submissions that save data
  • User authentication
  • Databases
  • Payment processing

You CAN build these with Claude Code, but it requires choosing a backend (Node.js, Python, etc.), setting up a database, and deployment configuration.

I need the contact form to actually work. What's the simplest way to receive form submissions?

Claude will recommend options like Netlify Forms, Formspree, or building a simple backend.

15

Complete Workflow

New Project from Scratch 
# Create and enter project
mkdir new-project
cd new-project
claude

# In Claude Code:
Build me a landing page for [describe your project]
Use the front end design skill to make it beautiful
/audit
Fix all the P0 issues
Commit everything
Push

# Connect to Netlify. Done.
16

Quick Reference Card

Terminal Basics

cd folder-name Go into folder
cd .. Go up one level
mkdir name Create folder
ls List files
pwd Where am I?

Claude Code Controls

Ctrl+C Ctrl+C Exit Claude Code
Ctrl+O View recent output
Ctrl+T View to-do list
Cmd+T New terminal tab
Escape Cancel current action
Escape Escape View prompt history
!command Run bash from inside

Essential Commands

/init Initialize project blueprint
/audit Full design quality check
/animate Add animations
/bolder More dramatic design
/quieter Tone things down
/clear Reset session
/model Switch AI models

Git Workflow

Commit everything Save snapshot locally
Push Sync to GitHub
17

The Advanced Playbook

NEW

We found a Twitter thread that really needs to be included here for Claude Code.

Eyad Khrais is a CTO who's shipped code at Amazon, Disney, and Capital One — and his tips are too good not to share.

Read the original thread
Think First Plan Mode is everything

Most people assume that with Claude Code, the first thing you need to do is type. But that's one of the biggest mistakes you can make. The first thing you need to do is think.

10 out of 10 times, the output with plan mode did significantly better than when I just started spewing everything into Claude Code. It's not even close.

The Pattern: Think first, then type. This produces dramatically better results than typing first and hoping Claude figures it out.

If you don't have years of software engineering experience, have a deep back-and-forth with ChatGPT/Gemini/Claude first. Describe what you want to build, ask for system design options, and settle on a solution together. You and the LLM should be asking each other questions.

Press Shift+Tab twice to enter plan mode. Trust me — 5 minutes of planning saves hours of debugging.
CLAUDE.md Mastery Your project's instruction manual

When you start a Claude Code session, the first thing Claude does is read your CLAUDE.md file. Every instruction in that file shapes how Claude approaches your project. It's onboarding material that Claude reads before every single conversation.

Keep it short. Claude can only reliably follow ~150-200 instructions at a time, and the system prompt uses about 50. If your CLAUDE.md is a novel, Claude will start ignoring things randomly.
Make it specific. Don't explain what a components folder is — Claude knows. Tell it the weird stuff, the bash commands that actually matter.
Tell it why, not just what. "Use TypeScript strict mode" is okay. "Use TypeScript strict mode because we've had production bugs from implicit any types" is better. The why gives Claude context for judgment calls.
Update it constantly. Press # while working and Claude adds instructions automatically. Every time you correct Claude twice on the same thing, that's a signal it should be in the file.

Bad CLAUDE.md looks like documentation written for a new hire. Good CLAUDE.md looks like notes you'd leave yourself if you knew you'd have amnesia tomorrow.

Context Window Secrets Quality degrades before you hit limits

Opus 4.5 has a 200,000 token context window. But here's what most people don't realize: the model starts to deteriorate way before you hit 100%.

At around 20-40% context usage is where quality starts to chip away. If you've experienced Claude Code compacting and still giving terrible output afterwards, that's why — the model was already degraded before compaction happened.

What actually helps:

  • Scope your conversations. One conversation per feature or task. Don't build auth and refactor database in the same session.
  • Use external memory. Have Claude write plans to actual files (SCRATCHPAD.md or plan.md). These persist across sessions.
  • The copy-paste reset. Copy everything important, run /compact, then /clear, and paste back only what matters. Fresh context with critical info preserved.
  • Know when to clear. If a conversation has gone off the rails, just /clear and start fresh. Your CLAUDE.md is still there.

Mental model: Claude is stateless. Every conversation starts from nothing except what you explicitly give it. Plan accordingly.

Prompting That Works Clear communication > mystical art

People spend weeks learning frameworks and tools. They spend zero time learning how to communicate with the thing that's actually generating their code.

Vague "Build an auth system"
Specific "Build email/password authentication using the existing User model, store sessions in Redis with 24-hour expiry, and add middleware that protects routes under /api/protected"
Tell it what NOT to do. Claude 4.5 likes to overengineer. If you want something minimal, say "Keep this simple. Don't add abstractions I didn't ask for. One file if possible."
Give context about why. "We need this to be fast because it runs on every request" changes how Claude approaches the problem.

Remember: output is everything, but it only comes from input. If your output sucks, your input sucked. There's no way around this.

When Claude Gets Stuck Change the approach, not the intensity

Sometimes Claude just loops. It tries the same thing, fails, tries again, fails, and keeps going. The instinct is to keep pushing — more instructions, more corrections, more context.

The better move is to change the approach entirely.

  • Clear the conversation. The accumulated context might be confusing it. /clear gives you a fresh start.
  • Simplify the task. If Claude is struggling with complexity, break it into smaller pieces. Get each piece working before combining.
  • Show instead of tell. Write a minimal example yourself. "Here's what the output should look like. Now apply this pattern to the rest."
  • Reframe the problem. Try a different angle. "Implement this as a state machine" vs "Handle these transitions" can unlock progress.

The meta-skill: recognize when you're in a loop early. If you've explained the same thing three times and Claude still isn't getting it, more explaining won't help. Change something.

Building Systems Headless mode and automation

The people who get the most value from Claude aren't using it for one-off tasks. They're building systems where Claude is a component.

Claude Code has a -p flag for headless mode. It runs your prompt and outputs the result without entering the interactive interface. This means you can script it, pipe output to other tools, chain it with bash commands, integrate it into automated workflows.

What enterprises are doing:

  • Automatic PR reviews
  • Automatic support ticket responses
  • Automatic logging and documentation updates
  • All logged, auditable, improving over time

The flywheel: Claude makes a mistake → you review the logs → you improve the CLAUDE.md or tooling → Claude gets better next time. This compounds.

If you're only using Claude interactively, you're leaving value on the table. Think about where in your workflow Claude could run without you watching.

TL;DR

  • Think before you type. Planning produces dramatically better results.
  • CLAUDE.md is your leverage point. Keep it short, specific, tell it why.
  • Context degrades at 30%, not 100%. Use external memory and the copy-paste reset trick.
  • Output comes from input. If results are bad, your prompting needs work.
  • When stuck, change the approach. Don't loop. Clear, simplify, show, reframe.
  • Build systems, not one-shots. Headless mode enables automation.

The Mindset Shift

Coming from browser-based tools, this feels hard at first. No visual feedback. No drag-and-drop. Just text.

"The more you work with Claude Code, the more it learns from your behavior. It will knock you less and less often."
"Now you're at the code level, at the system layer. Sometimes you'll read things you don't understand—but you can ask Claude to explain, and you learn. With browser tools, that never happens."
— Paul Bakaus

The discomfort is the learning. Push through it.

"

You've unleashed a dragon.

— Peter Hollens

That's you now. Go build something.