← ClaudeAtlas

codebase-to-courselisted

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.
bg-szy/TOP-SKILLS · ★ 1 · AI & Automation · score 70
Install: claude install-skill bg-szy/TOP-SKILLS
# 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. - Leverage native parallel subagent dispatch and 200k+ context windows where available. ## 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 co