Skill: junwugit/teaching-app-builder (version 1.0.0)

--- name: teaching-app-builder description: 把一段教学文本/知识点/讲义/概念做成单文件 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，配色专业，交互服务于理解。 ## 四条核心原则 1. **单文件自洽**——所有代码在一个 `.html` 里，双击即开，不需要服务器、不需要 `npm`、不需要构建。外部只有 CDN 链接。 2. **CDN 必须国内可达**——库一律从 BootCDN / staticfile / 360 / npmmirror 引；URL 从 `references/cdn-catalog.md` 取（已逐条验证），不要凭记忆拼地址。 3. **交互为理解服务**——交互的唯一目的是让抽象可操作、过程可单步、对比可并置、因果可试错。讲得清的别加动效，动效不是目的。 4. **忠于原文**——把输入文本讲清楚、讲生动，但不编造原文没有的事实、数据、研究、引文。不确定的留白或标注，不要造。 ## 工作流（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 写文件，对话只给路径。


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)