codebase-to-course — Claude Code skill: build a course from code
Turns a repository into a single-page HTML course that walks non-technical readers through how the code works.
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-codeWhat codebase-to-course does
The skill reads a project, works out which pieces make up the app and how they talk to each other, then writes a folder containing styles.css, main.js, one HTML file per module and an assembled index.html. Open that file in a browser and the course runs, no build step. Google Fonts CDN is the only outside dependency.
Modules follow a scroll, each with animated diagrams, a quiz and code paired with a plain-language explanation. The arc goes from what the learner already knows — the product and its buttons — down into the layers underneath. Most projects need 4–6 modules; the skill warns against padding the count. Content lives apart from CSS and JS, so editing one module does not force a rewrite of the boilerplate.
Who is it for? People who build with AI prompts and want to see what is actually happening. Every concept gets defined from scratch, no jargon dropped without explanation. Hand it a GitHub URL and it clones the repo into /tmp/<repo-name> first, then starts reading.
What it helps with
- understand a project you built by prompting AI
- explain a codebase to someone without a technical background
- create a learning walkthrough for an open-source repo
- pick up the vocabulary to brief coding agents precisely
- spot where generated code looks wrong
Example prompts for the agent
- Turn this project into an interactive course
- Make a course from https://github.com/user/repo
- Explain ./my-project as an interactive walkthrough
How to install codebase-to-course
1Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-code2Manually: put the files in place
~/.claude/skills/codebase-to-course/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/codebase-to-course/
1Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a codex2Manually: put the files in place
.agents/skills/codebase-to-course/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a cursor2Manually: put the files in place
.cursor/skills/codebase-to-course/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install zarazhangrui/codebase-to-course codebase-to-course2Manually: put the files in place
.github/skills/codebase-to-course/SKILL.md1Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a gemini-cli2Platform CLI
gemini skills install https://github.com/zarazhangrui/codebase-to-courseManually: put the files in place
.devin/skills/codebase-to-course/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about codebase-to-course
How do I install codebase-to-course in Claude Code?
Run npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-code. The skill lands at ~/.claude/skills/codebase-to-course/SKILL.md.
What does codebase-to-course do?
It studies a codebase and produces a single-page HTML course: scroll-based modules, animated visualizations, embedded quizzes and side-by-side plain-English translations of the code.
Do I need any tooling to view the course?
No. The output is a directory with an index.html you open in a browser. Google Fonts is the only external resource it pulls.
