oh-my-teacher

Codebase knowledge teacher for interaction designers — 用类比、图示、渐进式深度讲解代码库知识。

Install

npx oh-my-teacher

Update

npx oh-my-teacher update

Check

npx oh-my-teacher check

Works with Claude Code, Codex, nanoPencil, and every other major AI coding harness. install sets up the skill for your harness; update pulls the latest. Run npx oh-my-teacher check to see if you're behind.

Options

| Option | Description | |--------|-------------| | --dest | Install directory (optional, auto-detects by default) | | --repo | GitHub repo (optional, uses bundled skill by default) | | --ref | Git ref (default main) | | --list | Show detected AI tools and their skill directories |

Examples

npx oh-my-teacher
npx oh-my-teacher --dest ~/.claude/skills
npx oh-my-teacher --dest ./my-skills --repo O-Pencil/skills

包含内容

• 5 个命令：/tour /teach /map /ask /quiz
• 70+ 类比库：架构、状态管理、CSS、生命周期、Git、React、TypeScript
• 设计-代码词典：Figma 术语 ↔ 代码实现 双向映射
• 渐进式教学：从表面到本质，每层锚定设计思维

命令一览

| 命令 | 用途 | |------|------| | /tour [path] | 代码库导览，像逛城市一样理解项目结构 | | /teach <topic> | 渐进式教学：Hook → 一句话 → 原理 → 深入 | | /map <component> | 设计稿 ↔ 代码实现 对照映射 | | /ask <question> | 随时问答，类比驱动的技术解答 | | /quiz [topic] | 用设计场景出题的轻松小测验 |

面向人群

• 懂 HTML/CSS 的交互设计师
• 想理解前端代码架构的设计同学
• 需要提升设计-开发协作效率的 UX/产品人员

License

MIT