# Codebase to Course A [[Claude Code]] skill that transforms any codebase into a self-contained, interactive single-page HTML course. Created by Zara Zhang. Targets "vibe coders" who build software by prompting AI tools without formal CS training; helps them steer AI better, detect hallucinations, debug effectively, and communicate with engineers. ## How It Works (4 Phases) 1. **Codebase Analysis** -- reads README, entry points, source files to extract components, user journeys, APIs, data flows, engineering patterns. Accepts local folders, GitHub URLs, or CWD 2. **Curriculum Design** -- structures 5-8 modules following: product overview > component intro > inter-component communication > external systems > engineering patterns > debugging/failure > full architecture 3. **Build** -- generates a single self-contained HTML file (embedded CSS + JS, zero dependencies). One module at a time, then polish pass 4. **Review** -- opens in browser for feedback ## Key Features - Code-to-English translation blocks (side-by-side real source code with plain English explanations) - Animated data flow visualizations (step-by-step packet/message flow) - Group chat animations (iMessage-style conversations between components) - Interactive architecture diagrams (hover/click to explore) - Quizzes (multiple-choice, scenario-based, drag-and-drop) - Glossary tooltips on every technical term - "Spot the bug" challenges - Single file, zero dependencies, mobile responsive, offline-capable ## Design System - Fonts: Bricolage Grotesque (display), DM Sans (body), JetBrains Mono (code) - Palette: warm off-white `#FAF7F2`, warm gray text `#2C2A28`, dark code blocks `#1E1E2E` with Catppuccin-inspired syntax highlighting - Accent: vermillion `#D94F30` (default) ## Installation Copy `codebase-to-course/` folder to `~/.claude/skills/`, then trigger with "Turn this into a course" or "Teach me this codebase". ## References - Source code: https://github.com/zarazhangrui/codebase-to-course ## Related - [[Claude Code]] - [[Large Language Models (LLMs)]]