Agent skill · writing content · aradotso
codebase-to-course
codebase-to-course — an agent skill for coding agents.
Why this skill is useful
Adds a complete executable workflow to generate interactive HTML courses from codebases, enhancing AI's capability to teach coding concepts.
What it needs
Requires git installed locally. About 7k tokens when loaded. Last updated 2026-07-09. 70 stars on the source repository.
What this skill does
bash Clone the repo git clone https://github.com/zarazhangrui/codebase-to-course Install the skill cp -r codebase-to-course/codebase-to-course ~/.claude/skills/ ~/.claude/skills/codebase-to-course/ ├── SKILL.md # Main skill instructions Claude reads └── references/ ├── design-system.md # CSS tokens, typography, colors, layout rules └── interactive-elements.md # Quiz, animation, visualization code patterns "Turn this codebase into an interactive course" "Teach me how this code works" "Make a course from this project" "Explain this codebase interactively" "Turn this into a course and save it as docs/tutorial.html" Module 1: What Does This App Actually Do? → The "user journey" — what happens when someone uses it → Architecture overview diagram (animated) Module 2: The Pieces (Components/Files/Services) → What each major piece does in plain English → How they talk to each other (group chat visualization) Module 3: The Data → What gets stored, where, in what shape → Data flow animation (user action → processing → storage → response) Module 4: [Feature-specific modules] → Real code snippets with side-by-side plain English → Quizzes on applying the concept Module 5: Now You Can... → What you can now do better (steer AI, debug, talk to engineers) → Glossary of all technical terms used css / Core design tokens Claude uses / :root { --bg: #faf9f7; / Warm off-white background / --text: #1a1916; / Near-black text / --accent: #d4651f; / Warm orange accent / --accent-light: #f5e6d8; / Light accent for highlights / --mono: 'JetBrains Mono', monospace; --sans: 'Inter', system-ui, sans-serif; } html <!-- Claude generates quizzes like this — testing application, not memory --> <div class="quiz-block" data-quiz-id="unique-id"> <p class="quiz-question"> A user reports stale data after switching pages. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aradotso/codebase-to-course