Codebase To Dojo — Data skill for Claude Code

Codebase to Dojo（代码道场）

基于 [zarazhangrui/codebase-to-course](https://github.com/zarazhangrui/codebase-to-course) 的增强版本。

一个 Claude Code Skill，能把**任意代码仓库**转换成一个漂亮、可交互的**单页 HTML 课程**。

指一个仓库给它，它会生成一个精致的、自包含的课程，教你代码背后的运作原理 —— 滚动导航、动画可视化、嵌入式测验、代码 ↔ 大白话对照翻译，**全部都有**。

---

🆚 进阶版 vs 原版

这个版本在原版基础上做了大量增强：

特性	原版	进阶版
输出结构	单个 HTML 文件	目录化输出（modules/*.html + build.sh 拼接）
AI 助手侧边栏	❌	✅ 内置，默认开启，上下文感知，支持 OpenAI / Claude API
目录大纲侧边栏	❌	✅ 自动从模块生成，滚动高亮，可折叠
个人笔记侧边栏	❌	✅ 选中文本直接加笔记，支持 Markdown 导出
并行构建路径	❌	✅ 复杂仓库可用 Module Briefs + 子代理并行写模块
Group Chat 动画	可选	✅ 强制（每个课程必须至少一个）
Message Flow 动画	可选	✅ 强制（每个课程必须至少一个）
Quiz 类型	基础	多种（多选、场景题、拖拽排序、找 bug）
参考文件	2 个（design-system、interactive-elements）	完整 11 个（新增 content-philosophy、gotchas、module-brief-template、build.sh、_base.html、_footer.html、main.js、styles.css）

---

🎯 目标用户

**"氛围型程序员"** —— 靠自然语言指令 AI 写代码、没有传统计算机科学背景的开发者。

你可能自己造过东西（从没看过代码），或者在 GitHub 上发现了一个很酷的开源项目想理解它的实现方式。无论哪种，你都想搞清楚**它在底层到底做了什么**。

**你的目标是实用的，不是学术的：**

• 更好地指挥 AI 编码工具（做出更聪明的架构和技术栈决策）
• 检测 AI 什么时候错了（发现幻觉、识别坏模式）
• 当 AI 卡住时能介入（跳出 bug 循环）
• 和工程师交流时不懵圈

你不想成为一个软件工程师。你想让编码成为你的超能力。

---

✨ 课程长什么样

输出是一个**目录**，包含预构建的 `styles.css`、`main.js`、每个模块的 HTML 文件，以及一个组装好的 `index.html` —— 直接在浏览器里打开就行，无需任何配置（唯一外部依赖：Google Fonts CDN）。

核心交互元素（**每个课程必须全部包含**）

元素	说明
Group Chat 动画	组件之间的 iMessage/微信风格"群聊"对话，是最具吸引力的元素之一
Message Flow / Data Flow 动画	组件之间逐步推进的数据包动画，清晰展示数据流向
代码 ↔ 大白话对照	左边真实代码（语法高亮），右边逐行解释含义，每个模块至少一个
互动测验	考"应用能力"而非"记忆力"（例："用户反馈数据过时了你先看哪"），每个模块至少一个
术语悬浮提示	鼠标悬停技术术语就显示通俗解释，每个模块首次出现时都要 tooltip

可选增强元素

• 架构图 / 层级切换 —— 一键显示/隐藏代码层
• Pattern Cards —— 设计模式卡片
• Hero Visual —— 主导视觉，占据整个屏幕，一眼教会核心概念

侧边栏功能（**全部默认开启**）

侧边栏	说明
💬 AI 助手	浮动按钮打开聊天面板，自动捕获当前模块作为上下文，支持选中文本加引用、多会话、流式输出、Stop 按钮、历史压缩
**