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

Installation

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
02

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)

03

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.

04

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
05

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
06

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.

07

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?
08

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
09

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.

10

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."

11

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.

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.

12

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.

13

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.

14

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.
15

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

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.