SkillCharged
Claude Code Crash Course
AI Coding CLI
Claude Code
CLI
VS Code
Context Management
Skills
MCP
Sub-Agents

Claude Code Crash Course (2026): The Complete CLI & Agentic Coding Masterclass

Guided by Nitin Khatri (Lead Software Architect & Designer)
Reviewed by Sarah Miller (Principal AI Engineer, Reviewer)
Updated August 16, 2026
45 min
Level: Beginner

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)
Core Concept

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

Traditional Approach:Isolated web sandbox; requires manual copying and pasting of files.
Claude Code:Native terminal & editor process with direct access to your local git repository and file tree.

Tool Calling & Shell Execution

Traditional Approach:Generates static markdown code blocks without ability to run them.
Claude Code:Natively runs bash commands, builds packages, runs linters, and inspects visual file diffs.

Context & Workflow Control

Traditional Approach:Single monolithic chat thread prone to context degradation over long tasks.
Claude Code:Fine-grained token control (`/context`, `/clear`), `CLAUDE.md` global memory, and isolated sub-agents.

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 / TriggerWhat It Does
claudeLaunch interactive Claude Code agent session in the current directory
/modelSwitch between available reasoning models (Opus, Sonnet, Haiku)
/contextInspect active context window token breakdown (system, tools, messages)
/clearReset active conversation tokens while preserving persistent CLAUDE.md rules
! <command>Run a direct shell command within the Claude Code session
Shift + TabCycle execution modes: Normal (Ask) β†’ Accept Edits β†’ Plan Mode β†’ Auto Mode
/initScan the active repository and auto-generate an initial CLAUDE.md memory file
claude mcp addInstall and configure a Model Context Protocol server
Module 1

Getting Started: Installation & Workspace Setup

Module Learning Goal

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

Try this prompt in your agent:
$ curl -fsSL https://claude.ai/install.sh | bash
What you will see on screen:
βœ“ Downloading Claude Code CLI binary... βœ“ Installed claude to /usr/local/bin/claude βœ“ Version: Claude Code v1.0.42 ready.
Under the hood:This command installs the Claude Code binary globally. Once installed, verify the setup by running `claude --version`.

2Step 2: Initialize Workspace & Authenticate

Try this prompt in your agent:
$ mkdir coin-tracker && cd coin-tracker && claude
What you will see on screen:
Claude Code CLI Working directory: ~/Projects/coin-tracker Model: Claude 3.7 Sonnet | Context Window: 200,000 tokens Status: Ready for prompts. Type /help for options.
Under the hood:Your current working directory defines the root scope Claude Code can access. If it is your first time, run `/login` to link your Anthropic account.

3Step 3: (Recommended) Open in VS Code Extension

Try this prompt in your agent:
$ code . && [Command Palette -> 'Claude Code: Open in New Tab']
What you will see on screen:
βœ“ Claude Code visual panel connected to active VS Code workspace.
Under the hood:Using the VS Code extension provides side-by-side file navigation, syntax-highlighted visual diffs, and clickable image uploads.

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

⚑
Quick Model Switching:Type `/model` in the prompt bar anytime to switch between reasoning models depending on the complexity of your task.

Hands-On Practice Checklist

Try each of these steps on your computer and check them off as you complete them:

Module 2

Internal Tool Calling, Visual Diffs & Execution Modes

Module Learning Goal

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

Try this prompt in your agent:
$ Create a Node.js script in index.js that fetches the top 5 crypto prices from CoinGecko API and prints a formatted console table.
What you will see on screen:
Running tool: bash (ls -la) -> Directory empty. Running tool: write (index.js) [Diff Propose] +75 lines green ? Approve proposed changes? (y/n/always)
Under the hood:Notice the agent runs internal tools sequentially. It investigates directory contents first, generates the script, and pauses for your approval before writing to disk.

2Step 2: Inspect the Visual Diff & Approve

Try this prompt in your agent:
$ Press 'y' to approve -> Press 'y' to run script
What you will see on screen:
βœ“ File index.js created. Executing: node index.js β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ (index) β”‚ Name β”‚ Price β”‚ 24h Change β”‚ β”œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€ β”‚ 0 β”‚ 'Bitcoin' β”‚ '$68,450' β”‚ '+2.4%' β”‚ β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”΄β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ βœ“ Script verified successfully.
Under the hood:Claude Code shows clean diffs: additions in green, deletions in red. It then offers to execute the script immediately to verify the runtime output.

3Step 3: Direct Shell Execution with '!'

Try this prompt in your agent:
$ ! node index.js
What you will see on screen:
Direct shell execution completed without adding conversation tokens.
Under the hood:Prefix any command with `!` to run quick terminal tasks directly within the session without invoking LLM reasoning tokens.

Do: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

πŸ”„
Cycle Execution Modes with Shift + Tab:Press `Shift + Tab` to cycle through: Normal (asks permission) β†’ Accept Edits (auto-approves file writes) β†’ Plan Mode (dry-run planning) β†’ Auto Mode.

Hands-On Practice Checklist

Try each of these steps on your computer and check them off as you complete them:

Module 3

Permissions, Security Rules & Multi-Level Scoping

Module Learning Goal

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

Try this prompt in your agent:
$ /permissions
What you will see on screen:
Permissions Configurator: [1] Allow (Auto-run without asking) [2] Ask (Always prompt for human confirmation) [3] Deny (Hard block tool execution) Target: Project Settings (.claude/settings.json)
Under the hood:Configure rules via the visual menu or directly edit `.claude/settings.json` in your repository.
.claude/settings.json (Project-Scoped Security Rules)json

Configures 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:

Module 4

Context Window Hygiene, /clear & CLAUDE.md Memory

Module Learning Goal

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

Try this prompt in your agent:
$ /context
What you will see on screen:
Context Window Usage: - Total: 28,450 / 200,000 tokens (14.2% used) - System & Tools: 18,200 tokens - Conversation History: 10,250 tokens
Under the hood:Run `/context` frequently to monitor token utilization across tools, files, and chat messages.

2Step 2: Auto-Generate CLAUDE.md with /init

Try this prompt in your agent:
$ /init
What you will see on screen:
Scanning repository structure... Detected: Vite + React + TypeScript βœ“ Created CLAUDE.md with detected build scripts, architecture patterns, and conventions.
Under the hood:The `/init` command scans package.json, file trees, and readme files to synthesize your initial repository guide.

3Step 3: Reset Session Context Between Features

Try this prompt in your agent:
$ /clear
What you will see on screen:
βœ“ Context cleared. Loaded persistent instructions from CLAUDE.md (180 tokens). Ready for next feature.
Under the hood:After finishing and committing a feature, run `/clear`. The AI wipes transient chat history while instantly retaining all rules from `CLAUDE.md`.
CLAUDE.md (Permanent Repository Guidelines)markdown

Claude 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

πŸ’‘
Modular Context Linking:You can keep `CLAUDE.md` lightweight by referencing sub-files like `@context/coding-standards.md` or `@context/api-spec.md`.

Hands-On Practice Checklist

Try each of these steps on your computer and check them off as you complete them:

Module 5

Collaborative Plan Mode: Dry-Run Architectural Refactoring

Module Learning Goal

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

Try this prompt in your agent:
$ [Shift + Tab until prompt shows: 'Plan Mode']
What you will see on screen:
Mode: PLAN MODE (Read-only reasoning enabled; file edits disabled)
Under the hood:In Plan Mode, Claude Code can read files and run harmless inspection commands, but cannot mutate code.

2Step 2: Request an Architectural Refactoring Plan

Try this prompt in your agent:
$ Inspect @src/App.tsx. How can we refactor the data fetching to eliminate prop drilling? Provide 2 architectural options.
What you will see on screen:
Analyzing App.tsx & component tree... Option 1: Extract state into a custom `useCryptoPrices` hook (Recommended - 0 new deps). Option 2: React Context Provider. ? Which approach would you like to plan for? (1/2)
Under the hood:The agent asks clarifying questions to align on your preferred architectural strategy.

3Step 3: Review the Auto-Generated Plan & Execute

Try this prompt in your agent:
$ Select Option 1 -> Review plan -> Select 'Auto Accept'
What you will see on screen:
βœ“ Generated refactoring plan: plan-refactor-hooks.md - Create src/hooks/useCryptoPrices.ts - Update src/App.tsx to consume hook - Run test suite to verify 0 regressions βœ“ Exiting Plan Mode -> Executing refactoring steps.
Under the hood:Once you approve the plan, Claude Code exits Plan Mode and executes the agreed-upon steps cleanly.

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:

Module 6

Reusable Skills Engineering & Git Commit Playbooks (/)

Module Learning Goal

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

Try this prompt in your agent:
$ Create a project-scoped skill called commit-msg that reads staged git diffs, formats conventional commit messages, and commits.
What you will see on screen:
βœ“ Created .claude/skills/commit-msg/SKILL.md βœ“ Skill registered with slash command /commit-msg and natural trigger phrases.
Under the hood:Claude Code writes the YAML frontmatter and step-by-step instructions into your `.claude/skills/` directory.

2Step 2: Trigger the Skill in Natural Language

Try this prompt in your agent:
$ git add . && claude: 'write a commit message'
What you will see on screen:
Executing Skill: commit-msg Reading staged diff (+42 lines in src/hooks)... Proposed Commit: feat(hooks): extract crypto fetching into useCryptoPrices hook - Colocates state in dedicated custom hook - Eliminates prop drilling across App component ? Commit with this message? (y/n)
Under the hood:The skill activates seamlessly whether you type `/commit-msg` or simply say 'write a commit message'.
.claude/skills/commit-msg/SKILL.mdmarkdown

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:

Module 7

Extending Capabilities with MCP & Playwright Browser QA

Module Learning Goal

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

Try this prompt in your agent:
$ claude mcp add --scope user playwright npx @modelcontextprotocol/server-playwright
What you will see on screen:
βœ“ MCP Server 'playwright' added to user scope configuration. βœ“ Restart Claude Code session to activate new tools.
Under the hood:User-scoped MCP servers become available across all projects on your machine.

2Step 2: Run an Automated In-Browser UI Test

Try this prompt in your agent:
$ Launch our dev server, open localhost:5173 with Playwright MCP, star the first cryptocurrency, click 'Favorites Only', and take a screenshot.
What you will see on screen:
Running tool: browser_navigate (http://localhost:5173) Running tool: browser_click (selector: [data-star-btn]) Running tool: browser_click (selector: #filter-favorites) Running tool: browser_snapshot βœ“ Verified: Only starred item (Bitcoin) is displayed. βœ“ Snapshot saved to .playwright/snapshot-favorites.png
Under the hood:The agent launches a headless or visual browser, executes user interactions, validates UI state, and saves verification screenshots.

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:

Module 8

Isolated Sub-Agents for Zero-Context Code Reviews

Module Learning Goal

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

Try this prompt in your agent:
$ Use the explore sub-agent to map data flow in our project: where does API data enter, and which components consume it?
What you will see on screen:
Spawning sub-agent 'explore' (isolated token context)... Reading package.json -> Inspecting App.tsx -> Tracing hooks/useCryptoPrices.ts βœ“ Data Flow Map: 1. CoinGecko API -> fetched via useCryptoPrices hook 2. Consumed by CoinTable & SearchFilter components 3. State isolated in App.tsx (0 tokens leaked to main context).
Under the hood:All file reads happen inside the sub-agent's private context window. Your main conversation context remains pristine.

2Step 2: Run Custom Code Reviewer Sub-Agent

Try this prompt in your agent:
$ Review my uncommitted changes with the code-reviewer agent
What you will see on screen:
Spawning sub-agent 'code-reviewer'... Scanning git diff... βœ“ Review Report: - [Warning] Stray console.log on line 24 of useCryptoPrices.ts - [Suggestion] Add aria-label to favorite star toggle button - Overall Quality: High (0 critical issues).
Under the hood:The sub-agent returns an actionable audit report without modifying files or cluttering chat history.
.claude/agents/code-reviewer.md (Custom Sub-Agent)markdown

Sub-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

πŸ›‘οΈ
Zero-Context Pollution:Use sub-agents for any exploratory search, dependency audit, or test evaluation to keep your main conversation fast and token-efficient.

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.

Download Rules Pack (.zip)

Ready to Take Your Skills Further?

Explore our developer guides, reference playbooks, and video courses to keep leveling up.