Turning codebases into interactive courses for people who build with AI but never studied CS

There is a growing population of builders who ship real software using AI tools but have never taken a computer science course. They can get a working app out the door, but when something breaks in a way the AI cannot fix, they are stuck. They do not understand what their code is actually doing.

I built a Claude Code skill that takes any codebase and transforms it into an interactive single-page course that teaches how the code works to someone with no CS background.

How it works

The skill runs in four phases. Phase one is codebase analysis: it reads all key files, traces data flows, and identifies the “cast of characters” (the main components and how they communicate). Phase two designs a curriculum of four to six modules following a fixed arc: start from user-facing behavior, zoom inward toward the engine.

For complex codebases, an intermediate phase writes module briefs with pre-extracted code snippets. This is a critical token-saving step: the agents that write individual modules never need to read the full codebase. They work from briefs.

Phase three builds the output: a directory of HTML module files, a shared stylesheet, a JavaScript file, and a build script that assembles everything into a single index.html. Phase four opens it in a browser for review.

The design constraints that made it work

Every module must include five interactive elements: group chat animations (iMessage-style conversations between components), message flow animations showing data moving through the system, code-to-English translation blocks, a quiz, and glossary tooltips for every technical term.

The quizzes test application, not memorization. “You want to add a favorites feature. Which files change and why?” forces the learner to demonstrate they understand the architecture, not just recall a definition.

The visual design is deliberately warm (no cold whites or blues), uses Bricolage Grotesque for headings and JetBrains Mono for code, and never reuses metaphors across modules. The “restaurant” metaphor for APIs is explicitly banned. Every module gets its own analogy drawn from the specific domain of the codebase.

Why this matters

The skill has a clear audience: the “vibe coder” who built something real and now needs to understand it. But it also surfaces a deeper question about AI-assisted development. If AI can build the code and AI can explain the code, what is the developer’s role?

My answer: the developer is the person who decides what to build and verifies that it works. Both of those require understanding. And right now, the gap between “can ship with AI” and “understands what shipped” is wider than most people realize. This tool is one attempt to close it.