motion-figure
Installation
SKILL.md
动态图表
制作会运动或响应输入的图表。支持 Claude、Cursor、Codex、OpenClaw、Hermes 和所有读取 SKILL.md 的 agent。
| 层级 | 产物 | 使用位置 |
|---|---|---|
| 1. 课程图 | 声明式 SMIL 动画，或重绘 SVG 的滑块组件，均通过 figure 围栏挂载 | 课程内 |
| 2. 机制图 | 展示真实系统部件的 HTML 面板，读者操作一个控件并阅读计算结论 | 独立页面、README、文章、课程外站点页面 |
| 3. 抖色场 | 使用纸张、强调色和墨色的 WebGL 有序抖点条带，支持四种固定种子运动 | 页头和节间分隔 |
课程运行时限制严格，所以第 1 层规则最多。第 2、3 层有独立参考文件。
适用情况
- 课程解释随时间变化的过程，例如 token 经过阶段、队列填充、循环重复。
- 一个输入改变公式输出，例如学习率、温度、分块大小、批大小。
- 作者要求图表动画、滑块或交互。
- 页面需要读者改变一个条件，观察缓存、队列、上下文窗口或路由器的行为：用第 2 层。
- 页面需要课程配色的缓慢动态页头：用第 3 层。