Want to really understand how Claude Code works? Not the surface-level “it helps you write code,” but every link in its decision chain — how it receives instructions, assembles the system prompt, calls tools, manages memory, spawns sub-agents, and enforces permissions?
Claude 101 was built for exactly that.
What is it?
Claude 101 is an interactive learning site that systematically breaks down Claude Code’s complete architecture across 16 chapters. It’s not a regurgitation of the official docs, and it’s not a generic overview — every chapter goes down to the source-code level to show you how Claude Code is actually implemented.
The most distinctive thing about it is the point of view: everything unfolds from the AI’s first person. Not “how Claude Code processes a prompt,” but “you just received your first instruction.” You are the agent. You need to understand how your operating system is assembled, how your memory is persisted, how your clones work.
Core features
This isn’t just another Markdown docs site.
The annotated real source code is Claude 101’s central selling point. Each chapter is organized around a key function extracted from the actual Claude Code source — how getSystemPrompt() stitches together six layers of the system prompt, what the Agentic Loop inside queryLoop() actually looks like, how loadMemoryPrompt() decides which memories to load. The annotations alongside the code support autoplay, walking you line-by-line through the key logic like a tour guide.
The 16-chapter course at a glance
The curriculum covers every facet of Claude Code’s architecture, from the most basic prompt handling to the most obscure experimental features. In the map below, you can explore every category, chapter, and highlight layer by layer.
Starting with foundational concepts — how a prompt is received, the six-layer assembly of the system prompt, QueryEngine’s context management; then tools and execution — dynamic registration of 50+ tools, the Agentic Loop’s Think-Act-Observe cycle, and MCP’s external connectivity; then memory and knowledge — three modes of cross-session memory and ripgrep-powered code search; then extension capabilities — the Hooks event system, Skills with fork isolation, and the Plugin marketplace; finally reaching collaboration and governance — sub-agent lifecycles, the seven-stage permission waterfall, and onion-model configuration — plus a chapter dedicated to Hidden Features: KAIROS, AutoDream, Daemon, and other experimental features you may never have heard of.
Every chapter has a corresponding deep dive on the core function’s source code and design highlights you probably didn’t know about. Click the map above and explore for yourself.
Claude Code’s source structure
Claude 101’s content comes from deep reading and decomposition of Claude Code’s source. Here is the full source architecture of Claude Code — how 565+ files and 200K+ lines of code are organized:
From the largest main.tsx (the 803KB CLI entry point) to the most elegant mailbox.ts (the 16KB teammate inbox), every module has a clear boundary of responsibility. Claude 101’s 16 chapters unfold chapter by chapter along this architecture.
Tech stack
The project is built on Astro 6’s island architecture — the above-the-fold content is pure static HTML with zero JavaScript overhead; React only loads on demand when you scroll to an interactive component. Animations use Framer Motion and GSAP, styling uses Tailwind CSS. The site supports bilingual Chinese/English switching, with the language preference stored in localStorage.
Why build this?
There’s no shortage of content about Claude Code, but most of it stays at the “how to use it” level. Claude 101 tries to answer a more fundamental question: how does it work?
Once you understand the Think-Act-Observe loop of the Agentic Loop, you’ll know why Claude Code sometimes “overthinks” things. Once you understand the seven-stage Permission Waterfall, you’ll know why certain operations get blocked. Once you understand the write-retrieve-consolidate mechanics of the memory system, you’ll know why Claude Code seems to “get” you more the more you use it. And once you see the Daemon and Bridge in the Hidden Features, you get a sense of where AI coding tools are heading.
Understanding a tool’s internals is a prerequisite to using it well.
If you find this project valuable, visit Claude 101 to try it out, and feel free to leave a Star on GitHub.
Comments
0 comments