把一段教学文本/知识点/讲义/概念做成单文件 HTML 交互教学展示 app。当用户想把内容做成网页演示、交互课件、可视化讲解、教学 demo、HTML 展示页,或想用 Chart.js/ECharts 图表、Mermaid 流程图、KaTeX/MathJax 公式、SVG 示意图、交互动画把某个知识点讲清楚时使...
--- 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 写文件,对话只给路径。
don't have the plugin yet? install it then click "run inline in claude" again.
restructured original clawhub skill into implexa's 6-component format, added explicit decision points for content language, slide format, library fallback, and user clarification, documented all reference files as inputs with guidance on when to read each, formalized output contract (file naming, location, cdn verification, accessibility, quality checklist), and clarified outcome signals tied to learner understanding and technical delivery.
take raw teaching content (lecture notes, concept explanations, textbook passages, knowledge points) and transform it into a single self-contained .html file that runs instantly in any browser without server, build step, or external dependencies. the skill covers content analysis, interaction design, library selection, color theming, and assembly into a deliverable that makes abstract concepts tangible through charts, diagrams, step-by-step walkthroughs, formula visualizations, and interactive simulations. use this when a user wants to make content web-displayable, interactive, or visually explained, whether they explicitly say "teaching app" or just ask to "make a web demo of this," "visualize this section," or "turn this into an interactive slide."
references/skeleton.md: html/css/js boilerplate, ui atoms (card, button, callout, badge, grid), quality checklist.references/cdn-catalog.md: verified cdn urls for all libraries (bootcdn, staticfile, 360, npmmirror) with fallback links, grouped by library name and version.references/color-schemes.md: 6 professional color palettes (deep-space blue, academic paper, fresh mint, warm ochre, indigo business, dark neon) with css :root variables, 60-30-10 usage guidance.references/libraries.md: initialization snippets, config examples, and common pitfalls for Chart.js, ECharts, Mermaid, KaTeX, MathJax, SVG.js, Rough.js, D3, anime.js, GSAP, Highlight.js, marked, Reveal.js.references/components.md: zero-dependency interactive components (tabs, accordion, stepper, slider, quiz, glossary tooltip, toc navigation)..html file. defaults to current working directory if not specified.read the input text. identify the core concept(s), what learners should understand or be able to do after encountering the app. scan the content for claims that are abstract, multi-step, parametric, or require comparison or hands-on trial. map each claim to one of: "static text plus an image is enough," "needs step-by-step reveal," "needs a chart," "needs a diagram," "needs a formula," "needs learner interaction." only apply interaction to the latter group. do not over-engineer; interaction should serve clarity, not decorate.
input: raw teaching text. output: list of knowledge points with interaction type assigned to each (or "no interaction needed").
use the decision table to assign each point to an interaction pattern:
| content is... | interaction form | library |
|---|---|---|
| numbers, stats, trends, distributions | interactive chart | Chart.js (simple) / ECharts (complex, native) |
| flow, structure, relationship, timeline, classification tree | diagram | Mermaid |
| process, derivation, algorithm steps | stepper (step-by-step reveal) + visuals | zero-dependency stepper (components.md) + svg/canvas |
| math formula, parametric relationship | formula render + slider sync | KaTeX (standard) / MathJax (complex) + range slider |
| custom diagram, geometry, state machine | svg | native svg / SVG.js / Rough.js |
| fully custom data visualization | data-driven vector | D3 |
| entrance animation, sequential highlight, choreography | tween animation | anime.js (light) / GSAP (strong) |
| knowledge categories, multi-perspective comparison | tabs / side-by-side / accordion | zero-dependency (components.md) |
| code teaching | highlight + optional markdown render | Highlight.js + marked |
| reinforcement, self-test | instant-feedback quiz | zero-dependency quiz (components.md) |
| slide-by-slide courseware | flipbook slides | Reveal.js (only if user explicitly asks for "ppt" or "slides") |
| overall layout, responsive grid | grid, component atoms | Tailwind / Bootstrap or hand-written with color variables |
input: list of knowledge points with interaction needs. output: list of (point, form, library) tuples and library set to acquire.
prioritize zero-dependency: tabs, accordion, stepper, slider linking, quiz, toc, glossary tooltip are built-in html/css/js (see components.md). do not introduce a framework just for these. only add external libraries if you must: charts, formulas, complex diagrams, sophisticated animation. cross-reference each library with libraries.md to get correct init snippet and common gotchas. verify every library url in cdn-catalog.md before adding it to the html head. do not improvise cdn urls from memory. ensure all cdn urls point to mainland-china-accessible hosts (bootcdn, staticfile, 360, npmmirror) unless user explicitly allows international cdns.
input: library set from step 2, cdn-catalog.md, libraries.md.
output: list of <script> and <link> tags with verified cdn urls, and init code snippets.
choose one of the 6 palettes from color-schemes.md based on subject domain and tone (deep-space blue for tech, academic paper for formal, fresh mint for friendly, warm ochre for creative, indigo business for corporate, dark neon for cutting-edge). copy its :root css block into the html <style>. all colors must use var(--name) references, never hard-code hex. observe 60-30-10: primary color and accent color are the "salt," do not carpet-fill the background with color. apply color scheme to mermaid, echarts, and other library outputs so they match the page.
input: subject/tone, color-schemes.md.
output: :root variable block, color-matched component styles, library-specific color config.
use skeleton.md as the structural foundation (it includes generic ui atoms: card, button, callout, badge, grid). drop your content sections and interaction code into the body. ensure all js is inline (no external .js files). ensure all css is in a single <style> block. use the Write tool to write the final .html file to disk. do not paste the entire source into the conversation; instead, provide the file path and a one-sentence summary ("this app explains entropy using an interactive heat-map chart (ECharts) and a three-step process stepper, color scheme deep-space blue"). after assembly, run through the quality checklist at the end of skeleton.md: double-click opens the file, no console errors, all links (cdn and internal anchors) work, responsive on mobile, color contrast meets wcag aa, no fabricated data or citations.
input: content, interaction code, styles, cdn tags, color scheme.
output: single .html file, path, summary.
if user provides chinese teaching content: default ui language to chinese (labels, headings, button text). preserve content tone and terminology. if text mixes languages, follow the majority.
if user asks for "slides" or "ppt" or "flipbook": use Reveal.js (only then). otherwise, do not include reveal; a teaching app is typically a single scrolling page with sections, not a slide deck.
if content has multiple scenarios or "what-if" branches: use tabs, accordion, or side-by-side comparison (zero-dependency components.md) to show alternatives without clutter.
if user specifies a color scheme by name or preference: use that. else pick one that fits the subject (science/math → deep-space blue, formal lecture → academic paper, kids/friendly → fresh mint).
if a library url fails to load (cdn timeout, mainland-china block): fall back to the secondary url listed in cdn-catalog.md, or prompt user to provide a vpn/proxy. do not attempt to bundle libraries locally; this breaks the single-file constraint.
if the content is mathematical or formula-heavy: default to KaTeX (faster, lighter, works well for standard math). use MathJax only if content includes complex amsmath environments or non-standard symbols.
if the content describes a sequential process or multi-step algorithm: use a stepper component (zero-dependency, see components.md) with visual aids (svg or diagram) at each step. do not use reveal.js for this; steppers are more appropriate.
if the user only provides a vague brief ("make it interactive" without specifying what form): ask clarifying questions: "what's the hardest part for learners to grasp?" "would learners benefit more from seeing a visualization, or stepping through a process?" base interaction choice on the answer, not on impulse.
if the content includes code snippets: use Highlight.js (library.md) for syntax highlight. if user wants markdown rendering of code blocks, also include marked. strip any sensitive credentials from example code.
if result set is empty or data is sparse: communicate this in the app (e.g., "no data available for this scenario" callout). never fabricate placeholder data or statistics to fill white space.
if a chart or diagram has no natural data: simplify to a conceptual svg or a text diagram (mermaid); do not force a chart where a simple illustration suffices.
deliverable: one .html file, written to disk via the Write tool.
file naming: kebab-case reflecting the topic (e.g., entropy-explained.html, photosynthesis-steps.html, supply-demand-curves.html). no timestamps or version numbers in filename.
file format: valid html5, all css and js inlined, no external stylesheets or script files except cdn <link> and <script> tags in the <head>. doctype is <!DOCTYPE html>. charset is utf-8.
location: user-specified path, or current working directory if not specified. response must include full path (e.g., /Users/alice/teaching-apps/entropy-explained.html).
cdn urls: all external resources loaded via mainland-china-accessible cdn (bootcdn, staticfile, 360, npmmirror). urls verified against cdn-catalog.md. fallback urls included in comments if primary cdn is blocked.
color variables: all colors via :root css custom properties, never hard-coded hex or rgb. color scheme applied to library outputs (mermaid, echarts, highlight.js) so they match page palette.
responsive design: app adapts to mobile (320px width minimum) without horizontal scroll. fonts, spacing, chart height scale appropriately.
interaction code: all interactive components either zero-dependency (pure html/css/js) or via verified cdn library. no build step, no node_modules, no preprocessor.
accessibility: color contrast wcag aa or higher, semantic html5 tags, alt text on images and diagrams, keyboard navigation for interactive elements (tab order, arrow keys for steppers/tabs).
no fabricated content: all data, citations, examples, and formulas come from the input text or common knowledge. uncertain claims marked with "[citation needed]" or omitted entirely.
quality checklist (from skeleton.md): double-click on the file opens it in browser, no console errors, all cdn links load (test in incognito mode), responsive on iphone 6 and desktop, no missing fonts or broken layout, color scheme consistent, interaction responsive (no lag, no dead buttons).
.html file in file explorer opens it in the default browser, fully rendered, no build step or server required.