ai-engineering-from-scratch-zh is a Chinese-language adaptation of a course that teaches AI engineering by implementing algorithms, tools, and agents from the ground up. It is for learners following a 20-stage path across mathematics, machine learning, agent systems, and production topics, with lessons using Python, TypeScript, Rust, and Julia. The catalogue entries provide agent skills and instructions associated with the course.
Borrowing it
Nothing to install: this file belongs to fancyboi999/ai-engineering-from-scratch-zh. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/fancyboi999/ai-engineering-from-scratch-zh/main/.claude/skills/motion-figure/SKILL.mdgit clone --depth 1 https://github.com/fancyboi999/ai-engineering-from-scratch-zhWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/motion-figure)<a href="https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/motion-figure"><img src="https://agentmods.dev/badge/skills/fancyboi999/ai-engineering-from-scratch-zh/motion-figure/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/fancyboi999/ai-engineering-from-scratch-zh/motion-figure"><img src="https://agentmods.dev/badge/skills/fancyboi999/ai-engineering-from-scratch-zh/motion-figure.svg" alt="Reviewed on agentmods" width="80" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00098 | $0.02856 |
| Opus 5.5 | $0.00039 | $0.01142 |
| Sonnet 5.5 | $0.00020 | $0.00571 |
| Haiku 4.5 | $0.00010 | $0.00286 |
Grade A, and why
motion-figure scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 156 lines — stays where its author put it; the contents beside it link to each section on GitHub.
动态图表
制作会运动或响应输入的图表。支持 Claude、Cursor、Codex、OpenClaw、Hermes 和所有读取 SKILL.md 的 agent。
| 层级 | 产物 | 使用位置 |
|---|---|---|
| 1. 课程图 | 声明式 SMIL 动画，或重绘 SVG 的滑块组件，均通过 figure 围栏挂载 | 课程内 |
| 2. 机制图 | 展示真实系统部件的 HTML 面板，读者操作一个控件并阅读计算结论 | 独立页面、README、文章、课程外站点页面 |
| 3. 抖色场 | 使用纸张、强调色和墨色的 WebGL 有序抖点条带，支持四种固定种子运动 | 页头和节间分隔 |
课程运行时限制严格，所以第 1 层规则最多。第 2、3 层有独立参考文件。
适用情况
- 课程解释随时间变化的过程，例如 token 经过阶段、队列填充、循环重复。
- 一个输入改变公式输出，例如学习率、温度、分块大小、批大小。
- 作者要求图表动画、滑块或交互。
- 页面需要读者改变一个条件，观察缓存、队列、上下文窗口或路由器的行为：用第 2 层。
- 页面需要课程配色的缓慢动态页头：用第 3 层。
使用其他技能的情况
- 固定结构，无时间轴与输入：使用
blueprint-figure静态图。 - 有独立状态模型与机器几何的完整讲解页：使用
isometric-explainer。 - 只需配色、字体或写作规则：使用
course-style。本技能把必要部分复制到references/tokens.md。
方法
-
用一句话说明图中唯一的变化。需要两句话时拆成两张图。
-
选层级。课程内用第 1 层。第 2 层读取
references/mechanism-figures.md，从templates/mechanism.html开始。第 3 层读取references/dither-fields.md，复制templates/dither.js。以下步骤针对第 1 层：时间是变量时用动画，数值是变量时用滑块。 -
使用 kebab-case 名称，例如
request-path、context-budget。先查注册表，同名后注册模块会替换先前图表。 -
代码放进
figures-<topic>.js，用 IIFE 包裹，读取window.LF，不存在则立即返回。 -
图函数签名为
function (host, cfg)，向 host 添加一个.lf卡片，可返回清理函数。 -
卡片包含
.lf-head（大写.lf-label和短提示）、.lf-body、.lf-cap图注。 -
SVG 使用
viewBox="0 0 520 H"，通常 H 为 200 至 250，单条形可更矮。 -
添加 title 和 desc，ID 只创建一次，放在渲染函数外。
-
动画先入场，再进入一个慢循环，逐项遵守
references/smil-rules.md。 -
滑块先定义
state._render，再调用 LF.slider 或 LF.select，最后调用一次state._render()。 -
模块末尾用
LF.register({ 'your-name': fn })注册。 -
课程 Markdown 加围栏，首行为名称，后面可带 JSON：
```figure context-budget {"windowK": 32} ``` -
完成检查清单，在浅色、深色、375px 宽度和减少动态效果设置下查看。
页面如何挂载图表
- Markdown 解析器把围栏转为
<div class="lesson-figure" data-figure="name {json}">。 - 构建器扫描课程中的图名，找到含该带引号名称的模块并写清单。找不到提供者则停止构建。
- 页面按固定顺序只加载该课需要的模块。新文件排在已列文件后，按字母序加载。
- 挂载函数将第一个词作为名称，剩余内容解析为 JSON，失败则 cfg 为空对象。
- 图函数抛错时，运行时清空宿主并记录 warning，课程其他部分继续渲染。
- 挂载后补充缺少的 title、desc、role=img 和控件标签。有 SMIL 时添加暂停按钮，有一次性动画时添加重播按钮。
- 离开视口、标签页隐藏或读者点击暂停时停止动画。减少动态效果或打印时显示静态帧。
全部运行时函数与两个完整示例见 references/toolkit.md。
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 156 lines · 98 tokens per session scan A 7107f429cc7c
motion-figure is a skill published in the GitHub repository fancyboi999/ai-engineering-from-scratch-zh (1,276 stars, last pushed 4d ago), licensed MIT. It adds 98 tokens to every session and 2,856 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-10-20.
Other skills, from other repositories
thinking-prompts
A collection of 12 reusable thinking frameworks in English and Chinese for clarifying questions, learning unfamiliar ideas, solving problems, making decisions, and considering personal direction.
playwright
Use when the task requires capturing or automating a real browser from the terminal.
skill-release-gate
Evaluate an Agent Skill bundle for structural integrity, trigger quality, artifact improvement, script correctness, safety, installed-tree integrity, and target-host portability before release.
migration-review
Review database migration files when a change adds or modifies paths under migrations/. Use it before merge to collect forward, rollback, locking, and data-safety evidence.
skill-safety-reviewer
Review a skill-requested filesystem, command, network, secret, or destructive action against an explicit sandbox policy without executing it.
quiz
Create strict JSON single-answer multiple-choice quizzes.