Claude Code Training

An interactive, bilingual (EN/ES) platform for learning Claude Code — the official CLI from Anthropic. Built with Astro 5, xterm.js, and React islands.

Live demo: claude-code-cli-training.vercel.app

---

What is this?

A step-by-step interactive course that teaches you Claude Code from scratch. Every lesson runs inside a real terminal emulator in the browser — you type real commands, get realistic responses, and progress through the curriculum at your own pace.

No sign-up required. No LLM backend. Everything is deterministic and runs entirely client-side.

Features

• 18 lessons across 3 sections: Getting Started, Working with Claude, Power Features
• Real terminal emulator — xterm.js with ANSI colors, cursor movement, shell history
• Shell mode vs Claude mode — the UI visually distinguishes running CLI commands from inside an active Claude session
• Step-by-step sidebar — numbered steps with hints, solutions, and progress tracking
• Bilingual — English and Spanish (EN/ES) with native Astro i18n
• Progress persistence — localStorage tracks completed lessons across sessions
• No backend — 100% static, deploys anywhere

Course outline

Section	Lessons
Getting Started	Installation · Authentication · Your first session · Resuming sessions · One-shot queries
Working with Claude	Interactive mode · Keyboard shortcuts · Permission modes · Slash commands · Prompt tips · Session management
Power Features	Hooks · MCP servers · Memory & CLAUDE.md · Plan mode · Skills · Subagents · Worktrees

Stack

• Astro 5 — static output, React islands, native i18n routing
• xterm.js — real browser terminal with ANSI support
• React — interactive islands (client:only="react")
• Tailwind CSS — VSCode-inspired cc-* color palette
• Zustand — progress store with localStorage persistence
• Vercel — deployment target (static adapter)

Getting started

git clone https://github.com/davila7/claude-code-cli-training
cd claude-code-cli-training
npm install
npm run dev      # → http://localhost:4321

npm run build    # production build → dist/
npm run preview  # preview the production build

Project structure

src/
├── components/
│   ├── Terminal/       # xterm.js island (Terminal, ScriptedPty, BootSequence, ansi)
│   ├── Sidebar/        # course navigation + hints island
│   └── StepsPanel/     # per-lesson step cards island
├── content/lessons/
│   ├── en/             # 18 English MDX lesson files
│   └── es/             # 18 Spanish MDX lesson files
├── lessons/            # scripted lesson definitions (TypeScript)
│   ├── getting-started/
│   ├── cli-fundamentals/
│   └── core-features/
├── stores/progress.ts  # Zustand store
└── pages/              # Astro routes (EN at /, ES at /es/)

Authoring lessons

1. Create src/lessons/<section>/<slug>.ts exporting a Lesson object
2. Register it in src/lessons/index.ts
3. Add MDX content to src/content/lessons/en/<section>/<slug>.mdx and the ES equivalent
4. Run npm run build — Astro validates the content schema at build time

Each step defines: