Course Roadmap: What We'll Build & Learn
A comprehensive developer guide to Anthropic's Claude Code: setup, terminal & VS Code integration, internal tool calling, context & CLAUDE.md memory, Plan Mode refactoring, custom skills, MCP browser QA, and isolated sub-agents.
What You Need Before Starting:
- Node.js (v18+) and Git installed on your Mac, Windows, or Linux system
- VS Code or your preferred terminal code editor
- Anthropic Claude account (free tier works for initial setup)
What is Claude Code? The Terminal-First AI Agent Explained
Why Claude Code transforms local software engineering beyond web chatbots.
Claude Code is Anthropic's agentic coding tool built specifically for software developers. Instead of copy-pasting code back and forth between a web browser and your editor, Claude Code runs directly in your terminal or inside your VS Code integrated environment.
Under the hood, Claude Code is equipped with internal tool-calling capabilities: it can read files, write new modules, perform regex searches across the repository, execute shell commands, and run test suites automatically.
This masterclass takes you from installation to pro workflowsβteaching you how to refactor projects, maintain clean token context, create custom skills, connect MCP servers, and use sub-agents to review your code.
Traditional Methods vs. Claude Code
Execution Environment
Tool Calling & Shell Execution
Context & Workflow Control
The 6 Core Superpowers We Will Master
Terminal & VS Code Extension
Run directly in your CLI or through a clean visual side panel inside VS Code.
Internal Tool Execution
Automated bash execution, file reading, precision edits, and repository-wide grep searches.
Collaborative Plan Mode
Explore architectural tradeoffs and generate implementation blueprints without touching code.
Context & CLAUDE.md Memory
Lock in persistent repository guidelines, coding standards, and architectural conventions.
MCP & Playwright Browser QA
Connect external tools via Model Context Protocol to test live web UI and take visual snapshots.
Isolated Sub-Agents
Spawn child agents with dedicated token windows to review uncommitted code and audit dependencies.
Quick Cheat Sheet: Essential Commands
Keep these core syntax triggers handy as you follow the walkthrough modules below:
| Command / Trigger | What It Does |
|---|---|
claude | Launch interactive Claude Code agent session in the current directory |
/model | Switch between available reasoning models (Opus, Sonnet, Haiku) |
/context | Inspect active context window token breakdown (system, tools, messages) |
/clear | Reset active conversation tokens while preserving persistent CLAUDE.md rules |
! <command> | Run a direct shell command within the Claude Code session |
Shift + Tab | Cycle execution modes: Normal (Ask) β Accept Edits β Plan Mode β Auto Mode |
/init | Scan the active repository and auto-generate an initial CLAUDE.md memory file |
claude mcp add | Install and configure a Model Context Protocol server |
Getting Started: Installation & Workspace Setup
Install Claude Code CLI, authenticate your account, and choose between the native terminal and VS Code extension workflows.
To start coding with Claude Code, you can run it directly in your operating system terminal or embed it inside VS Code. In this module, you will install the CLI, configure your active working directory, and understand the startup dashboard.
1Step 1: Install Claude Code Globally via Terminal
$ curl -fsSL https://claude.ai/install.sh | bash2Step 2: Initialize Workspace & Authenticate
$ mkdir coin-tracker && cd coin-tracker && claude3Step 3: (Recommended) Open in VS Code Extension
$ code . && [Command Palette -> 'Claude Code: Open in New Tab']Do:Launch Claude Code inside the specific project folder
Always `cd` into your project root before starting Claude Code so the agent correctly anchors relative paths and git history.
Avoid:Running Claude Code in your root home directory
Avoid starting sessions from `~` because the agent would have to scan thousands of unrelated home files, wasting tokens.
Pro Tip for Beginners
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Internal Tool Calling, Visual Diffs & Execution Modes
Understand how Claude Code uses internal tools (bash, read, edit, write), inspect visual diffs, and toggle approval modes.
When you ask Claude Code to build a feature, it does not just write textβit acts as an autonomous agent using internal tools. It checks directories with `bash`, inspects code with `read`, and proposes precision diffs with `edit` and `write`.
1Step 1: Run Your First Implementation Prompt
$ Create a Node.js script in index.js that fetches the top 5 crypto prices from CoinGecko API and prints a formatted console table.2Step 2: Inspect the Visual Diff & Approve
$ Press 'y' to approve -> Press 'y' to run script3Step 3: Direct Shell Execution with '!'
$ ! node index.jsDo:Review diffs carefully before accepting
Check the proposed red/green changes to confirm the agent is modifying the intended lines without introducing unintended regressions.
Avoid:Enabling blanket auto-approval on production codebases
Avoid 'always allow edits' during sensitive refactors; keep explicit human-in-the-loop approval active.
Pro Tip for Beginners
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Permissions, Security Rules & Multi-Level Scoping
Configure allow, ask, and deny permissions to secure your environment across project and user scopes.
As an autonomous agent with terminal access, Claude Code must adhere to strict safety boundaries. You can define granular permission rules stored in `.claude/settings.json` so the agent never deletes files or pushes git branches without explicit consent.
1Step 1: Open the Interactive Permissions Matrix
$ /permissionsConfigures automatic execution for test suites while mandating manual approval for git push operations.
{
"permissions": {
"ask": [
"bash:git push*",
"bash:npm publish*"
],
"deny": [
"bash:rm -rf*",
"bash:drop database*"
],
"allow": [
"bash:npm test*",
"bash:npm run lint*"
]
}
}Do:Hardcode 'deny' for destructive shell commands
Add `bash:rm -rf*` to your deny list so the AI cannot accidentally wipe project directories.
Do:Understand the 3 Scope Levels
Local (`.gitignore` private rules) vs. Project (`.claude/` shared with team) vs. User (`~/.claude/` shared across your entire machine).
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Context Window Hygiene, /clear & CLAUDE.md Memory
Manage session token consumption and establish permanent repository conventions using CLAUDE.md memory files.
Every interaction, tool execution, and file read consumes tokens in the active context window. If context gets too full, the AI can lose track of subtle details. In this module, you will learn the 'Feature-by-Feature' workflow and how `CLAUDE.md` preserves global memory across session resets.
1Step 1: Check Active Token Consumption
$ /context2Step 2: Auto-Generate CLAUDE.md with /init
$ /init3Step 3: Reset Session Context Between Features
$ /clearClaude Code automatically injects `CLAUDE.md` into every new session and after every `/clear`.
# Project Guidelines & Coding Standards ## Build & Test Commands - Dev Server: `npm run dev` - Run Tests: `npm test` - Type Check: `npx tsc --noEmit` ## Architecture & Code Conventions - Framework: React 19 + TypeScript with strict typing (zero `any`). - Modularity: Keep state colocated in custom hooks; avoid deep prop drilling. - Styling: Tailwind CSS utilities with designated semantic theme tokens. - Git: Use Conventional Commits (`feat:`, `fix:`, `refactor:`).
Do:Build feature-by-feature and clear context
Implement a feature (20k-40k tokens), verify tests, commit changes, and run `/clear` before beginning the next task.
Avoid:Letting context bloat over 150k tokens
Avoid running day-long uninterrupted sessions in a single thread, as excessive context reduces reasoning accuracy.
Pro Tip for Beginners
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Collaborative Plan Mode: Dry-Run Architectural Refactoring
Use Plan Mode to evaluate refactoring proposals, eliminate prop drilling, and review execution blueprints before making code changes.
When refactoring existing codebases or planning major features, you do not want the AI immediately rewriting files. Plan Mode allows Claude Code to explore code, answer questions, compare architecture tradeoffs, and write a structured execution plan before writing a single line of code.
1Step 1: Switch to Plan Mode with Shift + Tab
$ [Shift + Tab until prompt shows: 'Plan Mode']2Step 2: Request an Architectural Refactoring Plan
$ Inspect @src/App.tsx. How can we refactor the data fetching to eliminate prop drilling? Provide 2 architectural options.3Step 3: Review the Auto-Generated Plan & Execute
$ Select Option 1 -> Review plan -> Select 'Auto Accept'Do:Use Plan Mode for any task touching 3+ files
Plan Mode prevents circular refactors and ensures clean component boundaries before modifying code.
Avoid:Vibe coding large structural changes
Never allow blind multi-file rewrites without reviewing an architectural plan first.
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Reusable Skills Engineering & Git Commit Playbooks (/)
Create permanent, project-scoped skills (SKILL.md) with natural trigger phrases and slash commands.
If you find yourself repeatedly typing the same multi-step instructions (e.g. formatting conventional commits, generating API mocks, running release checklists), you can turn that workflow into a reusable Skill.
1Step 1: Ask Claude to Create the Skill
$ Create a project-scoped skill called commit-msg that reads staged git diffs, formats conventional commit messages, and commits.2Step 2: Trigger the Skill in Natural Language
$ git add . && claude: 'write a commit message'Permanent reusable skill definition file (`SKILL.md`).
--- name: commit-msg description: Generates standardized Conventional Git Commit messages from staged diffs. triggers: - "write a commit message" - "generate commit" - "/commit-msg" --- # Operational Workflow 1. Run `git diff --staged`. If nothing is staged, prompt the user to stage changes first. 2. Read the staged diff and determine change type (`feat`, `fix`, `refactor`, `docs`, `chore`). 3. Format message: - Header: `<type>(<scope>): <short imperative subject>` - Body: Bullet points explaining WHAT changed and WHY. 4. Run `git commit -m "<formatted message>"` upon approval.
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Extending Capabilities with MCP & Playwright Browser QA
Connect external tools via Model Context Protocol (MCP) and run automated in-browser UI validation with Playwright.
Model Context Protocol (MCP) is an open standard that connects Claude Code to external tools, live databases, and browsers. In this module, you will install the Playwright MCP server, allowing Claude Code to open your web app in a browser, click buttons, test responsive layouts, and capture screenshots.
1Step 1: Install the Playwright MCP Server
$ claude mcp add --scope user playwright npx @modelcontextprotocol/server-playwright2Step 2: Run an Automated In-Browser UI Test
$ Launch our dev server, open localhost:5173 with Playwright MCP, star the first cryptocurrency, click 'Favorites Only', and take a screenshot.Common Beginner Pitfall & How to Fix It
What happens: MCP server tools not appearing in current session
How to solve it: After adding an MCP server with `claude mcp add`, restart your Claude Code tab to initialize the server connections.
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Isolated Sub-Agents for Zero-Context Code Reviews
Spawn lightweight sub-agents (.claude/agents/) to perform deep code exploration and quality audits without bloating your main session tokens.
When working on large repositories, having the main agent scan dozens of files can quickly consume your context window. Sub-agents solve this by spinning up an independent, isolated session to inspect code, map dependencies, or find dead codeβreturning only a concise final summary to your main chat.
1Step 1: Use the Built-In 'explore' Sub-Agent
$ Use the explore sub-agent to map data flow in our project: where does API data enter, and which components consume it?2Step 2: Run Custom Code Reviewer Sub-Agent
$ Review my uncommitted changes with the code-reviewer agentSub-agent specification file (`.claude/agents/code-reviewer.md`).
--- name: code-reviewer description: Read-only reviewer that audits uncommitted git changes for performance, dead code, and accessibility. --- # Review Checklist 1. Inspect only uncommitted changes via `git diff`. 2. Flag unused imports, stray `console.log` statements, or missing React `key` props. 3. Check for accessibility regressions (missing `aria-label` or image `alt` tags). 4. Return a structured severity report (Critical, Warning, Suggestion) without modifying any code.
Pro Tip for Beginners
Hands-On Practice Checklist
Try each of these steps on your computer and check them off as you complete them:
Crash Course Starter Files & Templates
Claude Code Developer Starter & Rules Pack
Includes copyable `CLAUDE.md` project templates, `.claude/settings.json` security rules, `commit-msg` skill playbooks, and `code-reviewer` sub-agent blueprints.