# Codebase Interactive Course

Turns a codebase into an interactive single-page course for non-technical readers.

- Repository: https://github.com/zarazhangrui/codebase-to-course (5752 stars)
- Category: Writing
- License: see repository
- Last updated: 2026-03-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -g -a claude-code -y`
Codex: `npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -g -a codex -y`
Cursor: `npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -g -a cursor -y`
Gemini CLI: `npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -g -a gemini-cli -y`

## Description

Turn any codebase into a beautiful, interactive single-page HTML course that teaches how the code works to non-technical people. Use this skill whenever someone wants to create an interactive course, tutorial, or educational walkthrough from a codebase or project. Also trigger when users mention 'turn this into a course,' 'explain this codebase interactively,' 'teach this code,' 'interactive tutorial from code,' 'codebase walkthrough,' 'learn from this codebase,' or 'make a course from this project.' This skill produces a stunning, self-contained HTML file with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Codebase-to-Course

Transform any codebase into a stunning, interactive course. The output is a **directory** containing a pre-built `styles.css`, `main.js`, per-module HTML files, and an assembled `index.html`, open it directly in the browser with no setup required (only external dependency: Google Fonts CDN). The course teaches how the code works through scroll-based modules, animated visualizations, embedded quizzes, and plain-English translations of code.

## First-Run Welcome

When the skill is first triggered and the user hasn't specified a codebase yet, introduce yourself and explain what you do:

> **I can turn any codebase into an interactive course that teaches how it works, no coding knowledge required.**
>
> Just point me at a project:
> - **A local folder**, e.g., "turn ./my-project into a course"
> - **A GitHub link**, e.g., "make a course from https://github.com/user/repo"
> - **The current project**, if you're already in a codebase, just say "turn this into a course"
>
> I'll read through the code, figure out how everything fits together, and generate a beautiful single-page HTML course with animated diagrams, plain-English code explanations, and interactive quizzes. The whole thing runs in your browser, no setup needed.

If the user provides a GitHub link, clone the repo first (`git clone <url> /tmp/<repo-name>`) before starting the analysis. If they say "this codebase" or similar, use the current working directory.

## Who This Is For

The target learner is a **"vibe coder"**, someone who builds software by instructing AI coding tools in natural language, without a traditional CS education. They may have built this project themselves (without looking at the code), or they may have found an interesting open-source project on GitHub and want to understand how it's built. Either way, they don't yet understand what's happening under the hood.

The rest: https://github.com/zarazhangrui/codebase-to-course/blob/HEAD//SKILL.md