Brightmind Academy — Claude Code FULL COURSE

Foundation + Setup Beginner

11 lessons · ~30 min · Install → CLAUDE.md → Plan Mode

1.1 Install Claude Code

Beginner

Get Claude Code running on your machine. Claude Code is an AI coding assistant that runs inside your terminal and reads your actual project files — unlike a chat window it can write, edit, and run things on your behalf.

● Beginner — Desktop App

Go to claude.ai/download and download the Claude Code desktop app for your OS.
Run the installer and follow the on-screen wizard to completion.
Open the app and click Sign In — create a free Anthropic account if you don't have one.
When prompted for an API key, skip it for now — the desktop app uses your account login directly.
Click New Chat, type "hello", and confirm a response comes back. Installation is complete.

● Intermediate — Terminal Install

Confirm Node.js is installed: open your terminal and run node --version. You need v18+. If missing, download from nodejs.org.
Run npm install -g @anthropic-ai/claude-code to install Claude Code globally.
Set your API key as an environment variable: add export ANTHROPIC_API_KEY="sk-ant-..." to your ~/.zshrc or ~/.bashrc file.
Reload your shell: source ~/.zshrc
Verify the install: run claude --version — you should see a version number.
Navigate to any project folder: cd my-project then run claude to start a session.

Tip: Store your API key in a password manager (Bitwarden is free) — never paste it into a file you'll commit to git.

1.2 The Interface Tour

Beginner

Understand every panel and setting so you can move fast and never get lost when a new feature appears.

● Beginner — Desktop App Tour

Open the app. Notice the sidebar on the left — this shows your conversation history and projects.
The main panel is the chat window. Type a message and hit Enter or click Send.
Click the settings gear (bottom-left) — review theme, font size, and notification options.
Click New Project in the sidebar and point it at a folder on your machine. Claude now has access to those files.
In the chat, type /help and press Enter to see the available slash commands.

● Intermediate — Terminal Interface

Run claude in your terminal. The prompt > means Claude is ready.
Type a message. Claude responds inline — it can also write files, run shell commands, and read your codebase.
Press Ctrl+C to cancel a running action. Type /exit to end the session.
Use the Antigravity IDE (if installed) for a GUI overlay on top of the terminal experience — it gives you a file tree and diff viewer side by side.
Switch to VS Code integration by installing the Claude Code extension from the VS Code marketplace, then opening the command palette and selecting Claude Code: Start Session.

1.3 Free vs Pro vs Max Plans

Beginner

Pick the right plan from day one — the wrong choice either limits your output quality or wastes money on capacity you don't need.

● Beginner

Free tier: access to Claude Haiku with a daily message limit (~20 messages). Good for experimenting but not for real builds.
Pro ($20/mo): Claude Sonnet access with 5× the message quota. This is the right tier for most learners and freelancers.
Go to claude.ai/settings/billing and compare the plans side by side.
Start on Free. When you hit the daily limit consistently, upgrade to Pro.

● Intermediate

Max plan: Opus model access for complex multi-step reasoning, architecture design, and long document analysis.
During a session, run /cost to see your current token spend. Use this to understand which tasks are expensive.
Route simple tasks (formatting, renaming, small edits) to Haiku with /model haiku to reduce costs.
Route complex tasks (refactors, architecture, debugging) to Opus with /model opus when accuracy matters more than cost.
Upgrade to Max when a single complex project produces more than $20 of value — the maths is straightforward.

1.4 Permission Modes

Intermediate

Permission modes control how much autonomy Claude has when editing files. Getting this wrong leads to either constant interruptions or unexpected file changes.

● Beginner — Before Edits Mode

The default mode is Before Edits — Claude shows you a proposed change and waits for your approval before writing anything.
When Claude proposes a change, you'll see a diff (green = added, red = removed). Read it carefully.
Type yes or press Enter to approve. Type no or n to reject and explain what you want changed.
Use this mode for every session until you understand what Claude tends to do in your codebase.

● Intermediate — Edit Automatically

Open .claude/settings.json in your project and set "autoApprove": true to enable automatic edits.
Claude will now apply changes without asking — ideal for fast iteration on well-understood projects.
Always have a clean git commit before enabling this mode so you can run git stash to undo a bad session instantly.
Disable it on any session where you're working near sensitive logic: auth, payments, data migrations.

● Advanced — Bypass Mode & Per-Project Overrides

Bypass mode gives Claude full autonomy including running shell commands. Only use this on a staging environment, never production.
Set per-project permissions in .claude/settings.json: add an "allowedCommands" array listing the exact shell commands Claude may run.
Add .claude/settings.local.json to your .gitignore — use it for your local machine overrides without affecting teammates.
After any automatic session, run git diff HEAD to audit exactly what changed before committing.

1.5 The 5 Claude Surfaces

Intermediate

Claude exists across five surfaces. Knowing which to use for a given task saves hours every week and prevents paying for the wrong tier.

● Beginner

Chat (claude.ai): best for questions, drafting documents, brainstorming. No file access, no code execution.
Cowork: collaborative long-form document creation. Claude writes alongside you in a shared canvas.
Claude Code: your IDE companion — reads files, writes code, runs commands, manages your whole project.

● Intermediate

Managed Agents: autonomous multi-step task runners with access to tools (browser, files, APIs). Use for long tasks you don't want to babysit.
API: programmatic access — build Claude into your own apps, automate workflows, process data at scale.
Decision rule: if the task involves your files → Claude Code. If it's a long autonomous task → Managed Agent. If you're building an app → API. Everything else → Chat.

1.6 Daily Slash Commands

Intermediate

Slash commands are shortcuts you define once and call in any session. Master these 8 and you'll work significantly faster every day.

● Beginner — Essential Commands

Type /help to list all available commands in the current session.
Type /clear to wipe the conversation and start fresh — use this when Claude seems confused or is repeating mistakes.
Type /model sonnet (or haiku / opus) to switch models mid-session.
Type /cost to see how many tokens you've used and approximately what it costs.

● Intermediate — Context & Custom Commands

Type /compact to summarise the current conversation — Claude compresses older context to free up window space without losing the key facts.
Type /context to see exactly what files and context Claude is currently holding.
Create a custom command: add a file at .claude/commands/check-security.md. Inside, write the instructions Claude should follow when you type /check-security.
Test your custom command: type /check-security in a session and confirm it runs the right steps.
Decision rule: use /compact when the session is long but still going. Use /clear when you're starting a new, unrelated task.

● Advanced — Command Pipelines

Chain commands in a single .md file to build a multi-step workflow triggered by one command.
Example: create .claude/commands/ship.md that runs: lint → test → build → deploy in sequence.
Add conditional logic in plain English: "if tests fail, stop and report the error. Do not proceed to build."

1.7 Organise Your Desktop

Beginner

Use Claude to audit your current folder chaos and auto-generate a structure you'll actually stick to — takes 30 seconds.

● Beginner

Open Claude Chat and type: "I work on [describe your work: e.g. client websites, YouTube content, freelance code]. Suggest a folder structure for my desktop and Documents folder."
Review the suggestion. Ask Claude to adjust it: "Remove the archive folder and add a separate folder for invoices."
Accept the structure and have Claude generate the shell commands to create all the folders at once.
Copy and run the commands in your terminal: mkdir -p ~/Projects/Code ~/Projects/Cowork ~/Projects/Clients etc.

● Intermediate — Claude Code Project Structure

Every Claude Code project needs two top-level folders: Code/ for source files and Cowork/ for specs, briefs, and notes.
Inside each project, create a skills/ folder for your reusable Skills and a CLAUDE.md at the root.
Run claude in the project root and ask: "Scaffold the standard Brightmind project structure for a [project type] project."

1.8 Connect Your Tools

Intermediate

Wire Claude Code into your SaaS tools via MCP connectors — so it can read, write, and act across your entire stack without copy-pasting.

● Beginner — Built-In Connectors

In the Claude desktop app, go to Settings → Integrations.
Connect Google Drive: click Add, sign in with your Google account, and grant read access. Claude can now read any Drive doc you share with it.
Connect Notion: click Add, sign in to Notion, and select the workspace. Claude can now query your Notion pages.
Test the connection: in a chat, type "Summarise my Notion page called [page name]" and confirm Claude retrieves it.

● Intermediate — MCP Config File

Create a .mcp.json file in your project root. This file declares which external tools Claude can access for this project.
Add a Supabase connector: paste the Supabase MCP config from the Supabase docs into your .mcp.json, filling in your project URL and anon key.
Add a Pinecone connector for vector memory: follow the Pinecone MCP setup guide and add the config block to .mcp.json.
Restart Claude Code in the project. Type "What tables are in my Supabase database?" — Claude should respond with actual table names.
Decision rule: use built-in connectors for reading. Use MCP when you need Claude to write to an external service.

● Advanced — Custom Connectors

If no connector exists for a tool you use, check the MCP marketplace at mcp.run for community-built options.
If nothing fits, you'll build a custom MCP server in Module 03, Lesson 3.9.

1.9 Folder Structure for Claude Projects

Intermediate

The canonical layout that keeps Skills, CLAUDE.md, and code from colliding — use this for every project you build.

● Beginner — Minimum Viable Structure

Create your project root folder: mkdir my-project && cd my-project
Create the essential files: touch CLAUDE.md and mkdir .claude src
CLAUDE.md — Claude's memory, read every session. .claude/ — config, commands, and settings. src/ — your actual code.
Run git init to initialise version control immediately.

● Intermediate — Full Production Structure

Create the full layout: mkdir -p .claude/commands skills agents docs memory
skills/ — reusable prompt workflows (covered in Module 03).
agents/ — subagent definitions for parallel tasks.
docs/ — specs and briefs Claude reads as context before building.
memory/ — project-scoped persistent data (CSV files, logs).
Add .claude/settings.local.json to .gitignore — this file holds your local machine overrides and must never be committed.

1.10 Git + GitHub Backup

Beginner

Version control is your safety net for every Claude session. Set it up before you write a single line of code.

● Beginner — First Commit in 2 Minutes

In your project folder, run git init to create a local git repository.
Create a .gitignore file and add: .env, node_modules/, .claude/settings.local.json
Stage everything: git add .
Make your first commit: git commit -m "initial project setup"
Go to github.com/new, create a private repo, copy the remote URL, then run: git remote add origin [url] && git push -u origin main

● Intermediate — Claude Session Safety

Before every Claude session, commit any working changes: git add . && git commit -m "pre-session checkpoint"
If Claude makes bad changes, undo them instantly: git stash to shelve all edits, or git checkout -- . to discard everything.
To undo the last commit (keep files): git reset HEAD~1
Name branches by task: git checkout -b feature/add-auth — experiment freely, merge when it works.

1.11 CLAUDE.md + Plan Mode

Advanced

CLAUDE.md is the single highest-leverage file in any Claude Code project. Plan Mode stops Claude from writing code before it thinks. Together they eliminate the most common Claude mistakes.

● Beginner — Your First CLAUDE.md

Create CLAUDE.md in your project root and open it.
Add a project overview: one paragraph describing what the project does, the language, and the framework.
Add a conventions section: how you name variables, where files live, how tests are named.
Add a security section: "Never log API keys. Never hardcode credentials. All secrets go in .env."
Save and run claude — every session from now on starts by reading this file.

● Intermediate — Production CLAUDE.md Template

Structure your file with five sections: Overview, Stack, Conventions, Testing, Security.
Keep it under 500 lines — beyond that Claude ignores parts of it. Link to external docs rather than copy-pasting them in.
Add anti-patterns explicitly: "Do not use any as a TypeScript type. Do not skip writing tests. Do not use console.log in production code."
Add your git workflow: branch naming, commit message format, PR checklist.

● Advanced — Plan Mode

Enable Plan Mode by typing /plan before any complex task.
Claude will output a step-by-step plan and stop — it will not write any code until you approve.
Review the plan. If a step is wrong, say so: "Step 3 is wrong — we're using Supabase, not Postgres directly."
Once the plan looks right, type "proceed" and Claude executes exactly what was agreed.
Add Always use Plan Mode for any task that touches more than 3 files to your CLAUDE.md to make this automatic.
Nested CLAUDE.md: in a monorepo, add a separate CLAUDE.md inside each sub-package to override the root rules for that context.

Build a Real Website Beginner → Advanced

10 lessons · The 3-step system: Competitor Intel → Design → Deploy

2.1 The 3-Step Website System

Beginner

The repeatable framework that produces production-quality websites every time. Skipping to code before completing steps 1 and 2 is the #1 beginner mistake.

● Beginner

Step 1 — Intel: research 3 competitor websites to understand what good looks like in your niche.
Step 2 — Spec: write a structured brief describing audience, goal, tone, must-have sections, and what the site must NOT do.
Step 3 — Build: give Claude the brief and build. Never ask Claude to build without a brief.
For a first project, choose a simple portfolio or landing page — one page, one goal, one CTA.

● Intermediate

Time-box each phase: 20 minutes for intel, 20 minutes for spec, then build without second-guessing.
Create a docs/brief.md file and fill it in before starting any Claude session.
At the start of every Claude session, type: "Read docs/brief.md before doing anything. Confirm you've read it."
The brief becomes your source of truth — if you change your mind mid-build, update the brief first.

2.2 Scraping Competitors

Intermediate

Extract structure, copy, and design patterns from competitor websites using Firecrawl — feeding Claude structured inspiration instead of vague descriptions.

● Beginner — Manual Intel

Pick 3 competitors. Open each site and note: page sections, headline copy, CTA text, colour scheme, and what makes it feel trustworthy.
Paste your notes into Claude: "Here are notes on 3 competitor sites. What patterns do they share? What should I adopt?"
Ask Claude to extract the structure: "Based on these notes, list the sections my landing page should include and in what order."

● Intermediate — Firecrawl Scraping

Sign up at firecrawl.dev and get a free API key.
Scrape a competitor URL via the Firecrawl API or dashboard: firecrawl scrape https://competitor.com — you get clean Markdown output.
Save the Markdown to docs/competitor1.md, docs/competitor2.md, docs/competitor3.md.
Ask Claude: "Read all three competitor files. Identify: the most common page sections, the strongest CTAs, and the tone of voice used."
Ask Claude to turn the analysis into your brief: "Now produce a structured design brief for my site based on what works across these competitors."

● Advanced — Automated Pipeline

Use Apify to scrape multiple pages at once: create an Apify actor for Web Scraper, input a list of URLs, export to JSON.
Feed the JSON to Claude: "Parse this Apify output and extract: page structure, headlines, CTA copy, and nav items for each site."
Save the entire intel → brief pipeline as a Skill so you can run it for every new client in seconds (covered in Module 03).

2.3 Structured Design Brief

Intermediate

A brief Claude can act on reliably. A vague brief produces a generic website. A precise brief produces something you can ship.

● Beginner

Create docs/brief.md and add these six sections: Target Audience, Primary Goal, Tone of Voice, Must-Have Sections, Must-Not-Do, Competitors.
Fill in each section in plain English. Be specific: "Tone: friendly and direct, like a smart colleague. NOT corporate. NOT jargon-heavy."
Add your brand colours and font if you have them. If not, describe the feeling: "Clean and minimal. Black, white, and one teal accent."

● Intermediate

Add a Constraints section: "Must load in under 2 seconds. Must be fully responsive. No carousels. No stock photos."
Add a Success Metric: "The goal is a visitor clicking the contact form CTA. Everything else is secondary."
Review the brief with Claude before building: "Read docs/brief.md and tell me if anything is ambiguous or missing."
Address Claude's questions, then update the brief. Only start building once Claude confirms it has everything it needs.

2.4 UI UX Pro Max Skill

Intermediate

A production-ready Skill that applies professional UI/UX principles to every component Claude generates — install once, benefit forever.

● Intermediate

Create skills/ui-ux/SKILL.md in your project.
In the frontmatter, set name: ui-ux and write a description: "Use when generating any UI component or page layout."
In the body, list your UI standards: spacing system (8px grid), typography scale, colour usage rules, accessibility requirements (AA contrast), mobile-first breakpoints.
Add negative rules: "Never use more than 2 font sizes per section. Never use pure black (#000) — use #111827. Never auto-play video."
Test it: ask Claude to build a hero section. Without the Skill, note the output. Then activate the Skill and ask again — compare quality.

● Advanced

Fork the Skill for each client: copy the base Skill and add client-specific brand constraints (logo, colours, font).
Chain the Skill with your brief template: the Skill activates automatically whenever Claude reads a brief.md file.
Version your Skills with git tags so you can roll back to a previous Skill version if a client update breaks their brand consistency.

2.5 Parallel Agents

Advanced

Run three simultaneous Claude builds from the same brief and pick the best elements from each — turns creative exploration from slow to instant.

● Intermediate

Open three separate terminal windows (or VS Code panels) and navigate to your project in each.
In each window, start a new Claude session with the same brief but a different style direction: "minimal and clean", "bold and editorial", "warm and approachable".
Let all three run simultaneously. Compare the outputs once done.
Choose the strongest version as your base and note which elements from the others you want to merge in.

● Advanced — Git Worktrees

Create isolated builds using git worktrees so the three sessions don't write to the same files: git worktree add ../build-v2 -b design/v2
Run each Claude session inside its own worktree directory. No file conflicts possible.
Once you've chosen a winner, cherry-pick specific commits from other worktrees: git cherry-pick [commit-hash]
Remove worktrees once done: git worktree remove ../build-v2

2.6 SEO Baked In

Intermediate

Add SEO at build time, not as an afterthought. These patterns take 10 extra minutes per site and improve rankings from day one.

● Beginner

Ask Claude: "Add a meta title and description to every page. The title should include [main keyword]. Description should be under 160 characters."
Ask Claude: "Use semantic HTML — make sure there's exactly one h1 per page, use h2/h3 for subheadings, wrap navigation in a nav element, main content in a main element."
Add an Open Graph tag for social sharing: "Add og:title, og:description, and og:image meta tags to the head of every page."

● Intermediate

Ask Claude: "Generate a sitemap.xml listing all pages and a robots.txt that allows all crawlers."
Ask Claude: "Add JSON-LD schema markup for [LocalBusiness / Article / Product] on the relevant pages."
Run Lighthouse in Chrome DevTools (F12 → Lighthouse tab) and target a Performance score of 90+.
Share the Lighthouse report with Claude: "Here's my Lighthouse report. Fix the top 3 performance issues."

● Advanced — Core Web Vitals

Fix LCP (Largest Contentful Paint): ask Claude to add loading="eager" and fetchpriority="high" to the hero image.
Fix CLS (Cumulative Layout Shift): ask Claude to add explicit width and height attributes to every image element.
Add a pre-deploy SEO hook that runs Lighthouse CLI and blocks the deploy if Performance drops below 85.

2.7 UI Sniping

Intermediate

Identify proven design patterns in the wild and adapt them — building faster and with less creative guesswork.

● Beginner

Visit land-book.com, onepagelove.com, or lapa.ninja for landing page inspiration.
Screenshot a component you like (a pricing table, testimonial layout, nav bar).
In Claude, describe the component: "Build a pricing table like this: 3 columns, middle column highlighted as 'Popular', each with a title, price, 5 feature bullets, and a CTA button."

● Intermediate

Build a personal component library folder: mkdir -p docs/components. Add a markdown file for each pattern you've sniped with a description and example prompt.
When you spot a good pattern, use Firecrawl to get the HTML structure, then ask Claude: "Adapt this structure to match my brand colours and font. Do not copy the text content."
Test each sniped component at mobile (375px) before accepting it — many patterns break on small screens.

2.8 Deploy to Vercel

Beginner

Push your site live in under 3 minutes with a public URL, HTTPS, and automatic redeploys on every git push.

● Beginner

Push your project to a GitHub repo (if not done already): git push origin main
Go to vercel.com, click Add New Project, and import your GitHub repo.
Vercel auto-detects the framework (HTML, Next.js, etc.) and sets sensible defaults. Click Deploy.
In about 60 seconds, you'll get a live URL like your-project.vercel.app. Share it.
Every future git push to main triggers an automatic redeploy. No manual steps needed.

● Intermediate

Add environment variables in the Vercel dashboard under Settings → Environment Variables. Never hardcode them in your code.
Each branch gets a preview URL automatically — share the preview link with clients before merging to main.
Connect a custom domain: Settings → Domains → Add. Update your DNS records as instructed. SSL is automatic.

2.9 Verify Claude's Work

Intermediate

Claude makes mistakes. This lesson teaches you how to catch them before they reach production — the single skill that separates good Claude users from great ones.

● Beginner — Manual Review

Always read the diff before approving any edit. Green lines are additions, red are deletions. Question anything unexpected.
Open the site in your browser after every batch of changes. Click every link and button.
Open DevTools (F12) → Console tab. Any errors in red need fixing before you ship.
If something looks wrong, tell Claude precisely: "The mobile nav doesn't close when I tap a link. Fix it." — specific error descriptions get better fixes.

● Intermediate — Self-Review Checklist

Add a verification step to your CLAUDE.md: "Before marking any task complete, run through this checklist: no console errors, all links work, responsive at 375px, Lighthouse performance above 85."
Ask Claude to review its own work: "Before you finish, check the output against the brief in docs/brief.md and confirm every requirement is met."
If Claude says "done" but you spot an issue, say: "Actually — [describe issue]. Reject. Try again." Giving Claude explicit failure feedback improves the next attempt.

● Advanced — Automated Verification

Add a post-build hook that runs Playwright end-to-end tests: "Visit the homepage, confirm the CTA button exists, confirm the nav works on mobile."
Use the critic loop pattern (Module 03, Lesson 3.11): a second Claude session reviews the first session's output against your checklist.

2.10 Debug Like a Pro

Intermediate

A fast, repeatable debugging protocol that resolves most Claude-introduced bugs in under 10 minutes.

● Beginner

When something breaks, read the full error message first — the last line is usually the cause, not the first.
Copy the exact error text and paste it to Claude: "I got this error: [paste]. Here's the file it refers to: [paste]. What's wrong?"
Never say "it's broken" without the error. Claude can't fix what it can't see.

● Intermediate

Give Claude the full context: error message + the file it's in + what you expected to happen vs what actually happened.
If Claude's fix introduces new problems, run git stash to undo all session changes and start fresh from your last clean commit.
Use git diff HEAD to see exactly what changed in the current session — this quickly identifies which edit caused the regression.
Re-prompt with the specific regression: "This worked before commit abc123. After your last change, it broke. Here's the diff: [paste]. Revert only the breaking change."

● Advanced

Use git bisect to find which commit introduced a bug: git bisect start, mark the good and bad commits, git will binary-search to the culprit.
Reproduce the bug in isolation before asking Claude to fix it — a minimal reproduction gets a more accurate fix and avoids Claude changing unrelated code.

Power Features Intermediate → Pro

12 lessons · Skills · Hooks · MCP · Subagents · Critic Loop · Dispatch

3.1 Skills from Scratch

Intermediate

Skills are reusable prompt programs stored in files. Define one and Claude auto-activates it whenever a matching task comes up — no re-prompting required.

● Beginner — Your First Skill

Create the folder: mkdir -p skills/code-review
Create skills/code-review/SKILL.md and add frontmatter at the top between --- markers: name: code-review and a description explaining when to use it.
In the body, write numbered instructions: "1. Check for security vulnerabilities. 2. Verify test coverage. 3. Check style guide compliance."
Test it: ask Claude to review a file. It should follow your Skill's checklist without you asking.

● Intermediate — Skill Structure

Add input/output examples to your SKILL.md so Claude knows the expected format: paste an example input and the ideal output below it.
Add a scripts/ subfolder inside the Skill for any shell scripts it needs to run.
Add a references/ subfolder for docs Claude should read on demand — style guides, API references, etc.
Pass variables at runtime: "Run the code-review Skill on src/auth.ts focusing on the authentication logic."

● Advanced — Skill Chains

Chain Skills: in your SKILL.md, add "On completion, activate the test-writer Skill to generate tests for any functions you modified."
Version your Skills: commit changes with tags like git tag skill-code-review-v2 so you can roll back if a Skill update breaks quality.
Share Skills across projects: keep a personal ~/skills/ library and symlink the ones each project needs.

3.2 Skill Marketplaces + Security

Intermediate

Third-party Skills can save hours of setup — but they can also introduce prompt injection risks. Always vet before you install.

● Beginner — Browsing & Installing

Browse the Cowork marketplace and skills.sh for community-built Skills.
Before installing, click into the Skill and read the full SKILL.md source — it's just a text file.
Install by copying the SKILL.md into your project's skills/ folder.

● Intermediate — Security Vetting

Red flag: any Skill that makes outbound network calls you didn't explicitly set up — it could exfiltrate your code or data.
Red flag: file deletion commands (rm -rf) or git history rewrites (git push --force) hidden inside step instructions.
Red flag: instructions to override your CLAUDE.md rules or ignore your security constraints.
Safe practice: run a new Skill on a throwaway test project before using it on client work.
After vetting, add the Skill to your team's approved list in a shared docs/approved-skills.md.

3.3 Build Your Own Skill — Live Walkthrough

Advanced

A full end-to-end Skill build — from identifying a repetitive task to a tested, reusable Skill file you can use on any project.

● Intermediate

Identify the task: what do you re-explain to Claude in almost every session? That's your Skill candidate.
Write the system prompt: describe the task, the inputs, the process steps, and the expected output format.
Test with 5 different real inputs. Note where the output is wrong or inconsistent.
Iterate the SKILL.md: add constraints for the failure cases you observed. Re-test.

● Advanced

Add tool calls inside the Skill: specify which MCP tools Claude should call and in what order.
Add error handling: "If the input file is missing, stop and say: 'Missing input file: [filename]. Please create it and retry.'"
Publish the Skill: push to GitHub, write a README, and submit to the skills.sh marketplace if it's generic enough to be useful to others.

3.4 Token Management

Intermediate

Keep costs under control and output quality high by routing every task to the right model at the right time.

● Beginner

Run /cost after a complex session to see your token usage. Understand which tasks are expensive.
Haiku = fast and cheap. Good for: renaming, formatting, small edits, generating boilerplate.
Sonnet = balanced. Good for: most development work, writing, analysis under 5k tokens.
Opus = most capable. Good for: complex architecture, long document analysis, hard reasoning tasks.

● Intermediate

Add a model-routing rule to CLAUDE.md: "For tasks touching fewer than 3 files, use Haiku. For full-feature builds, use Sonnet. For architecture or security reviews, use Opus."
Keep prompts short and specific — vague prompts force Claude to guess, using more tokens for worse output.
Use /compact in long sessions to compress history instead of starting over, saving you from re-loading context.

● Advanced

Implement prompt caching in your API calls: add a cache_control: {type: "ephemeral"} block around your system prompt to avoid re-processing it on every request — cuts costs by up to 90% on repeated context.
Use the Batch API for non-real-time tasks (nightly data processing, report generation) — batch requests are 50% cheaper than standard API calls.

3.5 Context Rot Explained

Intermediate

Long conversations degrade Claude's output quality. Recognise the warning signs early and fix them before they waste an hour of work.

● Beginner — Warning Signs

Warning sign 1: Claude contradicts something it said 10 messages ago.
Warning sign 2: Claude ignores a rule from your CLAUDE.md that it was following earlier.
Warning sign 3: Claude starts repeating the same mistake even after you've corrected it twice.
When you spot any of these, stop the session. Use /clear and start a focused new session.

● Intermediate — Fix It Without Losing Progress

Before clearing, ask Claude to summarise what's been accomplished: "Write a handoff note covering what we built, what decisions we made, and what's left to do."
Save the handoff note to docs/session-handoff.md.
Run /clear, then start fresh: "Read docs/session-handoff.md before we continue."
Use /compact as a lighter option — Claude compresses older parts of the conversation without losing the summary.
Rule of thumb: keep sessions focused on one task. If you're changing direction, start a new session.

3.6 Routines (24/7 Agents)

Advanced

Routines let Claude run tasks automatically on a schedule — morning briefings, daily backups, weekly client reports — with no manual trigger.

● Intermediate

Understand Routines: they are scheduled Claude Code sessions with a pre-defined task and tool access.
Use case: a daily email digest. Define the Routine: "Every morning at 8am, read my inbox summary from Gmail MCP and write a prioritised action list to morning_brief.md."
Create the Routine in the Claude Code dashboard under Routines → New Routine.

● Advanced

Set the schedule using cron syntax: 0 8 * * 1-5 runs at 8am Monday–Friday.
Give the Routine tool access: connect the Gmail MCP and the Notion MCP so it can read and write.
Add error handling: "If Gmail is unreachable, write an error to morning_brief.md and send a Slack notification via the Slack MCP."
Monitor Routine runs in the dashboard's Run History. Review failures weekly and fix broken Routines promptly.

3.7 Hooks Automation

Advanced

Hooks fire shell commands at specific lifecycle events — before and after Claude's actions. Use them to auto-format, test, and validate every change with no manual steps.

● Intermediate — First Hooks

Open .claude/settings.json and add a "hooks" section.
Add a PostToolUse hook that runs Prettier after every file edit: "PostToolUse": ["npx prettier --write {{file}}"]
Add a PreCommit hook that runs your test suite: "PreCommit": ["npm test"] — if tests fail, the commit is blocked.
Test: make a change via Claude and confirm Prettier runs automatically and reformats the file.

● Advanced

Add a secret detection PreCommit hook: write a script that greps for patterns like sk-ant-, AKIA, or ghp_ and exits with code 1 if found — blocking the commit.
Add a SessionEnd hook that saves a summary: "On session end, write a summary of all files changed and decisions made to docs/session-log.md."
Add a Notification hook: "On any error, send a POST request to my Slack webhook URL with the error message."
Use conditional hooks: wrap hook logic in shell conditionals so they only run for specific file types or directories.

3.8 MCP in Plain English

Intermediate

MCP (Model Context Protocol) is the standardised bridge between Claude and external tools. Demystified — no jargon, just what you need to connect Claude to the services you use.

● Beginner

MCP is a protocol — a standard format for telling Claude "here are tools you can call, here's what they do, here's how to call them."
Think of each MCP server as a plugin. You install it once and Claude gains the ability to call those tools whenever relevant.
Browse pre-built MCP servers at mcp.run or in the Claude desktop app under Settings → MCP.
Install the GitHub MCP: adds tools for reading issues, creating PRs, and checking CI status — all accessible from inside a Claude session.

● Intermediate — Configuration

Create .mcp.json in your project root. This file tells Claude which MCP servers are available for this project.
Add a server entry: {"mcpServers": {"supabase": {"command": "npx", "args": ["@supabase/mcp-server-supabase", "--project-url", "YOUR_URL", "--service-role-key", "YOUR_KEY"]}}}
Restart Claude Code. Test with: "What tables exist in my Supabase database?" — Claude should return real table names.
Never put real keys in .mcp.json if you'll commit it. Use environment variable references instead: "${SUPABASE_KEY}".

3.9 Build a Custom MCP Server

Professional

Build, deploy, and share an MCP server that gives Claude access to any API or data source you choose — with full authentication.

● Advanced — Scaffold & Build

Install the MCP SDK: npm install @modelcontextprotocol/sdk
Create server.ts and import Server from the SDK. Define your server name and version.
Add a read tool: define its name, description, input schema (what parameters it accepts), and the handler function that calls your API and returns data.
Add a write tool: same structure but for creating or updating data.
Test locally: run the server with ts-node server.ts and add it to your .mcp.json pointing at localhost.

● Professional — Deploy & Share

Deploy to Vercel or Railway: create a vercel.json and run vercel deploy. Note the public URL.
Add API key authentication: check for an Authorization header in every tool handler. Return a 401 if it's missing or wrong.
Update .mcp.json to point at the deployed URL and pass the API key as an environment variable.
Document your tools in a README and submit to the MCP marketplace for your team or the community to use.

3.10 Subagents + Worktrees

Advanced

Delegate focused chunks of work to sub-agents operating in isolated git worktrees — run parallel builds with zero file collisions.

● Intermediate

A subagent is a separate Claude Code session running a tightly scoped task while your main session works on something else.
Define a subagent in agents/test-writer.yml: set its name, task description, allowed tools, and output location.
Invoke it from your main session: "Launch the test-writer agent on src/auth.ts."

● Advanced — Git Worktrees

Create a worktree for a subagent build: git worktree add ../agent-feature -b agent/feature-name
Point the subagent at the worktree directory so it writes files there, not in your main working directory.
Run 3 subagents simultaneously in 3 worktrees — each builds independently, no conflicts.
Review outputs: git diff main..agent/feature-name to see what the subagent produced.
Merge the winner: git merge agent/feature-name. Clean up: git worktree remove ../agent-feature

3.11 Autonomous Critic Loop

Professional

The LLM-as-judge pattern: a second Claude session evaluates the first session's output against a quality rubric and iterates until it passes.

● Advanced

Build a two-session loop: Session A (Builder) produces output. Session B (Reviewer) scores it against your criteria.
Write a rubric file at docs/quality-rubric.md: list each criterion with a pass/fail condition and a score weight.
Session B prompt: "Read docs/quality-rubric.md. Score the output in [file]. Return a score out of 10 and list every failing criterion."

● Professional

Add an exit condition: "If the score is 8 or above, output APPROVED. If below, list what needs fixing and pass back to Session A."
Automate the loop with a shell script: while ! grep -q "APPROVED" review_output.txt; do run_builder; run_reviewer; done
Apply to code, copy, proposals, or any deliverable where quality consistency matters.
Save the final rubric score alongside every deliverable as a quality audit trail for clients.

3.12 Dispatch · Scheduled Tasks · Plugins

Professional

The newer orchestration primitives: Dispatch for event-driven chains, Scheduled Tasks for cron jobs, and the Plugin marketplace for distributable bundles.

● Advanced

Dispatch: trigger an agent chain from an event (a webhook, a file change, a form submission). Go to the Claude Code dashboard → Dispatch → New Trigger.
Configure the trigger: "When a new file is added to the uploads/ folder, dispatch the document-processor agent."
Scheduled Tasks: create a cron job in Claude Code under Settings → Scheduled Tasks. Set the cron expression and the task instructions.

● Professional

Plugins: a Plugin is a bundled, distributable extension that combines a Skill, MCP server, and hooks into one installable package.
Create a Plugin: add a plugins/manifest.json describing the name, version, tools, and Skills included.
Share the Plugin with a client or your team: zip the plugins folder and share, or publish via the Plugin marketplace.
A Plugin is the most professional deliverable format — clients install it once and get your full Claude system without needing to understand how it works.

Memory System Intermediate → Pro

6 lessons · Pinecone · NotebookLM · Granola · Obsidian RAG

4.1 The 3 Levels of Memory

Intermediate

Claude has three distinct memory levels — each with a different scope, cost, and use case. Matching the right level to each problem prevents both over-engineering and costly data loss.

● Beginner

Context memory: lives only in the current conversation window. Lost when you run /clear or close the session. Best for temporary, session-specific data.
Project memory: lives in CLAUDE.md and files in your repo. Persists across sessions. Best for project rules, conventions, and ongoing context.
Long-term memory: stored externally (CSV files, Pinecone, Notion). Survives across projects. Best for client history, knowledge bases, and decision logs.

● Intermediate

Decision rule: if you'll need it for this session only → context. If you'll need it every session in this project → CLAUDE.md. If you'll need it across all future projects → external store.
Draw a memory map for your most important project: list every key piece of context and assign it a memory level.
Identify what you re-explain to Claude most often — those are candidates for project or long-term memory.

4.2 NotebookLM as Knowledge Base

Beginner

Google NotebookLM turns any collection of documents into a queryable knowledge base — ideal for client research, industry knowledge, and course material.

● Beginner

Go to notebooklm.google.com and sign in with a Google account.
Click New Notebook. Add sources: upload PDFs, paste URLs, add Google Docs, or YouTube links.
Once sources are loaded, ask questions in the chat panel. NotebookLM answers using only your sources and cites the exact page/section.
Test with: "What are the main themes across all the documents I uploaded?"

● Intermediate

Create a notebook per client: upload their industry reports, website scrapes, competitor analyses, and past briefs.
Before a client session, query the notebook: "What are this client's main pain points based on our past conversations?"
Export the answer as a summary and paste it into your Claude Code brief before building.
Use the Audio Overview feature to generate a podcast-style summary of your sources — good for passive review.

4.3 Pinecone Vector Memory

Advanced

Pinecone gives Claude infinite long-term recall via semantic search — embed anything, query naturally, never lose important context again.

● Intermediate — Setup

Create a free account at pinecone.io and create an index: choose 1536 dimensions (for OpenAI embeddings) and cosine similarity metric.
Install the clients: npm install @pinecone-database/pinecone openai
Embed a document: pass the text to the OpenAI embeddings API (text-embedding-3-small) and get back a vector of 1536 numbers.
Upsert the vector to Pinecone with an ID and metadata (filename, date, project).
Query: embed your question and call index.query({vector: questionVector, topK: 5}) to get the 5 most semantically relevant chunks.

● Advanced — MCP Integration

Add the Pinecone MCP server to your .mcp.json so Claude can query your index directly from inside a session.
Test: ask Claude "What do my saved notes say about authentication patterns?" — Claude queries Pinecone and returns relevant results.
Auto-embed on save: create a PostToolUse hook that embeds any new file Claude writes to a memory/ folder automatically.

4.4 Granola Meeting Memory

Intermediate

Every client call automatically transcribed, summarised, and queryable — so Claude always knows what was agreed, even months later.

● Beginner

Download Granola from granola.ai and install it on your Mac.
Before your next call, open Granola and click New Meeting. Granola will record and transcribe automatically.
After the call, open the summary. Granola produces: key decisions, action items, and a full transcript.
Copy the action items into your task manager and save the summary to your memory/meetings/ folder.

● Intermediate

Export each meeting summary as Markdown and save to memory/meetings/YYYY-MM-DD-client-name.md.
Before a client build session, tell Claude: "Read memory/meetings/ and summarise what this client asked for in our last 3 calls."
Embed meeting summaries into Pinecone for semantic search across all past meetings.

4.5 CSV Folder Memory

Intermediate

A zero-infrastructure memory system — Claude reads structured CSV files directly as persistent data. Simpler than Pinecone for structured, tabular information.

● Intermediate

Create a memory/ folder. Design a CSV schema for your data: e.g. clients.csv with columns: name, industry, budget_range, pain_points, last_contact.
Add an entry: populate the first few rows manually, or ask Claude to populate them from existing notes.
Add a rule to CLAUDE.md: "When starting any client project, read memory/clients.csv and find the row matching the client name."
Test: start a session and ask "What do we know about [client name]?" — Claude should read the CSV and return the row.
Update after each project: ask Claude to update the client's row with new information from the session.

● Advanced — When to Use CSV vs Pinecone

Use CSV when data is structured, filtered by exact fields, and small enough to load fully (under ~500 rows).
Use Pinecone when you need fuzzy semantic search, when data is unstructured text, or when the corpus is large.
Combine both: use CSV for structured client data, Pinecone for unstructured meeting notes and documents.

4.6 Obsidian RAG (Karpathy Workflow)

Professional

Turn your Obsidian vault into a fully local, privacy-first second brain that Claude queries with semantic search — no data leaves your machine.

● Advanced

Install Obsidian and organise your vault with folders: Projects/, Clients/, Research/, Decisions/.
Install a local embedding model: use ollama with nomic-embed-text — run ollama pull nomic-embed-text.
Write a script that walks your vault, reads each .md file, embeds it with ollama, and stores vectors in a local SQLite database with the file path as metadata.
Build a query function: embed the question with ollama, run a cosine similarity search on the SQLite database, return the top 5 most relevant note chunks.

● Professional

Expose the query function as a local MCP server so Claude can call it in any session: {"command": "node", "args": ["obsidian-mcp.js"]}
Add a Obsidian plugin that re-embeds a note whenever you save it — keeping the index always up to date.
The Karpathy workflow: capture ideas as atomic notes in Obsidian → auto-embed on save → query via Claude in any project. Zero cloud dependency, zero data leakage.

Hermes Agent Advanced

2 lessons · Build your own AI operator wired to memory

5.1 Build Your Hermes Agent

Advanced

Hermes is a personal AI operator — it routes tasks, manages context, and acts on your behalf across your full tool stack without you babysitting it.

● Intermediate — Concept

A Hermes agent is a persistent, tool-equipped Claude agent that handles delegation: you describe a goal, it breaks it into steps and executes them using your connected tools.
Define the scope: what tools should Hermes have access to? Start small — email reading, calendar checking, task logging.
Write a hermes/AGENT.md defining: role, available tools, decision rules, escalation criteria (when to ask you before acting), and output format.

● Advanced — Build It

Create the agent using the Claude API with tool use: define each tool as a JSON schema with name, description, and parameters.
Add a Gmail tool: reads your inbox and returns unread messages as structured JSON.
Add a Calendar tool: reads today's events and returns them with start time, title, and attendees.
Add a Task tool: writes to a memory/tasks.csv file — creating, updating, and completing tasks.
Run a real test: "Hermes, what do I need to do today?" — it should read your calendar and inbox and return a prioritised list.

5.2 Connect Hermes to Memory

Professional

Wire Hermes to Pinecone for perfect recall of every task and decision — turning it from a stateless assistant into a genuinely persistent operator.

● Advanced

Add a Memory Read tool to Hermes: it embeds a query and calls Pinecone, returning the top 5 most relevant past entries.
Add a Memory Write tool: after completing any action, Hermes embeds a summary of what it did and stores it in Pinecone with timestamp and category metadata.
Test memory: ask Hermes something it should have learned last week — "What did we decide about the pricing model for Project X?" — it should query Pinecone and return the decision.

● Professional

Add a unified query interface: one command that searches CSV files, Pinecone, and Notion simultaneously and returns a ranked merged result.
Add a reasoning layer: before acting, Hermes queries memory for relevant past decisions and factors them in — so it doesn't repeat mistakes or re-ask questions you've already answered.
Schedule Hermes as a daily Routine: at 7am, it reads your inbox, checks your calendar, queries yesterday's memory, and writes a prioritised brief to memory/daily-brief.md.

Apps Intermediate → Advanced

10 lessons · BLAST · Stripe · Auth · Expo · Supabase RLS · AI features

6.1 App Architecture

Intermediate

Understand the full-stack anatomy of a modern web app so you can prompt Claude precisely for each layer — and never ask it to do two layers at once.

● Beginner

Front-end: what the user sees and clicks — HTML, CSS, JavaScript, React. Claude builds this first.
Back-end: the server, database, and business logic — Node.js, Supabase, APIs. Claude builds this second.
Integrations: third-party services (email, payments, auth) wired together. Claude wires these last.
Rule: always build and test each layer independently before connecting them. Never ask Claude to do "the whole app" in one prompt.

● Intermediate

Before any build, draw the architecture: list the front-end framework, database, auth provider, and third-party APIs you'll use.
Add the architecture diagram to docs/architecture.md and reference it in CLAUDE.md: "Read docs/architecture.md before building any feature."
Identify which layer each Claude prompt targets: "Build the Stripe checkout UI (front-end only — no backend calls yet)."
When a layer is working, commit it before wiring the next layer — gives you clean rollback points.

6.2 BLAST Framework

Advanced

BLAST structures complex app builds so Claude never loses track of requirements across long sessions. Use it as the outer wrapper for any multi-day project.

● Intermediate — What BLAST Means

B — Blueprint: the architecture diagram and data model. Always produce this first.
L — Layers: build each layer independently (UI → API → DB → integrations).
A — Assertions: write tests for each layer before moving to the next.
S — Security: run a security audit at each layer boundary.
T — Tests end-to-end: Playwright or Cypress flows covering the critical user journeys.

● Advanced — Using BLAST in Practice

Create docs/blast.md for your project. Add a section for each letter with the specific deliverables for this project.
Add to CLAUDE.md: "Follow the BLAST framework in docs/blast.md. Never start a new layer until the current layer has passing tests."
At the start of each session, ask Claude: "Which BLAST phase are we in? What's the next step according to docs/blast.md?"
When handing off to a client, share blast.md as the project completion checklist — it proves every phase was completed.

6.3 Sign-in Flows

Intermediate

Build auth that actually works — email/password, magic links, and OAuth — without configuring Supabase from scratch every time.

● Beginner — Supabase Auth

Create a Supabase project at supabase.com. Under Authentication → Providers, enable Email.
Ask Claude: "Add Supabase email/password auth to this project. Use the Supabase JS client. Add a login form, a signup form, and a logout button."
Test: create a test user via the Supabase dashboard, then log in via your app and confirm the session persists on page refresh.

● Intermediate — OAuth & Route Protection

Enable Google OAuth in Supabase: Authentication → Providers → Google. Add the Client ID and Secret from Google Cloud Console.
Ask Claude: "Add a Sign in with Google button using Supabase OAuth. Redirect to /dashboard on success."
Protect routes: ask Claude to create a middleware that checks for a valid Supabase session and redirects to /login if missing.
Handle session expiry: add a token refresh call on app load so users don't get unexpectedly logged out.
Test: open the app in a private browser window, go directly to /dashboard, and confirm you're redirected to /login.

6.4 Resend Email Marketing

Intermediate

Add transactional and marketing email to any app in minutes — the developer-friendly email API that takes 10 minutes, not 10 hours.

● Beginner

Sign up at resend.com, go to API Keys, and create a key. Add it to your .env file as RESEND_API_KEY.
Install the client: npm install resend
Ask Claude: "Add a welcome email that fires when a new user signs up. Use the Resend API. Subject: 'Welcome to [App Name]'. Plain HTML template."
Test with a real email address — check spam folder if it doesn't arrive in inbox.

● Intermediate

Build a lead capture form: input field + submit button. On submit, save the email to Supabase and trigger a Resend welcome sequence.
Ask Claude: "Design an HTML email template matching my brand colours (#0f766e teal, #f59e0b gold). Keep it clean, mobile-first, with one CTA button."
Monitor delivery in the Resend dashboard: check open rates, click rates, and bounce/spam reports.
Add an unsubscribe link to every email: required by law (CAN-SPAM, GDPR). Ask Claude to add a one-click unsubscribe endpoint.

6.5 Stripe Payments

Advanced

Add real payments to any app — one-off purchases, subscriptions, invoicing — with Claude doing all the Stripe wiring.

● Intermediate — One-Off Payment

Create a Stripe account at stripe.com. Get your test API keys from the developer dashboard.
Install the Stripe SDK: npm install stripe @stripe/stripe-js
Ask Claude: "Build a checkout page using Stripe Payment Elements. Product: [name], Price: [amount]. Redirect to /success on payment confirmation."
Test with Stripe's test card: 4242 4242 4242 4242, any future expiry, any CVC.
Add a webhook endpoint: ask Claude to create a /api/stripe/webhook route that listens for checkout.session.completed and updates your database.

● Advanced — Subscriptions

Create a Product and Price in the Stripe dashboard with recurring: monthly.
Ask Claude: "Add a subscription flow using Stripe Billing. Show a pricing page, create a Checkout session for the selected plan, and handle the subscription.created webhook."
Build a customer portal: ask Claude to add a button that opens Stripe's hosted billing portal where users can manage or cancel their subscription.
Handle edge cases: write webhook handlers for payment_failed (send email, restrict access) and customer.subscription.deleted (downgrade account).
Go live: swap test keys for live keys in Vercel environment variables and run one real £1 test payment before announcing launch.

6.6 The 5-Part App Design Framework

Beginner

Decide exactly what to build before you build it. This planning framework stops scope creep and gives Claude a tight spec — use it for any app, mobile or web.

● Beginner — The Five Questions

1. Core function: the one job the app must do. Write it in a single sentence. "Track daily habits." If it needs two sentences, you have two apps.
2. Core loop: the action the user repeats every session — open → mark habit done → see streak. The loop must feel good on its own.
3. Accessory features: everything that supports the loop (stats, reminders, settings). List them, then cut anything that isn't needed for v1.
4. Surface-area check: count your screens and features. More surface area = more bugs and slower builds. Ruthlessly trim before writing a line of code.
5. Retention hook: the reason users come back — streaks, daily AI reflection, notifications. No hook = no app.

● Intermediate — Turn It Into a Spec

Write all five answers into docs/app-spec.md and reference it in CLAUDE.md: "Read docs/app-spec.md before building any feature. Do not add features not listed under accessory features."
Ask Claude: "Given this 5-part spec, list the screens and the data model. Flag anything that adds surface area without serving the core loop."
Build the core loop first as a clickable prototype — no backend. Confirm the loop feels good before adding accessory features.
Re-run the surface-area check after each milestone: "What have we added that isn't in the spec? Should it stay?"

6.7 Mobile Apps with Expo & React Native

Intermediate

Ship a real iOS + Android app from one codebase. Expo + React Native is the fastest path for Claude Code — one language, instant device testing, no Xcode wrestling.

● Beginner — Why Expo & First Run

Why Expo over Flutter/Capacitor: React Native uses JavaScript/TypeScript (same as your web work), Expo handles native build tooling for you, and you test on a real phone in seconds — no Mac or Android Studio required to start.
Scaffold the app: npx create-expo-app@latest my-app, then cd my-app && npx expo start.
Install Expo Go from the App Store / Play Store. Scan the QR code in your terminal — the app loads live on your phone with hot reload.
Tell Claude the stack up front: "This is an Expo + React Native app using Expo Router and TypeScript. Keep all code Expo-compatible — no bare React Native native modules."

● Intermediate — Building Screens

Use file-based routing: ask Claude to create screens under app/ with Expo Router (app/index.tsx, app/(tabs)/ for tab navigation).
Prompt per screen, not per app: "Build the habit list screen only — a scrollable list of habit cards with a checkmark button. Mock the data for now."
Store data locally first with AsyncStorage or expo-sqlite, then sync to a backend later (see 6.9). This keeps the app usable offline and fast.
Add native polish Claude knows well: haptics (expo-haptics) on button taps, and expo-notifications for reminders that drive retention.

6.8 The 3-Stage Mobile Test Loop

Beginner

A tight feedback loop is the difference between a weekend app and a month of frustration. Test in three escalating stages so you catch bugs at the cheapest possible point.

● Beginner — The Three Stages

Stage 1 — Browser (fastest): run npx expo start --web and test logic and layout in Chrome. Instant reload, full dev tools, zero device friction. Fix 80% of bugs here.
Stage 2 — Screen mirror: mirror your iPhone to your screen (QuickTime on Mac, or Windows Phone Link) while running Expo Go. Now you see real touch behaviour and gestures without picking up the phone.
Stage 3 — Real device: use the phone in your hand for the final pass — real performance, camera, haptics, notifications, and how it actually feels.
Rule: never debug on the phone what you can debug in the browser. Each stage up costs more time, so push fixes down to the cheapest stage.

● Intermediate — Make Claude Test-Aware

Add to CLAUDE.md: "After each feature, give me a 3-stage test checklist: what to verify in browser, in screen-mirror, and on-device."
When a bug only appears on-device, paste the exact behaviour plus any Expo logs: "On iPhone the keyboard covers the input. Works fine in Chrome. Fix with keyboard-aware scrolling."
Keep Expo's error overlay open on-device — screenshot red-screen errors straight into Claude for an instant fix.

6.9 Supabase Backend: RLS & Edge Functions

Advanced

Give your app a real backend — Postgres, row-level security, and serverless functions — without managing a server. The standard Claude Code backend for mobile and web alike.

● Intermediate — Schema & Local-First Sync

Design the schema from your app-spec data model. Ask Claude: "Write the Supabase SQL migration for a habits table and a habit_logs table, with a foreign key to auth.users."
Wire the Supabase JS client into the Expo app and read/write the tables. Confirm rows appear in the Supabase dashboard.
Use a local-first pattern: write to local storage immediately for instant UI, then sync to Supabase in the background. Ask Claude to handle conflict resolution (last-write-wins or merge).

● Advanced — Row-Level Security & Edge Functions

RLS is non-negotiable: without it, any logged-in user can read everyone's data. Ask Claude: "Enable RLS on every table and add policies so a user can only select/insert/update/delete rows where user_id = auth.uid()."
Test RLS by logging in as two different users and confirming neither can see the other's rows. Never skip this.
Move secret-dependent logic to Edge Functions: "Create a Supabase Edge Function that runs the daily streak calculation. Deploy with supabase functions deploy." Keeps API keys and business logic off the client.
Store all secrets as Supabase function secrets (supabase secrets set) — never in the app bundle, which ships to users' devices and is fully readable.

6.10 AI Features via Claude API + Edge Functions

Advanced

Add a smart coach, reflection, or summariser to your app — calling Claude from a serverless function so your API key never touches the client.

● Intermediate — The Server-Side Pattern

Never call the Claude API directly from the app. A mobile bundle is fully readable — an embedded key gets stolen and your bill explodes. Always proxy through a backend.
Create a Supabase Edge Function (or Vercel function) that holds ANTHROPIC_API_KEY as a secret and forwards the user's request to Claude.
Ask Claude: "Write a Supabase Edge Function that takes a user's habit history, sends it to the Claude API with a coaching system prompt, and returns a short motivational reflection."

● Advanced — Production AI Features

Constrain output: give the system prompt strict formatting rules (JSON or max-length) so the app can render the response reliably. Validate before displaying.
Control cost: cache the daily reflection in the database so re-opening the app doesn't trigger a new API call. Use prompt caching on the system prompt to cut cost ~90%.
Rate-limit per user in the Edge Function to stop abuse, and stream long responses (messages.stream()) so the UI feels instant.
Add a graceful fallback: if the API call fails, show a cached or default message rather than an error — AI features should never block the core loop.

Build Anything Advanced → Pro

3 lessons · First principles · Lead-gen pipeline · Agency stack

7.1 First-Principles System Design

Advanced

Break any problem down to its components and rebuild it systematically. The mental model behind every ambitious Claude Code build.

● Intermediate

Before opening Claude, write a one-sentence problem statement: "We need X so that Y happens." If you can't write this, you don't understand the problem yet.
List all assumptions: "We're assuming users have mobile devices. We're assuming they're logged in already." Question each one.
List all constraints: "Must be free to host. Must work offline. Must load in under 1s on 3G."

● Advanced — Elon Musk Framework

Step 1 — Question the requirement: "Why does this feature need to exist? What breaks if we remove it?" Delete anything you can't defend.
Step 2 — Delete before optimising: cut every unnecessary component first. Simpler systems are faster to build and cheaper to maintain.
Step 3 — Simplify: redesign the remaining pieces. Ask Claude: "Given only these requirements [list them], what is the simplest possible architecture that solves this?"
Step 4 — Accelerate: only now ask Claude to build it at speed. Hand over the simplified spec.
Step 5 — Automate: once it works manually, ask Claude to write the automation, schedule, and hooks.

7.2 Lead Scraping → Instantly

Professional

Build a cold outreach pipeline: find prospects with Apify, enrich with Claude, push to Instantly — fully automated and repeatable.

● Intermediate

Go to apify.com and create a free account. Find the LinkedIn Scraper or Google Maps Scraper actor matching your target audience.
Configure the scraper: set location, industry, job title filters. Run it and export results as CSV.
Open the CSV in Claude: "For each row, infer their likely pain point based on job title and industry. Add a column called 'pain_point'."

● Advanced

Push to Instantly via API: ask Claude to write a script that reads the enriched CSV and creates contacts in Instantly using the POST /contacts endpoint.
Personalise each email: ask Claude to add a opening_line column with a personalised first sentence for each prospect based on their company and role.

● Professional — Full Automation

Schedule the scrape as a weekly Apify run. Set it to auto-export to a Google Sheet.
Create a Claude Routine that runs every Monday: reads the new sheet rows, enriches them, and pushes them to Instantly.
Add a de-duplication check: before pushing, query Instantly to confirm the email doesn't already exist as a contact.
Monitor reply rates weekly in Instantly's dashboard. Bring the data to Claude: "Here are this month's open and reply rates by email variant. Which is performing best and why?"

7.3 Marketing Agency Stack

Professional

The complete system for running an AI-powered marketing agency: client onboarding to delivery at scale, with Claude doing the heavy lifting.

● Advanced — Client Delivery Flow

Onboarding call → Granola transcribes it → summary saved to memory/clients/[name].md.
Brief generation: ask Claude to read the meeting summary and produce a completed brief in your template format.
Build: run your standard website or app build process with the brief as the input document.
Review: run the critic loop (3.11) to validate output before sending to the client.
Delivery: export or deploy. Send the Vercel URL with a short Loom walkthrough video.

● Professional — Scaling

Productise each service: create a fixed-scope package (e.g. "5-page website, SEO, deployed in 5 days") with a fixed price. Remove all custom hourly quoting.
Create a client intake form (Tally or Typeform). Claude reads form submissions and auto-generates the brief and project folder structure.
Hire a VA: document your entire Claude workflow in a Notion SOP. A VA can run the intake, brief generation, and client comms while you focus on builds.
Monthly retainer: after delivery, offer a £500/mo retainer for ongoing edits, new pages, and SEO updates — Claude makes this margin-positive.

Design Systems Intermediate → Advanced

7 lessons · Claude Code Design · HTML decks · 3D · Video · Images · Logos

8.1 Claude Code Design Feature

Intermediate

The built-in visual design capability inside Claude Code. Generates polished UI components from plain English descriptions.

● Beginner

In a Claude Code session, type: "Design a hero section for a SaaS product. Clean and minimal. Dark background, white text, one gold CTA button."
Claude generates an HTML/CSS file. Open it in your browser to preview.
Iterate: "Make the headline larger. Move the CTA button to the centre. Add a subtle gradient to the background."
Each change takes seconds. Keep iterating until it matches your vision.

● Intermediate — vs Figma & Stitch

Use Claude Code Design for: rapid prototyping, generating components you'll ship directly in HTML/CSS, client demos.
Use Figma for: pixel-perfect design handoffs, complex component libraries, collaborative design review with non-technical stakeholders.
Use Stitch (Figma AI) for: converting Figma designs to clean React components automatically.
Workflow: prototype in Claude Code → get client approval → refine in Figma if needed → generate final code with Stitch or Claude.

8.2 HTML Presentations

Intermediate

Build beautiful, animated slide decks in pure HTML — shareable via URL, offline-capable, and faster to produce than PowerPoint.

● Beginner

Ask Claude: "Create a 5-slide HTML presentation about [topic]. Each slide should have a large headline, 3 bullet points, and a slide number. Navigation: arrow keys left/right."
Open the generated HTML file in your browser. Press the arrow keys to navigate.
Share by deploying to Vercel or sending the HTML file directly.

● Intermediate

Add CSS transitions: ask Claude to add a fade-in transition when each slide appears. Test smoothness in Chrome.
Add a progress bar: a thin teal bar at the top that fills as you advance through slides.
Embed a live chart: ask Claude to add a Chart.js bar chart to one slide, populated with real data from a JSON object in the page.
Build a reusable presentation Skill: copy the template structure into skills/presentation/SKILL.md so you can generate new decks from any topic brief in 30 seconds.

8.3 Animated Graphics

Advanced

CSS and GSAP animations that make websites feel alive — drop-in patterns that consistently outperform static pages on engagement metrics.

● Intermediate — CSS Animations

Ask Claude: "Add a fade-up animation to each section heading as the user scrolls past it. Use Intersection Observer — no jQuery."
Ask Claude: "Add a subtle pulse animation to the CTA button every 3 seconds to draw attention to it."
Test on mobile: animations that look smooth on desktop can stutter on phones. Ask Claude to add prefers-reduced-motion media query support to respect accessibility settings.

● Advanced — GSAP

Install GSAP: npm install gsap or add the CDN link.
Ask Claude: "Using GSAP ScrollTrigger, animate the hero numbers counting up from 0 as the user scrolls into view. Duration: 1.5s, ease: power2.out."
Ask Claude: "Create a horizontal scroll section using GSAP that pins the section and scrolls the content left as the user scrolls down."
Performance check: open Chrome DevTools → Performance tab → record a scroll. Ensure no layout thrashing (no red bars). Fix any repaints Claude introduces.

8.4 Spline 3D Integration

Advanced

Add interactive 3D scenes to websites when the visual impact justifies the performance cost — and how to keep Core Web Vitals green.

● Intermediate

Create a free account at spline.design. Start from a template: choose a 3D shape or product scene.
Customise colours and materials to match your brand. Click Export → Web (React) to get an embed code.
Ask Claude: "Embed this Spline scene into the hero section. It should appear on the right side on desktop, hidden on mobile."

● Advanced — Performance

Spline's runtime is ~600KB. Lazy-load it: ask Claude to load the Spline script only after the main page content has rendered.
Add a static fallback image: if Spline fails to load (slow connection, mobile), show a PNG screenshot of the 3D scene instead.
Run Lighthouse before and after adding Spline. If Performance drops below 80, the 3D scene is hurting more than helping — remove it.
Rule: 3D is worth it when it demonstrates the product (e.g. a physical product visualiser) — rarely worth it for decoration.

8.5 ElevenLabs + Higgsfield

Advanced

Generate voice and video with AI and combine them into a production pipeline for marketing content, course narration, and client demos.

● Intermediate

Sign up at elevenlabs.io. In Voice Library, pick a voice that matches your brand tone.
Write a script with Claude: "Write a 45-second voice-over for a product demo video. Professional but conversational. No filler words."
Paste the script into ElevenLabs, generate the audio, and download the MP3.
Sign up at higgsfield.ai. Upload a prompt or reference image and generate a 5-10 second background clip.

● Advanced — Combined Pipeline

Open a video editor (CapCut is free). Add the Higgsfield clip as the background track.
Import the ElevenLabs MP3 as the audio track. Align timing.
Ask Claude: "Write captions for this script, timed to the audio. Format as SRT file." Import the SRT into your editor.
Export at 1080p. Use as a product demo, ad creative, or course module intro — at zero talent cost.
Batch: generate 5 variations with different scripts and voice speeds. A/B test in Instantly or social ads.

8.6 AI Image Generation

Intermediate

Prompt patterns that produce production-quality images every time, plus a workflow for brand consistency and quality control before publishing.

● Beginner

Use flux.ai or Ideogram for photorealistic images; Midjourney for editorial/artistic styles.
Anatomy of a strong prompt: [subject], [style], [lighting], [camera angle], [colour palette], [mood]. Example: "Professional headshot, modern office background, soft natural lighting, eye-level, teal and neutral tones, confident and approachable."
Generate 4 variants. Choose the best. Regenerate the others with small prompt tweaks.

● Intermediate — Brand Consistency

Create a docs/image-style-guide.md with: approved colour palette, prohibited elements (no stock-photo poses, no lens flare), preferred lighting style, and example approved/rejected images.
Before generating any client image, ask Claude: "Write an image prompt following docs/image-style-guide.md for: [describe the scene needed]."
Quality control checklist before using: no distorted hands or text, correct brand colours, no unintentional faces or logos in background.

8.7 Auto-Fetch Brand Assets

Advanced

Scrape any brand's logo and colour palette from their website in seconds — no design files needed — and build a live client asset library.

● Intermediate

Use Firecrawl to scrape a client's homepage: firecrawl scrape https://client.com. Save the Markdown output.
Ask Claude: "From this scraped homepage, extract all hex colour codes used in CSS, identify the primary brand colour, secondary colour, and background colour."
Ask Claude: "Find the URL of the logo image from this scraped content." Download the logo with curl -o logo.png [url].

● Advanced

Create a memory/clients/[name]/brand/ folder. Save: colours.json, logo.png, fonts.md.
Add a brand-fetch Skill that automates the scrape → extract → save pipeline for any client URL in one command.
Reference the brand folder in the UI Skill: "Before generating any UI, read memory/clients/[name]/brand/colours.json and use those exact hex values."
Result: every UI Claude generates for this client is automatically on-brand without you specifying colours each time.

Compliance & Maintenance Intermediate → Pro

7 lessons · HIPAA · GDPR · Security audits · App Store · SDK

9.1 HIPAA · GDPR · API Key Hygiene

Intermediate

What you must never share with Claude, how to handle regulated data, and API key practices that prevent breaches that could end a client relationship.

● Beginner — What Never to Share

Never paste real user data (names, emails, phone numbers, addresses) into a Claude session — use anonymised test data instead.
Never paste API keys, passwords, or tokens into the chat. Use environment variables and reference them by name: "Use the value from the STRIPE_SECRET_KEY env var."
Never paste database connection strings. Store them in .env and add .env to .gitignore.

● Intermediate — GDPR & HIPAA

GDPR: any app collecting EU user data must: display a cookie banner, have a privacy policy, implement right-to-erasure (delete account + all data on request).
Ask Claude: "Add a GDPR-compliant cookie consent banner. Use localStorage to store consent. Don't load analytics until consent is given."
HIPAA: if your app handles US healthcare data (PHI), Claude's standard API is not HIPAA-compliant. Use Anthropic's Business Associate Agreement (BAA) tier or self-host the model.
API key rotation: set a calendar reminder every 90 days to regenerate all production API keys. Update them in Vercel environment variables.

● Advanced

Audit for accidental data leakage: ask Claude to grep your codebase for hardcoded strings matching email patterns, phone numbers, and common key prefixes (sk-, AKIA, ghp_).
Use a secrets manager: store production keys in AWS Secrets Manager or HashiCorp Vault and fetch them at runtime — never store in environment variables on shared servers.

9.2 Safer Build Prompts

Intermediate

Prompting patterns that catch security bugs at build time — baked into every Claude session so you never ship a vulnerability by accident.

● Intermediate

Add to your CLAUDE.md: "Before marking any feature complete, check for: SQL injection (parameterised queries only), XSS (sanitise all user input before rendering), CSRF (verify tokens on state-changing requests)."
At the end of any session that touches user input or authentication, ask Claude: "Run an OWASP Top 10 check on the code you wrote in this session. Report any issues."
Never accept "it's probably fine" from Claude. Require specific evidence: "Show me the line where you sanitise this input."

● Advanced

Add a PreCommit hook that runs Snyk or npm audit to check for known dependency vulnerabilities before every commit.
Create a security-audit Skill: define a checklist covering OWASP Top 10, secret detection, input validation, and authentication checks. Run it before every client delivery.
For high-value clients, add a separate "security review" session where you show Claude only the auth and payment code and ask it to act as a penetration tester trying to find flaws.

9.3 Must-Have Stack

Intermediate

The minimum viable production stack — each tool justified with a specific reason and a clear alternative if it doesn't fit your situation.

● Beginner — The Core Three

Claude Code + Antigravity: your IDE and AI pair programmer. Non-negotiable.
GitHub: version control and backup. Every project, from day one.
Vercel: hosting and CI/CD. Free tier covers most projects. Zero-config deploys.

● Intermediate — Full Stack

Supabase: Postgres database + auth + real-time. Free tier is generous. Alternative: PlanetScale (MySQL) or Railway (self-managed Postgres).
Resend: transactional email. Alternative: Postmark or SendGrid.
Stripe: payments. No real alternative for professional use.
Pinecone: vector memory for RAG. Alternative: pgvector (Supabase extension) for smaller datasets.
Only add a tool when you have a specific need for it. Don't install Pinecone on a project that doesn't need semantic search.

9.4 Monitor in Production

Advanced

What to track, how to get alerted when things break, and how to recover fast — so clients never notice downtime and you don't lose sleep over it.

● Intermediate

Add Sentry for error tracking: npm install @sentry/nextjs. Run npx @sentry/wizard for auto-configuration. Errors are now sent to your Sentry dashboard with full stack traces.
Add Vercel Analytics: enable in the Vercel dashboard for free Core Web Vitals monitoring on every page.
Set up an uptime monitor at betteruptime.com (free): add your site URL and set alerts to email/SMS if it goes down.

● Advanced

Configure Sentry alerts: send a Slack notification when an error occurs more than 10 times in 1 hour — this threshold separates a one-off bug from a real incident.
Build a recovery runbook: ask Claude to write a docs/runbook.md covering the 5 most common failure modes for your app and the recovery steps for each.
Monthly review: pull Sentry's error report for the past 30 days. Ask Claude: "Here are my top 10 errors. Prioritise them by user impact and suggest fixes."

9.5 SDK + Certification

Professional

Go beyond the GUI — the Anthropic SDK lets you build Claude directly into your own products. Certification validates your expertise to clients.

● Intermediate — First API Call

Install the SDK: npm install @anthropic-ai/sdk or pip install anthropic
Make your first call: const client = new Anthropic(); const message = await client.messages.create({model: "claude-sonnet-4-6", max_tokens: 1024, messages: [{role: "user", content: "Hello"}]})
Add tool use: define a tool as a JSON schema, pass it in the tools array, and handle the tool_use response type.

● Advanced

Add streaming: use client.messages.stream() to stream responses token-by-token to your UI — makes the app feel much more responsive.
Implement prompt caching: wrap your system prompt in a cache_control: {type: "ephemeral"} block. On cached requests, cost drops by ~90% and latency drops by ~80%.
Use the Files API: upload large documents once, get a file ID, and reference the ID in future calls instead of re-sending the content — faster and cheaper for repeat document queries.

● Professional

The Anthropic certification: check anthropic.com/courses for the current certification path and exam topics.
Stay current: follow the Anthropic changelog at anthropic.com/news and the Claude Code release notes. New features ship frequently — knowing them first gives you a competitive edge.
Build a demo app showcasing your SDK skills: streaming chat + tool use + caching. Share it on LinkedIn and GitHub — it's your most credible portfolio piece.

9.6 The Reusable Security-Audit Prompt

Advanced

One copy-paste prompt that turns Claude into a security reviewer — run it before every launch and every client delivery to catch vulnerabilities before users do.

● Intermediate — The Prompt

Save this in docs/security-audit.md and run it at the end of any build: "Act as a senior security auditor. Review this codebase for the OWASP Top 10, mapped to CWE IDs. Report each finding with file, line, severity, and a concrete fix."
Always include these three explicit checks: hardcoded secrets (API keys, tokens, connection strings in source), Row-Level Security gaps (any Supabase table without RLS or with a permissive policy), and exposed client-side keys (anything secret shipped in an app bundle).
Demand evidence, not reassurance: "For each table, show the exact RLS policy. For each secret, show whether it's in source, env, or a secrets manager."

● Advanced — Make It Routine

Turn it into a Skill or slash command so any session can run /security-audit on demand.
Run it against auth, payment, and AI-proxy code in isolation — give Claude only those files and ask it to attack them as a penetration tester.
Re-run after every dependency update: new packages introduce new CWEs. Pair with npm audit / Snyk in a PreCommit hook.
Keep an audit log: append each run's findings and fixes to docs/security-audit.md — proof of due diligence for clients and compliance.

9.7 App Store & Play Store Submission

Professional

Get your Expo app live on both stores. The submission gauntlet — builds, metadata, privacy, review — handled step by step so the first rejection isn't a surprise.

● Intermediate — Configure & Build

Set your app identity in app.json: name, slug, ios.bundleIdentifier, android.package, version, icon, and splash screen.
Create eas.json and install EAS: npm install -g eas-cli && eas login. Ask Claude: "Configure eas.json with production build profiles for iOS and Android."
Build in the cloud — no Mac needed: eas build --platform ios and eas build --platform android. EAS handles signing and certificates.
Bump the version/build number for every resubmission, or the store rejects the upload as a duplicate.

● Advanced — Privacy & Submit

Both stores require a public privacy policy URL. Ask Claude to generate a privacy policy and terms page, host them (a Vercel page works), and link them in the store listing.
Complete the data-collection disclosures: Apple's "App Privacy" nutrition label and Google Play's "Data safety" form. Declare exactly what you collect (auth email, usage data) and why.
Submit straight from EAS: eas submit --platform ios (to App Store Connect / TestFlight) and eas submit --platform android (to the Play Console).
Beta first: push to TestFlight and Play's internal testing track, run the full app on a clean device, then promote to production review.

● Professional — Pass Review

Pre-empt the common rejections: a demo login account for reviewers, no broken links, no placeholder content, and every permission prompt justified in the listing.
If an AI feature is user-facing, add content-moderation and a reporting path — both stores require it for user-generated or AI-generated content.
When rejected, paste Apple/Google's exact reason into Claude: "Here's the review rejection. Tell me precisely what to change and resubmit." Most rejections are one config fix away.

Turn This Into $$$ Professional

4 lessons · Pricing · Proposals · The Build & Sell system

10.1 Principles That Save 5 Years

Advanced

The mindset shifts that separate freelancers charging £500 for a website from consultants charging £15,000 for the same output.

● Intermediate

Sell outcomes, not deliverables. Clients don't want "a website" — they want more leads. Price based on the value of the outcome, not the hours of work.
Specialise before you generalise. Pick one industry or one problem. "AI automation for dental practices" closes faster than "I build AI stuff."
Show the process. Clients pay more when they understand what they're buying. Document your Claude workflow and use it as a sales asset.

● Advanced

The pattern worth stealing: package your most repeatable build as a productised service with a fixed scope, fixed price, and fixed delivery timeline.
Remove hourly pricing entirely. Hourly pricing punishes speed — and Claude makes you 10× faster. Value-based pricing captures that upside.
Track and report results: after every project, measure the outcome (leads generated, time saved, revenue from new site). These numbers become your next proposal's proof.

10.2 £30K–£50K Deals, Zero Outbound

Professional

How to attract large-budget AI implementation contracts through positioning and inbound — without cold emails or sales calls you didn't invite.

● Advanced

Create inbound content: document one real result you delivered with Claude (time saved, revenue generated, problem solved). Post it on LinkedIn with specific numbers.
Position the post correctly: speak to the buyer's problem, not your process. "How we cut a client's reporting time from 8 hours to 20 minutes using Claude" outperforms "Here's what Claude Code can do."
When an inbound enquiry arrives, run a discovery call. Use Granola to transcribe it. Focus entirely on understanding their problem — don't pitch until you understand it fully.

● Professional

Scope the project on the call: "What would it be worth to your business if this problem were solved?" — the answer tells you the ceiling for your proposal price.
Send the proposal within 24 hours. Use Claude to write it from the Granola meeting summary: "Read this meeting transcript. Write a proposal in our standard format. The problem is [X], our solution is [Y], the price is [Z]."
Follow-up system: day 3 — "Any questions on the proposal?", day 7 — "Still happy to jump on a call", day 14 — "Following up one last time." 80% of deals that close do so after the second or third follow-up.
Add a deadline to the proposal: "This pricing is valid for 14 days." Creates urgency without pressure.

10.3 The Build & Sell System

Professional

The complete operational playbook — from first client enquiry to invoice paid and project signed off.

● Advanced — The Pipeline

Enquiry → Discovery call (Granola records it) → brief generated by Claude → proposal written by Claude → client approves.
Invoice before starting: send a Stripe invoice for 50% upfront. Only begin work once payment clears. Non-negotiable.
Build: run the full BLAST process. Commit after each phase. Client gets a Vercel preview URL at each milestone.
Deliver: send the live URL + a Loom walkthrough + the handover doc (Claude writes this from the git log).
Invoice balance: send the remaining 50% invoice. Follow up on day 7 if unpaid.

● Professional — Pricing Framework

Discovery: £500–£1,500 for a paid discovery — research, architecture design, and a written spec. Deducted from project cost if they proceed.
Build: price based on outcome value, not hours. A 5-page lead-gen site for a professional service firm — minimum £3,000. A full app with auth, payments, and email — minimum £8,000.
Retainer: £500–£2,000/month for ongoing updates, new features, and SEO. Claude makes this highly profitable — most months you spend under 5 hours of real work per client.
Annual review: increase retainer prices by 10–15% each year. Frame it as: "We've added X, Y, Z features and your site traffic has grown Z% — here's the updated rate."

10.4 Where to Go Next

Professional

The path after finishing this course — how to keep learning in a field that moves fast, stay ahead of the curve, and compound your skills every week.

● All Levels

Join the Brightmind Academy community — 2,400+ builders sharing real projects, wins, and workflows every week.
Attend the weekly live build sessions. Watch the full process in real time, ask questions, and share your own work for feedback.
Ship something every week — even something small. Consistent output compounds faster than any amount of studying.
Follow the Anthropic changelog at anthropic.com/news. Claude Code gets significant updates monthly — new features become competitive advantages the day they ship.
Build your portfolio: take your 3 best Claude projects, document the problem, solution, and result. Post on LinkedIn and GitHub. Your portfolio is your best sales tool.

Claude Code FULL COURSEBuild & Sell

Claude Code FULL COURSE
Build & Sell