00 — Overview

Claude Code — A Visual CLI Guide

A five-class educational series that dissects every corner of the Claude Code CLI. From the anatomy of a single command to orchestrating multi-agent systems, each class builds on the last with interactive diagrams, stepped visualizers, and a scholarly parchment aesthetic.

Alpine.js SVG Diagrams CSS Custom Props Intersection Observer Vanilla JS

CLASS 01

The Command

CLASS 02

The Exchange

CLASS 03

Output

CLASS 04

Control

CLASS 05

Power Layer

01 — Design System

The Parchment Aesthetic

A warm, scholarly palette drawn from aged paper, leather bindings, and library gold. Every color serves a semantic role — rust for code, sage for interactive, slate for print, plum for user input.

Color Palette

Parchment

#f4edd9

Gold

#9a7430

Gold Bright

#c49a3c

Rust

#7a3e1e

Sage

#4a6040

Slate

#384a5a

Plum

#4a2e4a

Typography

The Quick Brown Fox

Playfair Display — Headings, section titles

The Quick Brown Fox

EB Garamond — Body text, descriptions

The Quick Brown Fox

JetBrains Mono — Code, labels, UI chrome

Core Components

components.html

Key Concept

Concept boxes highlight fundamental ideas with a gold left border. Used in every class header to frame the central lesson.

Interactive mode

Persistent REPL. Sessions saved.

Print mode -p

Query once, get output, exit.

interactive print / SDK both modes

02 — Class 01

The Command

From bash prompt to API call — this class dissects every part of a claude invocation. An SVG anatomy diagram annotates each segment with hover tooltips, while a filterable command grid separates interactive and print modes.

class-01-command.html

          cat logs.txt | claude -p "Summarize errors" --model sonnet --output-format json
        

Key Concept

Most flags only work in one mode. Knowing which you're in is always step one.

interactive claude

Start the interactive REPL in your current working directory.

print / SDK claude -p "query"

Query once and exit. The foundation of scripting.

interactive claude -c

Continue the most recent conversation.

both modes claude -r "session"

Resume a session by ID or saved name.

Open full mockup

Interactive Command Builder

--model sonnet --verbose --output-format json -p --max-turns 5 --allowedTools --continue --debug

claude "your prompt here"

03 — Class 02

The Exchange

Stateless HTTP all the way down. This class uses a 7-step visualizer to show exactly what JSON travels over the wire during a tool-using conversation. Each step updates the messages array and an annotation panel explains what happened.

class-02-exchange.html

1 Request 2 User Turn 3 Assistant 4 Execute 5 Tool Result 6 Final 7 Usage

USER messages[0]

"Fix the bug in auth.ts"

ASSISTANT tool_use messages[1]

text · "Let me read that file."
tool_use · Read · file_path: "src/auth.ts"

TOOL RESULT messages[2]

"export function login(...) {...}"

Open full mockup

Step-by-Step Message Exchange

U

User sends prompt

"Fix the authentication bug in auth.ts — tokens aren't expiring."

C

Claude thinks

Analyzing the request. I need to read auth.ts to understand the token handling logic.

T

Claude calls tool — Read("src/auth.ts")

Requesting file contents via the Read tool. The tool_use block is sent to the runtime.

R

Tool returns result

File contents arrive as a tool_result message. Claude sees the full source of auth.ts.

C

Claude responds with fix

Found it — line 42 never checks token.expiresAt. Applying the patch now via the Edit tool.

Step 0 / 5

04 — Class 03

Output & Sessions

Scripting Claude as a Unix tool. This class covers three output formats (text, json, stream-json), the -p gateway flag that unlocks them, and how conversations persist across invocations.

Gateway Flag

gateway.html

-p / --print

Print once and exit

Without -p, Claude starts a REPL. With it, Claude becomes a standard Unix filter.

--output-format --max-turns --max-budget-usd --json-schema

Format Tabs

formats.html

The login function has a validation bug on line 42. The token parameter is never checked for expiry.

Open full mockup

Session Timeline — Conversation Turns & Branching

05 — Class 04

Controlling Claude

Scoping behavior precisely — what Claude is told, which tools it can use, how much it can spend, and which directories it can see. Features a permissions ladder visualization and an interactive system prompt toggle.

Permissions Ladder

permissions.html

1 --permission-mode plan Read-only planning.

2 --disallowedTools Remove specific tools.

3 --tools "Bash,Read" Whitelist tools.

4 default (ask) Prompt before sensitive ops.

5 --allowedTools Pre-approve patterns.

6 --dangerously-skip Skip all prompts.

System Prompt Toggle

systemprompt.html

DEFAULT PROMPT (KEPT)
You are Claude Code, an AI assistant...

YOUR TEXT (APPENDED)
Always use TypeScript.

Open full mockup

Interactive Permission Levels

Level 1

Read Only

Level 2

Read + Write

Level 3

Read + Write + Execute

Level 4

Full Access (Dangerous)

Level 1 — Read Only

06 — Class 05

The Power Layer

Subagent orchestration, MCP server integrations, remote sessions, and lifecycle hooks. This class covers composing Claudes — spawning specialized agents and connecting external context.

Agent Config Schema

agents-schema.html

--agents JSON fields

description req When this subagent should be invoked.

prompt req System prompt guiding behavior.

tools opt Array of allowed tools.

model opt sonnet, opus, haiku, or inherit.

maxTurns opt Max agentic turns before auto-stop.

Integration Cards

integrations.html

MCP

--mcp-config

Load MCP servers from JSON files.

Remote

--remote

Create a web session on claude.ai.

Hooks

--init

Run initialization hooks on start.

Debug

--debug

Enable debug with category filtering.

Open full mockup

MCP Protocol Flow — Client / Server Handshake

07 — Bonus

Exostatic Project Tracker

A completely different aesthetic — dark cyberpunk with green and cyan accents. Dual-track progress cards for Static Site and Deploy App, with interactive checklists that update progress bars in real time.

plan.html

Static Site In Progress

8 / 11 complete

Build index.html done
Build about.html done
Build menu.html done
Mobile QA pass pending

Deploy App Planning

0 / 7 complete

Command Parser pending
SSH Connection pending
Nginx Config pending
SSL via Certbot pending

Open full mockup