codebase-to-course — скилл для Claude Code: курс из кода
Превращает любой проект в интерактивный HTML-курс, который объясняет, как устроен код, людям без технического бэкграунда.
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-codeЧто делает codebase-to-course
Скилл читает репозиторий, разбирает, из каких частей состоит приложение и как они связаны, а на выходе собирает папку с курсом: styles.css, main.js, отдельные HTML-модули и готовый index.html. Открывается файл прямо в браузере, установка не нужна. Единственная внешняя зависимость — шрифты с Google Fonts CDN.
Курс строится по дуге от знакомого к незнакомому: сначала что делает приложение и что происходит, когда вы жмёте кнопку, потом слои кода под этим. Модулей обычно 4–6, каждый с прокруткой, анимированными схемами, встроенными квизами и переводом кода на простой язык. Отдельные модули пишутся независимо, поэтому CSS и JS не перегенерируются заново при каждой правке.
Аудитория — вайб-кодеры, которые собирают софт через ИИ и хотят понимать, что там внутри. Термины объясняются с нуля: ни жаргона без определения, ни «как вы наверняка знаете». Если дать ссылку на GitHub, скилл сначала клонирует репозиторий в /tmp/<repo-name>, и только потом начинает разбор.
Какие задачи решает
- разобраться, как устроен проект, который вы собрали с ИИ
- объяснить нетехническому человеку, что делает код
- подготовить обучающий разбор открытого репозитория с GitHub
- выучить термины, чтобы точнее ставить задачи ИИ-агентам
- заметить, где ИИ сгенерировал сомнительный код
Примеры запросов агенту
- Разбери текущий проект и сделай из него интерактивный курс
- Сделай курс по репозиторию https://github.com/user/repo
- Преврати ./my-project в обучающий проход по коду
Как установить codebase-to-course
1Через Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-code2Вручную: положить файлы
~/.claude/skills/codebase-to-course/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/codebase-to-course/
1Через Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a codex2Вручную: положить файлы
.agents/skills/codebase-to-course/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a cursor2Вручную: положить файлы
.cursor/skills/codebase-to-course/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install zarazhangrui/codebase-to-course codebase-to-course2Вручную: положить файлы
.github/skills/codebase-to-course/SKILL.md1Через Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a gemini-cli2Командой платформы
gemini skills install https://github.com/zarazhangrui/codebase-to-courseВручную: положить файлы
.devin/skills/codebase-to-course/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о codebase-to-course
Как установить codebase-to-course в Claude Code?
Выполните npx skills add zarazhangrui/codebase-to-course --skill codebase-to-course -a claude-code. Скилл встанет в ~/.claude/skills/codebase-to-course/SKILL.md.
Что делает codebase-to-course?
Разбирает кодовую базу и собирает по ней одностраничный HTML-курс: модули с прокруткой, анимированные схемы, квизы и построчный перевод кода на простой язык.
Нужны ли инструменты для сборки курса?
Нет. На выходе готовая папка с index.html, который открывается в браузере. Из внешнего подтягиваются только шрифты Google Fonts.
