Get the weekly radar
One short email with the freshest products, every week.
A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course for non-technical vibe coders.
Grounded in available product and source data
A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML course.
Point it at a repo. Get back a stunning, self-contained course that teaches how the code works — with scroll-based navigation, animated visualizations, embedded quizzes, and code-with-plain-English side-by-side translations.
"Vibe coders" — people who build software by instructing AI coding tools in natural language, without a traditional CS education.
You've built something (or found something cool on GitHub). It works. But you don't really understand how it works under the hood. This skill generates a course that teaches you — not by lecturing, but by tracing what happens when you actually use the app.
Your goals are practical, not academic:
You're not trying to become a software engineer. You want coding as a superpower.
The output is a single HTML file — no dependencies, no setup, works offline. It includes:
codebase-to-course folder into ~/.claude/skills/This inverts traditional CS education. The old way: memorize concepts for years → eventually build something → finally see the point (most people quit before step 3). This way: build something → experience it working → now understand how it works.
Every screen is at least 50% visual. Max 2-3 sentences per text block. If something can be a diagram, animation, or interactive element — it shouldn't be a paragraph.
No "What does API stand for?" Instead: "A user reports stale data after switching pages. Where would you look first?" Quizzes test whether you can use what you learned to solve a new problem.
Each concept gets a metaphor that fits that specific idea. A database is a library with a card catalog. Auth is a bouncer checking IDs. API rate limiting is a nightclub with a capacity limit. Never the same metaphor twice.
Code snippets are exact copies from the real codebase — never modified or simplified. The learner should be able to open the actual file and see the same code they learned from.
codebase-to-course/
├── SKILL.md # Main skill instructions
└── references/ ├── design-system.md # CSS tokens, typography, colors, layout └── interactive-elements.md # Quiz, animation, and visualization patterns
Built by Zara with Claude Code.
