A Codex skill that turns any codebase into a beautiful, interactive single-page HTML course.
Point it at a repo. Get back a stunning, self-contained course that teaches how the code works — with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations.
Codex should do the work directly: inspect the repo, infer what the product does, and write a finished single-file HTML course into the workspace.
"Vibe coders" — people who build software by instructing AI coding tools in natural language, without a traditional CS education.
You've built something (or found something cool on GitHub). It works. But you don't really understand how it works under the hood. This skill generates a course that teaches you — not by lecturing, but by tracing what happens when you actually use the app.
Your goals are practical, not academic:
- Steer AI coding tools better (make smarter architectural decisions)
- Detect when AI is wrong (spot hallucinations, catch bad patterns)
- Debug when AI gets stuck (break out of bug loops)
- Talk to engineers without feeling lost
You're not trying to become a software engineer. You want coding as a superpower.
The output is a single HTML file — no dependencies, no setup, works offline. It includes:
-
Scroll-based modules with progress tracking and keyboard navigation
-
Code ↔ Plain English translations — real code on the left, what it means on the right
-
Animated visualizations — data flow animations, group chat between components, architecture diagrams
-
Interactive quizzes that test application not memorization ("You want to add favorites — which files change?")
-
Glossary tooltips — hover any technical term for a plain-English definition
-
Warm, distinctive design — not the typical purple-gradient AI look
User-installed Codex skills typically live in ~/.agents/skills/ even though bundled skills may also appear under ~/.codex/skills/.
- Copy the
codebase-to-coursefolder into~/.agents/skills/ - Open any project in Codex
- Mention
$codebase-to-courseor say: "Turn this codebase into an interactive course"
Example install:
mkdir -p ~/.agents/skills
cp -R /path/to/codebase-to-course ~/.agents/skills/codebase-to-courseIf you're already inside this repo:
mkdir -p ~/.agents/skills/codebase-to-course
cp SKILL.md README.md ~/.agents/skills/codebase-to-course/
cp -R references ~/.agents/skills/codebase-to-course/- "Turn this into a course"
- "Explain this codebase interactively"
- "Make a course from this project"
- "Teach me how this code works"
- "Interactive tutorial from this code"
This inverts traditional CS education. The old way: memorize concepts for years → eventually build something → finally see the point (most people quit before step 3). This way: build something → experience it working → now understand how it works.
Every screen is at least 50% visual. Max 2-3 sentences per text block. If something can be a diagram, animation, or interactive element — it shouldn't be a paragraph.
No "What does API stand for?" Instead: "A user reports stale data after switching pages. Where would you look first?" Quizzes test whether you can use what you learned to solve a new problem.
Each concept gets a metaphor that fits that specific idea. A database is a library with a card catalog. Auth is a bouncer checking IDs. API rate limiting is a nightclub with a capacity limit. Never the same metaphor twice.
Code snippets are exact copies from the real codebase — never modified or simplified. The learner should be able to open the actual file and see the same code they learned from.
codebase-to-course/
├── SKILL.md # Main skill instructions
└── references/
├── design-system.md # CSS tokens, typography, colors, layout
└── interactive-elements.md # Quiz, animation, and visualization patterns
Originally created by Zara Zhangrui. Forked and adapted for Codex by TMFNK.