# codebase-to-course

Turns a repository into a single-page HTML course that walks non-technical readers through how the code works.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 5728
- Author: zarazhangrui
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/zarazhangrui/codebase-to-course/tree/HEAD/SKILL.md
- Updated: 2026-03-30
- HTML: https://affpapa.org/en/nevibecode/skills/codebase-to-course

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/codebase-to-course/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/codebase-to-course/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/codebase-to-course/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/codebase-to-course/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install zarazhangrui/codebase-to-course codebase-to-course
```

2. **Manually: put the files in place**
- File: `.github/skills/codebase-to-course/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/zarazhangrui/codebase-to-course
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/codebase-to-course/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/zarazhangrui/codebase-to-course/tree/HEAD/SKILL.md

## When to use it
- 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
- Turn this project into an interactive course
- Make a course from https://github.com/user/repo
- Explain ./my-project as an interactive walkthrough

## Similar
- [grill-with-docs](https://affpapa.org/en/nevibecode/skills/grill-with-docs.md) — skill · 1219756 installs
- [skill-creator](https://affpapa.org/en/nevibecode/skills/skill-creator.md) — skill · 414180 installs
- [setup-matt-pocock-skills](https://affpapa.org/en/nevibecode/skills/setup-matt-pocock-skills.md) — skill · 1052851 installs
- [handoff](https://affpapa.org/en/nevibecode/skills/handoff.md) — skill · 1038491 installs
- [triage](https://affpapa.org/en/nevibecode/skills/triage.md) — skill · 990453 installs
- [domain-modeling](https://affpapa.org/en/nevibecode/skills/domain-modeling.md) — skill · 876391 installs

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md