Claude Codeのスキルで、どんなコードベースも美しくインタラクティブな1ページのHTMLコースに変えます。

リポジトリに向けましょう。コードの仕組みをスクロールベースのナビゲーション、アニメーションのビジュアライゼーション、埋め込みクイズ、コードと平易な英語の並べ訳など、素敵で自己完結型のコースに戻ってきてください。

これは誰のため?

「Vibeコーダー」 — 伝統的なCS教育を受けていないのに、AIコーディングツールを自然言語で指導してソフトウェアを作る人々。

何かを作り上げた(またはGitHubで何か面白いものを見つけた)とか。それは機能します。しかし、その内部がどのように動いているのかは本当には理解していません。このスキルは、講義ではなく、実際にアプリを使ったときに何が起こるかを追跡することで教えてくれるコースを生成します。

あなたの目標は学問的ではなく実践的です:

• AIコーディングツールをより良く導く(より賢明なアーキテクチャ判断を下す)
• AIの誤りを検出する(幻覚の発見、悪いパターンの発見)
• AIが詰まったときのデバッグ(バグループからの脱却)
• エンジニアと話す際に迷うことなく

ソフトウェアエンジニアになりたいわけではありません。コーディングをスーパーパワーとして望んでいるのです。

コースの様子

Codebase to Course

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.

Who is this for?

“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:

• Steer AI coding tools better (make smarter architectural decisions)
• Detect when AI is wrong (spot hallucinations, catch bad patterns)
• Debug when AI gets stuck (break out of bug loops)
• Talk to engineers without feeling lost

You’re not trying to become a software engineer. You want coding as a superpower.

What the course looks like

The output is a single HTML file — no dependencies, no setup, works offline. It includes:

• Scroll-based modules with progress tracking and keyboard navigation

• Code ↔ Plain English translations — real code on the left, what it means on the right

• Animated visualizations — data flow animations, group chat between components, architecture diagrams

• Interactive quizzes that test application not memorization (“You want to add favorites — which files change?”)

• Glossary tooltips — hover any technical term for a plain-English definition

• Warm, distinctive design — not the typical purple-gradient AI look

How to use

As a Claude Code skill

1. Copy the codebase-to-course folder into ~/.claude/skills/
2. Open any project in Claude Code
3. Say: “Turn this codebase into an interactive course”

Trigger phrases

• “Turn this into a course”
• “Explain this codebase interactively”
• “Make a course from this project”
• “Teach me how this code works”
• “Interactive tutorial from this code”

Design philosophy

Build first, understand later