Finally, a manual for the code you vibe-coded into existence

What it does

This is a Claude Code skill — a bundle of instructions and design references — that tells Claude how to turn a repository into a single, self-contained HTML course. The output teaches how the code actually works through scroll-based modules, side-by-side plain-English translations, animated data-flow diagrams, and quizzes that test application rather than memorization. It is built for “vibe coders”: people who use AI coding tools to ship software without a traditional CS background.

The interesting bit

The pedagogy inverts the traditional CS curriculum. Instead of memorizing concepts first and building later, the skill assumes you already built something with AI and now need to reverse-engineer how it functions. Every metaphor is bespoke to the specific concept — a database is a library card catalog, auth is a bouncer — and the code snippets are exact, unmodified copies from the source repo so learners can map the lesson directly to the files.

Key highlights

• Single HTML file output with no external dependencies; runs fully offline.
• Heavy visual emphasis: at least 50% of every screen is non-text (animations, diagrams, interactive elements).
• Quizzes ask practical questions (e.g., “A user reports stale data after switching pages. Where would you look first?”) rather than trivia.
• Glossary tooltips define technical terms in plain English on hover.
• Original code only: snippets are verbatim from the codebase, not simplified or sanitized.

Caveats

• This is strictly a Claude Code skill, not a standalone tool; you must be inside the Claude Code ecosystem to use it.
• The README does not mention limits on codebase size, language diversity, or how the skill handles monorepos versus small projects.

Verdict

Worth a look if you are vibe-coding with AI and tired of cargo-culting fixes you do not understand. Skip it if you already read raw source code comfortably or if you do not use Claude Code.