Claude Code — The Visual Course
claude-code –learn –build –sell

Claude Code, broken into 23 mini lessons you can actually use

A visual, step-by-step rebuild of Nick Saraev’s 4-hour “Build & Sell” course (2026). Every concept, every trick, every website he mentions — compressed into recipes, copy-paste prompts, and cheat sheets.

23 mini lessons 8 parts 20+ tools & sites indexed Source: Nick Saraev · YouTube
PART 01

Setup & Foundations

Zero to a working Claude Code install. No technical background needed — Nick’s framing: “you’re just opening a chat with an AI model that lives on your computer instead of the cloud.”

L·01Get access — you need a paid plan

Why it matters: Claude Code isn’t on the free plan. This is the only money you need to spend.

Go to claude.ai and click “Try Claude”Log in or create an account, complete the onboarding screen.
Subscribe to at least the Pro plan (~$17/mo)Pro, Max, Team or Enterprise all include Claude Code. Pro is enough to start.
That’s it — everything else is freeThe tool itself, the docs, the IDE, the deployment services he uses.
Nick’s math: at $17/mo he estimates Claude Code delivers him $10–15K/month in productivity value — it’s “his second brain,” not just a developer. Don’t overthink the subscription cost.
L·02Install & log in via the terminal

Why it matters: the terminal is where Claude Code unlocks its full power — parallel sessions, status lines, fast mode.

Open the official docsEverything changes fast — the docs are the source of truth: code.claude.com/docs
Open a terminalMac/Linux: search “Terminal”. Windows: search CMD / Command Prompt (or use PowerShell — the docs show a separate command for it).
Paste the install command from the docsCopy the curl command for your OS (there’s a copy button), paste into the terminal, press Enter. It handles everything.
Type claude and press EnterThat’s how you launch it — forever. One word.
AuthenticateIt asks automatically the first time, or type /login. Choose “Claude subscription” (not API billing) — that’s the cheapest, most effective path.
Any screenshot or layout you see in a tutorial will look slightly different by the time you use it — the tool ships updates constantly. Learn where to find things, not what they look like.
L·03Read the interface (tokens, context, modes)

Why it matters: every number on this screen affects your cost and your output quality.

ElementWhat it means
Working directoryThe folder on your computer Claude is currently “living in” and can modify. Shown at the top (e.g. /users/you).
Model + planWhich model answers you (e.g. Opus) and your subscription tier.
“Finagling…” wordsFunny placeholder words while it thinks. Customizable.
Tokens ≈ wordsA token isn’t exactly a word, but close enough. “Hey, how’s it going” ≈ 6–7 tokens.
Context %How full your conversation window is (0–100%). The single most important number — the whole course keeps coming back to it.
Permission modeCycle with Shift+Tab. Covered in Lesson 13.
Status lineCustomizable readout at the bottom (terminal only). Lesson 16 shows how to add a token progress bar.

Claude Code auto-compresses your conversation history as it grows — it rewrites older messages into higher information density so you stay within the window.

L·04Pick your IDE: VS Code vs Antigravity

Why it matters: an IDE gives you a friendlier face on top of the terminal — file explorer + text editor + AI chat in one window.

An IDE (Integrated Development Environment) = three things glued together: a file/folder explorer, a text editor (like Notepad), and an AI chat panel (like the claude.ai website). That’s it.

Option A — VS Code (the OG)
Download from Visual Studio Code’s siteFree, made by Microsoft, super extensible.
Install the Claude Code extensionClick the blocks icon (Extensions) → search “Claude Code” → install the one by Anthropic with the verified checkmark.
Open a folder, then click Claude Code in the agent panelTop-right of the chat panel — select Claude Code instead of the default assistant.
Only install extensions from verified official developers. People have shipped malware in lookalike extensions.
Option B — Antigravity (VS Code 2.0)
Download from antigravity.googleBuilt on VS Code, cleaner UI, bigger AI focus. It’s what Nick uses for the rest of the course.
Swap Gemini for ClaudeIt’s a Google product, so it pushes Gemini by default. With the Claude Code extension installed, open a new panel → click the Claude icon → close the default agent panel.

Interface goodies in the GUI: past conversations tab, a pause/stop button to interrupt Claude mid-task, a thinking tab to peek into its reasoning, a file-context “eye” (whatever file is open is what Claude sees), and an attach button for files/folders/browser.

PART 02

Your First Builds

The core philosophy of the entire course lives here: Task → Do → Verify. Give Claude a way to check its own work (screenshots, tests) and quality jumps by an order of magnitude.

L·05CLAUDE.md — the project brain

Why it matters: this one file is invisibly injected at the top of every conversation. It steers everything.

Every chat follows a pattern: you → model → you → model. What you don’t see: before your first message, Claude Code injects a hidden prompt — the contents of any CLAUDE.md file in your workspace. It’s the very first thing the model reads and internalizes.

The ship analogy: imagine sailing from North America to Africa with a steering wheel that barely turns. Over 10,000 km, a 1° error at the port means missing the destination by hundreds of km. You can’t correct much mid-journey — so your launch angle has to be near-perfect. CLAUDE.md is your launch angle. It compresses the huge space of “ways the AI could go” into a narrow band pointed at your goal.

  • You could paste the same instructions manually every session — CLAUDE.md just saves you doing that.
  • Write it concise. Define what the workspace is for and its boundaries.
  • Nick’s website-building CLAUDE.md wasn’t hand-written — he had Claude compile best practices from Twitter posts into it.
“Carve out the river, then give it a boat.” Your job is steering via CLAUDE.md; Claude’s job is rowing.
L·06Screenshot an ENTIRE website (not just the visible screen)★ Recipe

Why it matters: normal screenshots only capture the hero section. This browser trick captures the whole page top-to-bottom — the fuel for the screenshot-loop design method.

Open the website you want as design inspirationE.g. something you found on godly.website.
Open Chrome DevToolsPress Cmd+Shift+I (Mac) / Ctrl+Shift+I (Windows), or right-click the page → Inspect.
Set the dimensions to full desktop widthIn the device toolbar, set 1920 × 1080 — the widescreen aspect ratio.
Open the command barPress Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows) inside DevTools.
Type “screenshot” → choose “Capture full size screenshot”The browser scrolls the entire site itself and saves one long PNG, top to bottom.
Shrink the file to under ~4–5 MBBig PNGs eat token limits and can hit API caps. Use a resize tool (Nick uses the “Resize PNG” page on iloveimg.com) → try 50% smaller → download. Still blurry-big? Resize again.
Paste it into Claude CodeOpen the image, copy it, and paste directly into the chat (or drag it in). The full page is now context.
Bonus: steal the styles tooBack in DevTools, find the <body> tag in the Elements panel → right-click → Copy styles. Paste that in as well — Claude now has the exact colors, gradients and button styles.
Screenshot + copied styles + a CLAUDE.md that says “screenshot your own output and compare until it matches” = websites that look like award-winning design in under 10 minutes.
L·07The 3 ways people design with Claude Code

Why it matters: pick your method before you prompt. Nick has a clear favorite.

MethodHow it worksVerdict
1. Screenshot loopFeed a reference design (Lesson 6). Claude builds an ~80% match, screenshots its own result, compares to the source, lists differences, fixes → 90% → 95% → ~99%. Then you swap in your own content.Nick’s pick. Fastest path to high-end results — you inherit fonts, sizes, colors for free.
2. Voice transcript dumpHold your dictation hotkey and talk. You speak ~200 wpm vs typing 50–70 wpm — a 2.5–3× dump speed. Models are great at extracting meaning from messy speech.Won’t one-shot a site (no reference design), but great for describing what you want, then iterating.
3. Components (21st.dev)Designers publish components with a “Copy prompt” button — animated backgrounds, sign-up cards, buttons. Paste the prompt, tell Claude where to install it.Works, but Nick finds it easier to just use method 1.
The core philosophy: Task → Do → Verify

Most people loop task → do → task → do and wonder why results suck. The missing piece is verification — screenshots for design, automated tests for software. AI’s value isn’t one-shotting to 100%; it’s iterating 80% → 90% → 95% → 100% in five minutes, where a human’s more precise first draft would take five hours.

“If you’re ever wondering why you’re not getting the results you want — check whether there’s a verification loop built in.”
L·08Build & iterate a real site (incl. parallel tabs)

Why it matters: this is the actual workflow — feed inspiration, let the loop run, give feedback like an art director.

Feed the screenshot + stylesSet mode to bypass permissions (or accept edits), paste the resized full-page screenshot and the copied body styles, hit Enter.
Let the loop runClaude builds index.html, screenshots it, compares to your reference, works through its own to-do list. Placeholder boxes stand in for images it can’t access.
Swap in your content“Check out [yoursite.com]. Take the info from it and insert it into this design. Don’t clone it — keep the formatting you developed. Continue the screenshot loop until it looks high-end, professional, minimalistic.”
Art-direct with voice dumps“Logo’s too big, make it smaller. Try a serif instead of sans-serif for the hero. The play button over the photo does nothing — lightbox it or delete it. Our faces are cut off, re-center the photo. Change ©2025 to 2026.”
Ask it to open the result“Open index.html” — it launches the site in a browser tab for you.
Running multiple builds at once
  • Open a second (third, fourth…) IDE window with its own Claude instance — each builds a different site simultaneously.
  • The #1 rule: never let Claude sit idle waiting for you. If any instance waits on you more than 10–20% of the time, you have too many tabs. Nick caps at 3–4.
  • He sets a different chime hook per window (Lesson on hooks) so he knows which one finished.
  • Power move: have CLAUDE.md generate 3 design variants from 3 different inspiration sites, then pick the winner.
Designing for mobile? Same exact process — just start with a mobile screenshot. And always tell it: “make sure this is mobile-optimized and responsive.”
PART 03

The .claude System

Less than 10% of Claude Code users understand this folder, per Nick. It’s where all the advanced customization lives.

L·09The .claude directory (and its 3 levels)

Why it matters: this hidden folder is the control panel for permissions, agents, skills, rules and MCP.

Folders starting with a period (.claude) are hidden by convention — your file explorer won’t show them, so they don’t clutter your workspace.

What lives inside a fully-loaded .claude/
File / folderPurpose
settings.jsonTeam permissions + hooks (custom scripts that fire before/after tool calls — that’s Nick’s chime).
settings.local.jsonSame, but stays on your machine. “.local” = git-ignored, never pushed to GitHub. Use for tokens/keys.
CLAUDE.md / CLAUDE.local.mdThe brain (Lesson 5) + a private local version.
agents/Subagent definitions (Lesson 13 & 20).
skills/Skill definitions (Lesson 17).
rules/CLAUDE.md split into focused rule files (Lesson 10).
.mcp.jsonMCP server config (Lesson 18).
The 3 layers that merge together
Enterprise / managed system levelFor company licenses. 99.9% of people never touch this.
Global: ~/.claude/The squiggle (~) means your computer’s home folder. Settings here apply to ALL workspaces — e.g. a director sets guardrails (“never delete X”) that every project inherits.
Per-project: your-workspace/.claude/Settings for just this folder. Individual team members customize here.
L·10Rules — split your CLAUDE.md into modules

Why it matters: one monolithic 10,000-word CLAUDE.md is unmanageable. Rules give you granular control.

The rules/ folder lets you break one big CLAUDE.md into focused files: workflow.md, tech-defaults.md, design-rules.md, security.md, code-style.md

prompt — steal this
Split CLAUDE.md into its component rules. Use the Claude Code rule
specification if you don't know what that means.
  • Evolve the workflow rules without touching design rules (and vice versa).
  • Working with others? Give people access to just the styles rules while you own the top-down workflow.
  • A short modular file is auditable; a 10K-word monolith hides dead weight.
Don’t just ask Claude to “build me rules for efficient coding” — it does a mediocre job. The gold mine is Twitter/X: find Claude Code power users and mine their configs (Lesson 11 has the Grok prompt).
L·11/init + the CLAUDE.md dos & don’tsCheat sheet

Why it matters: /init is the 90%-of-the-battle command, and these rules keep your brain file sharp instead of bloated.

In any folder without a CLAUDE.md, type /init. Claude reads the whole codebase, finds patterns, and writes a CLAUDE.md summarizing what everything does — so future sessions don’t have to re-read every file. Result: fewer tokens per prompt (cheaper) AND higher quality (shorter prompts = better outputs — there’s a negative relationship between prompt length and quality).

DO
  • Run /init first in every new folder.
  • Bullet points, short headings, maximum information density.
  • Most important things at the top — hard guardrails (“NEVER delete X”) go first. Models remember the beginning (primacy bias) and end (recency bias) of a prompt best; the middle is a dead zone.
  • Periodically review and prune — treat it like technical debt. If Claude keeps auto-adding to it, it accumulates junk.
  • When Claude makes the same mistake 2–3 times, tell it: “Add this to your CLAUDE.md so it works next time on a fresh instance.” (One of Nick’s favorite commands.)
  • Keep it 200–500 lines max.
DON’T
  • Don’t dump entire style guides or full API docs in (10K tokens loaded every single session). Instead: give Claude the whole API once and have it prune down to just the endpoints you need.
  • Don’t write vague aspirational rules — “be smart”, “make no mistakes” do nothing. Treat Claude like a savant: brilliant in a specific slice, hangs itself with too much rope.
  • Don’t voice-dump raw transcripts into it — voice-dump to Claude, then have it compress into high-density rules.
  • @include exists (e.g. @git.md pulls another file in) but don’t overuse it — rules cover most of this.
prompt — mine Twitter via Grok for fresh tips
Compile the last month of high-ROI CLAUDE.md writings on X.
What are the best things to include?
Newer models absorb the most common CLAUDE.md conventions into training — old boilerplate becomes unnecessary over time. Another reason to prune.
L·12Auto memory (memory.md)

Why it matters: a small global file lets Claude remember things across sessions — separate from CLAUDE.md.

  • Say “Remember that my brother’s name is George” → Claude writes it to a global memory.md.
  • That file is injected at the top of every new session (alongside enterprise/global/local CLAUDE.mds and tool definitions).
  • Open a fresh instance, ask “what’s my brother’s name?” → it answers instantly.

Nick’s take: in practice memory isn’t hugely valuable (CLAUDE.md does the heavy lifting) — treat it as Claude’s own scratchpad notes, not your instruction set. It’s tiny (~88 tokens in his case).

PART 04

Modes & Planning

Permission modes control how much freedom Claude gets. Plan mode is where complex builds are won or lost.

L·13The 4 permission modes (+ how to unlock bypass)

Why it matters: the wrong mode either interrupts you every 5 seconds or gives Claude the keys to your hard drive. Know the tradeoffs.

ModeBehaviorUse when
Ask before edits (default)Shows every proposed file change; you approve 1-by-1, allow-all-this-session, reject, or redirect.High-risk codebases where every change must be right. Old-school devs. Few people use it now.
Edit automaticallyAuto-accepts edits to existing files; still asks before creating new ones.Carte blanche on existing files, but no new-file sprawl.
Plan modeRead-only exploration — researches, reads files, reasons, and presents a plan before touching anything.Anything more complex than a simple design. See Lesson 14.
Bypass permissionsDoes whatever it wants — edit, create, delete, run commands. Nick’s default for knowledge work.When you want real productivity and accept the (small) risk.
Unlock bypass permissions (it’s off by default)
Open the Claude Code extension settingsExtensions tab → Claude Code for VS Code → gear icon → Settings.
Enable “Allow dangerously skip permissions”It recommends sandboxes only — accept at your own risk. The mode now appears in the mode cycle.
Fine-grained control: /permissions

Type /permissions (continues in a terminal) to set allow / ask / deny per tool — e.g. always allow web fetch but always ask before bash. There’s also a delegate mode used by agent-team leads (they can only manage the team, not touch files).

The horror story: someone on bypass permissions had Claude misinterpret a request and run the Linux delete-everything command — hard drive wiped. Vanishingly rare, but real. The more common cost is mundane: workspace bloat. Claude accumulates temp files and libraries; periodically ask it to clean out anything the workspace no longer needs.
L·14Plan mode — a minute of planning saves 10 of building

Why it matters: this is the highest-leverage habit in the course. Nick uses it for every non-trivial build.

Plan mode = read-only exploration. Claude researches the web, reads your files, reasons from first principles, and produces a plan document — before a single line of code exists.

The math (two scenarios)
ScenarioTimelineTotal
Build without plan15 min build → 5 min test → discover the approach is wrong → 15 min rebuild (×N retries)~35+ min, plus wasted tokens
Build with plan5 min deep plan (Claude spots the flaw inside the plan and re-plans) → 5 min → build is now only ~5 min because the spec is tight~15 min, far fewer tokens

It’s the Lego principle: change the blueprint, not the built pyramid. Or construction: you plan so you don’t discover mid-pour that materials are missing. Work in cheap plan-space, not expensive build-space.

In bypass mode, Claude sometimes initiates plan mode on its own for complicated builds — and asks you clarifying questions through a mini GUI (pick one / type an answer). Answer honestly, “whatever’s best” is a legit answer for tech-stack questions you don’t understand.
L·15Case study: full-stack app in ~20 min (PandaDoc clone)Walkthrough

Why it matters: the complete anatomy of a real build — proposal generator with login, AI generation, e-signature and Stripe payments. Zero code written by hand.

Voice-dump the spec“Build a proposal generation platform with everything PandaDoc has, minus the template builder. Generate end-to-end proposals as static pages I can send clients a URL to.” No technical language — just needs.
New folder → Plan mode → paste the dumpClaude asks clarifying questions via the GUI: frontend framework? (whatever’s best) · e-signature robustness? (simplest) · fixed or variable pricing? (variable) · database? (Supabase for everything).
Feed it your templateDrop your existing proposal PDF into the workspace: “Follow this template’s design for the generated pages; make the app itself Apple-esque, simple, clean.”
Review the plan, then switch to bypass + auto-acceptThe plan covers tech stack, database schema, routes, user flow. You don’t need to understand most of it — check the user-facing flow makes sense.
Set up services in parallel while Claude buildsSupabase: create free project → copy API keys → paste into chat. Stripe: test mode → create sandbox → copy public + secret keys → paste in. (Press Enter to queue messages while it works.)
Do the manual bits it asks forPaste the SQL migration it wrote into Supabase’s SQL Editor → Run. Provide project URL and an Anthropic API key (it calls Claude to generate proposal copy). Confused about a step? Just ask — “Can you do this for me?” — it does what it can and tells you the rest.
Test locally, page by page, and give UX feedback“Email confirmation error is unfriendly — just tell them to check their inbox.” “No feedback after clicking Generate — add a status/progress indicator.” “Confetti is too long. Replace ‘we’ll be in touch’ with a direct calendar booking link.”
Deploy to NetlifyAdd new site → import project → confirm auto-detected build settings → deploy. Site settings → import environment variables straight from the .env file. Register the Stripe webhook endpoint URL in the Stripe dashboard.
The security sermon (don’t skip)
  • Bots constantly scan all DNS ranges and URLs — ~30–40 strangers hit Nick’s app minutes after deploy. Use a non-obvious custom URL, never a short guessable one.
  • Don’t charge money or collect user data (emails, passwords, payments) on a fully vibe-coded app without paying a developer a few hundred dollars to review the auth at least once. Software isn’t the moat anyway — the liability is yours.
  • Nick only runs these apps internally for his team and clients — he doesn’t sell vibe-coded apps to the open internet. “With great power comes great responsibility.”
He replaced a paid PandaDoc subscription with a self-owned app in ~20 minutes of oversight, most of which he spent marinating salmon. The bottleneck is no longer engineering — it’s your ideas and agency.
PART 05

Context Management

“The big bottleneck in getting these systems to do more for you.” Every token in the window costs money and dilutes quality.

L·16/context, /compact & the token-diet playbookCheat sheet

Why it matters: you’re billed for ~25–45K tokens before you type a single word. Knowing where they go is how you cut costs and boost quality.

Run /context — what’s eating your window
CategoryWhat it isTypical size
System promptYour CLAUDE.mds (enterprise + global + local + rules).~10K
System toolsBuilt-in tool definitions: task, bash, glob, grep, read, edit, write, web fetch/search, to-do write, ask-user, plan modes, skill, notebook edit… Fixed cost, can’t remove.~17K
MCP toolsTools YOU installed. The dangerous one — a single bloated MCP can add 20K (one ClickUp tool cost more than all his skills combined).0–20K+
Memory filesmemory.md scratchpad.~88 tokens
SkillsOnly the front matter loads (name + description) — ~60 tokens per skill. Full skill loads only on invocation. This is why skills beat MCPs.~60 each
MessagesYour actual conversation.grows
Autocompact bufferReserved space (~33K); when you hit it, history auto-compresses.~33K

Context windows run ~200K tokens (Opus) up to 1M+ (some Sonnet models). Window size ≠ model quality. Thinking/reasoning tokens are billed but not kept in context — extended thinking is a scratchpad that collapses after use.

The commands
  • /context — see the full breakdown above. Do this once, it’s eye-opening.
  • /compact — squash history into a dense summary (add custom instructions: “/compact prioritize X”). Auto-compaction also runs continuously in the background.
  • /clear — wipe context entirely when switching to an unrelated task.
  • /cost — check current usage. /statusline — add a permanent token bar (terminal only): “Update my status line to include a loading bar of tokens used out of total context.”
  • /model — switch models + adjust thinking effort (off → 8K → 32K+ reasoning tokens).
The 10 token-diet tips (Anthropic’s + Nick’s)
  • Write specific prompts — “fix this feature in this file” not “improve this codebase.” Highest ROI tip.
  • Plan complex tasks first — research during planning is far cheaper than exploratory building.
  • Compress your CLAUDE.md continuously; move task-like instructions into skills (they load on demand).
  • Use cheap models (Sonnet/Haiku) in subagents for heavy reading; reserve the expensive parent for synthesis.
  • Reduce MCP overhead — Claude now auto-searches tools instead of loading them all when MCP descriptions exceed 10% of the window, but you should still uninstall bloated servers.
  • Tell Claude in CLAUDE.md: “Reason all you want, but answer with bare-bones info; I’ll ask if I need more.”
  • Pipe voice dumps through a cheap model first to tighten them, then send the tight version to your expensive agent.
  • Agent teams cost ~7× normal sessions — avoid them if token economy matters.
  • For up-to-date tactics: ask Grok to “summarize the best token-reduction strategies users discussed in the last month.”
The start of your context window is the highest-quality real estate in the entire prompt. Don’t let a bloated MCP squat on it.
PART 06

Extending Claude: Skills, MCP, Plugins

Skills = checklists you write. MCP = tools other people wrote. Plugins = extras. Nick’s verdict: skills win on token economy almost every time.

L·17Skills — turn your job into checklists Claude runs★ Core

Why it matters: Nick calls skills “the most economically valuable way to use Claude Code.” He stopped hiring for entire task categories because of them.

Anatomy of a skill
PieceRole
skills/your-skill/The folder.
SKILL.mdThe conductor: goal, inputs, and a step-by-step process checklist. Front matter (name + description + allowed tools) is the only part loaded into context (~60 tokens) — the rest loads on invocation.
scripts/The musicians: Python scripts Claude wrote for the repeatable parts. If the same task runs every time, it should be a defined program, not fresh improvisation.

The magic: when a script fails, Claude uses its intelligence to fix it live — and then updates the skill so no future instance hits the same problem. It’s a junior employee that permanently learns from every mistake.

Real skills from the course
  • scrape-leads: test-scrape 25 dentists via Apify → Claude sanity-checks them → full parallel scrape of 1,000 (4 scrapers × 250, done in 87 seconds) → LLM classification → upload to Google Sheet → enrich missing emails → ready for a cold-email tool like Instantly. Previously 30–60 min of manual work.
  • shop-amazon: browses Amazon via Chrome DevTools MCP, compares products, hard rule: “STOP — get purchase approval, do not skip.” Amazon has no public API; a skill effectively builds one.
  • literature-research: queries PubMed with parallel searches, runs a deep-review script, self-corrects failed queries.
  • Others: Upwork scrape-and-apply, client welcome emails, deliverable builders, YouTube editing, community post monitoring.
How to create a skill (the improvement loop)
Voice-dump the task to Claude“I want a skill that does X. Here’s my process / template / example input. Help me format it as a skill — check my other skills for the pattern.”
Test on a FRESH Claude instanceOne with zero knowledge of the conversation. That’s the honest test.
Feedback → “modify the skill so you do better next time”Rinse and repeat: 70% reliability → 80% → 90% → 98–99%. Most humans err more than 1–2% of the time anyway.
Nick’s businesses clear $300K+/month in profit with no staff for these task categories. “Why wait a day or two for a contractor when a skill retrieves the result in 1/100th of the time for 1/100th of the cost?”
L·18MCP — skills other people built (use, then convert)

Why it matters: MCP gives Claude instant access to real software (Gmail, ClickUp, Chrome) — but bloated servers wreck your context. Nick’s workflow: prototype with MCP, then convert to a skill.

Where to find MCPs
  • Directories: mcpservers.org, the official modelcontextprotocol/servers repo on GitHub, MCP Market. Or just Google “[tool name] MCP server” — most tools publish setup pages now.
  • Not all are vetted — third-party libraries carry risk. Prefer official ones.
  • The GOAT: Chrome DevTools MCP — lets Claude control and inspect a live Chrome browser. Nick uses it daily; ~100× faster than generic browser extensions, and it powers skills like shop-amazon.
Install any MCP in 30 seconds
Copy the JSON snippetEvery MCP page has one: curly braces, “mcpServers”, a name, some commands. You don’t need to understand it.
Paste into Claude Code: “Install this in my local workspace”Saying “local workspace” matters. Claude configures it for you.
Provide credentials if askede.g. ClickUp: grab your API token from settings, paste it in, pick the workspace.
Restart the Claude sessionNew MCPs (and new agents/skills) only appear in fresh instances.
The MCP → Skill conversion play

Nick’s Gmail experiment: MCP labeled 100 emails fine, but slowly and with heavy token overhead. So he said:

prompt — steal this
This worked really well. Turn it into a skill called gmail_label.
Call the Gmail API directly instead of the MCP — skills are far more
token-efficient. Check my other skills for formatting, and write
scripts that do the work.

Result: fetch 100 emails in 1 second, full fetch-classify-label in 36 seconds (0.36s/email) — 5–10× faster than the MCP, and the loaded context dropped from thousands of tokens to a ~60-token front matter.

Run /context after installing any MCP. ClickUp alone pushed his MCP tooling to ~20K tokens — more than all system tools. Use MCPs to quickly test whether an integration is possible; once proven, convert to a skill with direct API calls.
L·19Plugins & marketplaces (quick tour)

Why it matters: worth knowing they exist; Nick barely uses them and predicts they’ll get absorbed into skills.

  • Access via customize and manage plugins in Claude Code.
  • claude-mem: logs every message to a searchable memory file — “what did I ask you two weeks ago?” Marginally useful.
  • frontend-design (Anthropic’s own): claims better aesthetics. Nick’s honest take: the before/after is “50-50” — his screenshot-loop workflow beats it.
  • Context7: the good one — compresses API documentation from any source into token-efficient form Claude can read. Great when juggling 3–4 tools’ APIs.
  • Marketplaces: the official Claude Code plugins directory (claude-plugins-official repo) + open third-party marketplaces of varying quality.

Bottom line: vanilla Claude Code does really well with zero plugins. Nothing here is required.

PART 07

Parallel Work: Subagents, Teams, Worktrees

Three escalating ways to run many Claudes at once — and the honest math on when each is worth the tokens.

L·20Subagents — context isolation + parallelization

Why it matters: subagents aren’t magic, but two superpowers are real — clean context and parallel speed.

How they work
  • Defined as .md files in .claude/agents/ — you set tools, model, max turns, memory scope, description, instructions.
  • The parent spawns them via the task tool. Each subagent gets its own blank context window; only its summary returns to the parent.
  • Restart the session after creating agents — they only register in fresh instances.
The 3 subagents worth building
AgentWhy
ResearcherPollutes its own context with 50–100K tokens of web reading, returns a ~2K summary → ~50× cheaper for the parent. Run on Sonnet/Haiku. Customize it with your trusted sources and parallel-query habits.
ReviewerZero context is the whole point. The parent is biased by 10K tokens of its own reasoning; a blank-slate reviewer looks at the code cold — exactly like human code review — and returns only the changes.
QA / TesterGenerates and runs automated tests without polluting the parent. This is the “verify” in Task→Do→Verify for backend work, where screenshots don’t apply.

Wire them into CLAUDE.md as a standard flow: write code (parent) → code review (subagent) → QA tests (subagent) → fix → ship.

Parallelization at scale (the email demo)
  • Converted the gmail_label skill into 10 parallel subagents × 100 emails each: 1,000 emails classified in ~1 minute (vs 36s for just 100 serially).
  • Gotcha he hit: subagents returned full email text to the parent → “prompt too long” crash. Fix: subagents must return summaries/results, never raw payloads.
The probability math (why simple task definitions win)

If each subagent succeeds 95% of the time, all-succeed probability = 0.95n: 3 agents → 85.7% · 10 → 59% · 50 → 7%. Subagent runs are ephemeral — a malformed batch is wasted tokens. So: keep each task dead simple, reserve the smart parent for synthesis, and don’t spawn 500 agents to look cool.

For simple queries, spawning a subagent can take as long as just doing the task in the parent. Be pragmatic, not sexy.
L·21Agent teams — a manager agent runs the org chart

Why it matters: the most hyped feature. Real, powerful, and “a nuclear weapon aimed at your wallet” — 7× token cost.

Teams vs subagents
SubagentsAgent teams
ContextOwn window; results go to callerOwn window; fully independent full Claude instances (load their own CLAUDE.md, MCPs, skills)
CommunicationReport to parent onlyTeammates message each other via a shared scratchpad/task list — like a mini forum. You can also message any teammate directly (Shift+↑/↓ to switch).
CostLow-ish~7× a standard session. 10 active agents ≈ 10× context + coordination overhead.
Enable it (off by default — experimental)
settings.json
{ "env": { "CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS": "1" } }

Or paste the docs page in and say “enable agent teams.” Two viewing modes: in-process (tab through agents — Nick’s choice) or split-pane (all visible, but rendering eats compute).

Demo 1 — design exploration as a search problem
  • “Spin up 3 agents, create 3 fundamentally different personal-site designs” → minimalist / dark / warm, built in parallel in ~2 min. Team lead researched him first, unprompted.
  • Picked the winner → spun up 3 research agents (design principles, copywriting formulas, examples from Justin Welsh, Dan Koe, Sahil Bloom, Hormozi, Ali Abdaal) → their dense reports fed 4 iteration agents → picked again → iterated again.
  • The point: instead of settling on the first passable option, you explore the whole space of possible designs — tree-search your way to something 5× better.
Demo 2 — security-audit an open-source repo
  • Cloned a repo, then: 10 Sonnet scanner agents split the codebase by size → 4 agents document security issues → 2 devil’s-advocate agents debate each other (one argues findings are real, one argues they’re not — adversarial setups produce higher-quality conclusions, same principle as GANs) → 15 fixer agents, one per confirmed issue.
  • Cost: 1.3M+ tokens, ~$80 in ~15 minutes — vs weeks of human review. Kill switch: “SHUT everything down ASAP” (takes a moment; in-flight queries finish).
Official recommendations
  • Sonnet for teammates, keep teams small, spawn prompts tight and focused.
  • Clean up / wind down teams when done — idle agents still consume resources.
  • It’s off by default so nobody blows $10K in a day. That’s a real possibility. Set limits.
L·22Git worktrees — parallel agents that can’t collide

Why it matters: multiple agents editing one folder eventually step on each other’s toes. Worktrees make collisions impossible.

A git branch is basically a copy of your folder. A worktree checks each branch out as an actual separate folder on disk — so agent A works in project-about/, agent B in project-contact/, agent C in project-services/, all sharing the same git history. When done, a merge tabulates the differences and folds each branch’s changes back into main. Merges can be messy — having agents mediate them helps.

Nick’s demo
Describe the worktree workflow in CLAUDE.md“We use git worktrees for parallel development: every worktree is an isolated working directory sharing the same git history, so multiple Claude instances work simultaneously without interference.”
Ask for parallel pages“Build an about page, contact page and services page using the git worktree workflow.” Claude creates three worktree folders and spawns an agent team, one agent per page, each told “work in this folder, don’t touch index.html.”
Merge back to mainEach page (complete with working forms, validation, even estimated pricing) merges into the main site.

Files are never perfect separations of functionality — that’s why conflicts happen. Worktrees eliminate the possibility structurally instead of hoping agents coordinate.

PART 08

Ship It: Deployment & Production

Building runs locally on your machine; deploying pushes it to the internet so others can use it.

L·23Deployment: Netlify, Modal, GitHub Actions, Claude Code on the webPartial

Why it matters: a tool only you can run on your laptop isn’t a product. Production means it runs without you.

Transparency: the source transcript cuts off a few minutes into this module. What’s below combines what was captured with the course’s own outline of this section — treat the last three items as the map, not the full territory.
What the course covers here
ToolRole
NetlifyFully demonstrated (Lesson 15): the easy button for static sites and simple apps. Import project → env vars from .env → deploy. Free tier. Vercel is the common alternative.
Modal + webhooksRun your backend scripts and skills in the cloud on a trigger (a webhook URL you can call from anywhere) instead of your laptop.
GitHub ActionsScheduled / event-triggered automation — run your workflows on a timer or on repo events, no computer required.
Claude Code on the webRun Claude Code sessions in the cloud, tying into the session-mobility features mentioned in the course intro.

The pattern to internalize: local build → prove it works → move the trigger to the cloud. Everything you automated in Parts 6–7 (lead scrapers, email labelers, proposal generators) becomes a production system the moment it runs on a webhook or a schedule instead of your keyboard.

INDEX

Resource Vault — every site & tool mentioned

// Official & docs
code.claude.com/docs
The Claude Code documentation. His #1 resource — install commands, feature specs, context-management guide, agent-team recommendations.
claude.ai
Where you buy the Pro plan that unlocks Claude Code.
// IDEs
Visual Studio Code
The OG free IDE by Microsoft. Install the verified Anthropic “Claude Code” extension.
antigravity.google
Google’s VS-Code-based IDE — cleaner, AI-first. Nick’s daily driver (with Claude swapped in for Gemini).
// Design & inspiration
godly.website
Showcase of award-level web design — his source for reference screenshots. Nearly everything on it is now reproducible in ~10 min.
21st.dev
Component library with “Copy prompt” buttons — paste a component straight into Claude Code.
dribbble.com · .design
Alternative design aggregators for sourcing inspiration.
iloveimg.com (Resize PNG)
Shrinks your full-page screenshots under the ~4–5 MB limit before feeding them to Claude.
// Build stack (the full-stack app)
supabase.com
Free database + auth (logins, records). Grab API keys, paste SQL migrations into its SQL Editor.
stripe.com
Payments. Use test mode → sandbox for safe development; register webhooks for the live app.
netlify.com
One-click static site + app deployment, free tier, env-var import from .env.
vercel.com · modal.com
Alternatives/companions: Vercel for frontends, Modal for backend scripts + webhooks in production.
// MCP & extensions
mcpservers.org
MCP directory #1.
github.com/modelcontextprotocol/servers
The official MCP servers repo.
MCP Market
Third MCP directory. (All three: verify before installing.)
Chrome DevTools MCP
The one Nick uses daily — Claude controls a live Chrome browser. Powers scraping sites without APIs (Amazon, etc).
Context7 (plugin)
Compresses any API docs into token-efficient context. The one plugin he actually rates.
// Work & automation
Apify
The scraping service behind his scrape-leads skill.
instantly.ai
Cold-email platform he pipes scraped lead lists into.
PubMed
The database his literature-research skill queries.
ClickUp API
His MCP install demo — task management via Claude (and a cautionary tale of MCP token bloat).
x.com + Grok
His up-to-date intel source: “compile the last month of high-ROI Claude Code / CLAUDE.md posts.” The tech moves too fast for static tutorials.
GitHub
Where projects live; branches, worktrees, merges, and (in deployment) Actions for scheduled automation.
Rebuilt as a visual course from: Nick Saraev — “CLAUDE CODE FULL COURSE 4 HOURS: Build & Sell (2026)” · youtube.com/@nicksaraev · For personal study use.