Install
openclaw skills install teaching-app-builderteaching-app-builder
把一段教学文本/知识点/讲义/概念做成单文件 HTML 交互教学展示 app。当用户想把内容做成网页演示、交互课件、可视化讲解、教学 demo、HTML 展示页，或想用 Chart.js/ECharts 图表、Mermaid 流程图、KaTeX/MathJax 公式、SVG 示意图、交互动画把某个知识点讲清楚时使用。产出单个 .html 文件（浏览器双击即开、无需服务器或构建），库通过中国大陆可访问的 CDN（BootCDN/staticfile/360/npmmirror）引用，内置 6 套专业配色方案。即使用户只说"做个网页/做个演示/可视化一下这段内容/把这章做成交互的"而没有明说"教学 app"，只要意图是把知识内容做成可交互的展示页面，也应使用本 skill。
Teaching App Builder：文本 → 单文件交互教学 App
把一段教学内容变成一个可双击打开的 HTML 文件：所有 HTML/CSS/JS 内联其中，需要的库走中国大陆 CDN，配色专业，交互服务于理解。
四条核心原则
- 单文件自洽——所有代码在一个
.html里，双击即开，不需要服务器、不需要npm、不需要构建。外部只有 CDN 链接。 - CDN 必须国内可达——库一律从 BootCDN / staticfile / 360 / npmmirror 引；URL 从
references/cdn-catalog.md取（已逐条验证），不要凭记忆拼地址。 - 交互为理解服务——交互的唯一目的是让抽象可操作、过程可单步、对比可并置、因果可试错。讲得清的别加动效，动效不是目的。
- 忠于原文——把输入文本讲清楚、讲生动，但不编造原文没有的事实、数据、研究、引文。不确定的留白或标注，不要造。
工作流（5 步）
1. 读懂文本，定教学目标
这段内容的核心概念是什么？学完要能理解什么、会做什么？逐点判断：哪些"静态文字+一张图"就讲清了，哪些"非交互不可"（过程演化、参数因果、需要亲手试、需要并置对比）。只给后者做交互。
2. 把内容映射到交互形态
用下面的决策表，把每个知识点落到一种交互形态：
| 内容是…… | 交互形态 | 用什么 |
|---|---|---|
| 数值 / 统计 / 趋势 / 分布 | 可交互图表 | Chart.js（简单）/ ECharts（复杂、国产生态） |
| 流程 / 结构 / 关系 / 时序 / 分类树 | 图解 | Mermaid |
| 过程 / 推导 / 算法步骤 | 步骤器（分步揭示）+ 配图 | 零依赖 stepper（components.md）+ SVG/Canvas |
| 数学公式 / 含可调参数的关系 | 公式渲染 + 滑块联动 | KaTeX（常规）/ MathJax（复杂）+ range 滑块 |
| 自定义示意图 / 几何 / 状态机 | SVG 绘制（草图感加手绘） | SVG.js / 原生 SVG / Rough.js |
| 完全自定义的数据可视化交互 | 数据驱动 SVG | D3 |
| 元素入场 / 依次点亮 / 演示编排 | 补间动画 | anime.js（轻）/ GSAP（强） |
| 知识点分类 / 多观点对照 | 标签页 / 左右并置 / 手风琴 | 零依赖（components.md） |
| 代码教学 | 高亮 +（可选）Markdown 渲染 | Highlight.js + marked |
| 巩固 / 自测 | 即时反馈测验 | 零依赖 quiz（components.md） |
| 一页页翻的课件 | 翻页幻灯 | Reveal.js（仅当明确要"PPT/幻灯"） |
| 整体排版 / 响应式 | 栅格 / 现成组件 | Tailwind / Bootstrap，或只用配色变量手写 |
3. 选库——最小集
能零依赖就零依赖：标签页、手风琴、步骤器、滑块联动、测验、目录导航、术语提示，纯 HTML/CSS/JS 就做得好（references/components.md），别为它们引框架。确实需要图表/公式/图解/复杂动画时，才按 references/libraries.md 引——每个库给了即用片段和易错坑。引入的库必须真的用上。
4. 选配色方案
按学科语境从 references/color-schemes.md 选一套（深空蓝/学术纸张/清新薄荷/暖阳赭橙/靛青商务/暗夜霓虹），把它的 :root 段贴进去。6 套共用一套变量名，颜色全走 var(--…)。遵守 60-30-10：主色和点缀色是"盐"，不要大面积铺。
5. 组装单文件 + 自检
以 references/skeleton.md 的骨架为地基（它自带通用 UI 原子：card/btn/callout/badge/grid，省得从零写样式），填入内容与交互，用 Write 工具写出文件，然后逐条过 skeleton.md 末尾的质量清单。
输出约定
- 写成一个
.html文件，文件名用 kebab-case 反映主题（如entropy-explained.html、photosynthesis-steps.html），不要含日期。 - 默认写到当前工作目录；用户指定了路径就用用户的。不确定放哪就先问一句，或放当前目录并在回复里给出完整路径。
- 不要把整份 HTML 源码贴进对话——用 Write 工具写文件，对话里只给路径 + 一两句说明"这个 app 讲什么、关键交互是什么、用了哪几个库、哪套配色"。
- 默认界面语言跟随输入文本（中文内容→中文 UI）。
渐进式披露：何时读哪个文件
不要一上来把所有 reference 全读。按需 Read：
| 你正要…… | 读 |
|---|---|
| 拼任何一个 CDN 链接 / 加载 fallback / Tailwind 国内方案 | references/cdn-catalog.md |
| 选/贴配色，或让图表-Mermaid 配色和页面统一 | references/color-schemes.md |
| 用某个库（Chart.js/ECharts/Mermaid/KaTeX/D3/SVG/动画/代码/Reveal）需要正确初始化片段 | references/libraries.md |
| 做标签页/步骤器/手风琴/滑块联动/测验/目录/术语提示等零依赖交互 | references/components.md |
| 开新文件要骨架、或交付前过质量清单 | references/skeleton.md |
典型一次生成会读 2–4 个：skeleton（地基）+ color-schemes（选色）+ libraries/components（按选用的交互）+ 需要时 cdn-catalog（核对 URL）。
常见反模式（别犯）
- ❌ 为一个手风琴引整个 Bootstrap、为几个间距引整个 Tailwind——能零依赖就零依赖。
- ❌ 凭记忆写 CDN URL（库名大小写、版本号极易错）——查 cdn-catalog.md。
- ❌ 满屏炫动效却没讲清概念——交互必须服务理解。
- ❌ 大段正文上彩色、主色铺满背景——破坏专业感，守 60-30-10。
- ❌ 编造原文没有的"数据/研究/事实"来撑满图表——宁可少做交互，不可造假。
- ❌ Chart.js 的 canvas 不放固定高度容器（页面会被无限撑高）——见 libraries.md。
- ❌ 把几百行 HTML 源码糊进对话——Write 写文件，对话只给路径。