어떤 코드베이스도 아름답고 상호작용적인 단일 페이지 HTML 강의로 바꿔주는 클로드 코드 기술입니다.

저장소를 향해 보세요. 스크롤 기반 내비게이션, 애니메이션 시각화, 내장 퀴즈, 코드와 평문 영어 번역 등 코드가 어떻게 작동하는지 가르치는 멋지고 독립적인 강좌를 다시 받으세요.

이건 누구를 위한 거야?

“Vibe 코더” — 전통적인 컴퓨터 과학 교육 없이 자연어로 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