Claude Code skills dropped quietly but they're already spawning a new category of tooling. codebase-to-course hit 2,100+ stars this week by doing one thing really well: it's a skill you drop into ~/.claude/skills/, point at any codebase, and Claude generates a fully self-contained HTML course that teaches you how that code actually works. No server, no build step, no dependencies — one HTML file. That's the pattern worth stealing.
What Claude Code Skills Actually Are
If you haven't looked at Claude Code's skill system yet, here's the short version: skills are structured instruction sets that live in ~/.claude/skills/<skill-name>/. Claude Code picks them up automatically and makes them available as natural language commands in any project. Think of them like reusable system prompts, but scoped to your dev environment and composable with your actual codebase context.
The codebase-to-course skill lives in that folder and gets triggered by phrases like:
"Turn this codebase into an interactive course"
"Explain this codebase interactively"
"Teach me how this code works"
Claude then reads your repo, builds a mental model of the architecture, and outputs a single HTML file with scroll-based navigation, animated data-flow visualisations, code-to-plain-English side-by-side panels, interactive quizzes, and glossary tooltips. The output is genuinely good — not the usual AI slop.
Installation is literally:
# Clone the skill into your Claude skills directory
git clone https://github.com/zarazhangrui/codebase-to-course ~/.claude/skills/codebase-to-course
# Open any project in Claude Code and run
# "Turn this codebase into an interactive course"
The HTML Output Pattern Is the Real Idea
The single-file HTML output is underrated. No React, no bundler, no npm install — just a file you can email, commit, open in a browser, or serve from S3. The course includes:
- Scroll-based modules with keyboard nav and progress tracking
- Code ↔ Plain English panels — real source on the left, what it does on the right
- Animated component diagrams — data flow drawn as actual animations, not static images
- Application-focused quizzes — not "what does useState do" but "you want to add favourites, which files change"
For Next.js/TypeScript projects specifically, this is a great fit. Your app/ directory structure, server components, API routes — Claude can trace request flows and render them visually in a way that's actually useful for onboarding new team members or your future self.
The skill's prompt engineering is worth reading directly. It instructs Claude to trace user journeys through the code rather than document files in isolation — which is why the output feels like a course rather than auto-generated docs.
Forking and Customising the Skill
The skill folder structure is straightforward:
~/.claude/skills/codebase-to-course/
├── skill.md # Main skill instructions and prompt
├── templates/ # HTML/CSS/JS templates for the output
└── examples/ # Sample outputs for reference
The skill.md file is the core — it's the structured prompt that tells Claude how to analyse a repo and what to generate. You can fork this and customise it for your specific use case. Want the output to focus on security patterns? Add that to the analysis instructions. Want the quiz questions to be harder? Adjust the difficulty framing. Want it to generate Markdown instead of HTML? Swap the output template.
For TypeScript shops, I'd add something like this to the skill instructions to get better architectural coverage:
## TypeScript-specific analysis
- Identify and explain key type definitions and interfaces
- Show how generics are used in context, not in isolation
- Trace API route handlers from request to response
- Flag any patterns that deviate from standard Next.js conventions
The skill system is just files — there's no API to register against, no platform to publish to. You modify the markdown, save, and Claude picks it up next session.
What I'd Build With This
Internal team onboarding tool. Every time we merge a significant feature, run the skill against the diff-affected files and generate a micro-course. Commit the HTML to a /docs/courses/ folder. New devs get interactive walkthroughs of real production code instead of stale Confluence pages.
Open source documentation layer. Fork the skill, tune it to generate a course specifically for library consumers (not contributors), and wire it into a GitHub Action. Every release tag triggers a course generation and publishes to GitHub Pages. Better than a changelog, more useful than a README.
AI pair programming training tool. The quiz format — "you want to add X, which files change?" — is exactly the mental model you need to steer Claude Code effectively. Build a skill that generates these quizzes specifically for your own codebase, run it monthly, use it to stay sharp on a repo you haven't touched in a while.
The Claude Code skill pattern is going to produce a lot of tooling over the next few months. codebase-to-course is the first one I've seen that's genuinely production-quality out of the box — the HTML output is clean, the educational structure is solid, and the install is under a minute. Worth having in your skills directory regardless of whether you build on top of it.