把「技术解释内容」编译成 animated SVG。零强制依赖，Python 3 标准库。
状态：v1 开发中。框架已搭，
terminal+chat_ui双场景 demo 已验证。templates/和styles/尚未全部落地，不建议作为 published skill 使用。平台说明：animated SVG 在浏览器和文档站中播放正常。GitHub README 的渲染器 会裁剪 CSS 动画，建议在 README 中放静态 PNG 预览。
npx skills add statefulai/motion-graph -g在任意 AI 宿主（Claude、Cursor、Codex 等）的对话中：
@motion 展示 tech-report 的安装和使用流程，两个场景：
场景1 终端安装，场景2 在 Claude 里触发 @report
或使用步骤列表：
@motion
- 安装: npx skills add statefulai/motion-graph -g
- 触发: 在 Claude 里输入 @motion
- 输出: animated SVG 文件
| 类型 | 适用场景 | v1 状态 |
|---|---|---|
terminal |
安装命令、CLI 操作、脚本执行 | ✅ 验证 |
chat_ui |
在 Claude/Cursor/Codex 中的使用演示 | ✅ 验证 |
step_flow |
Quick Start 步骤、操作路径 | 🔲 开发中 |
architecture |
系统架构、插件关系 | v1.1 |
pipeline |
数据处理流程、构建管线 | v1.1 |
| 依赖 | 是否必须 | 用途 |
|---|---|---|
| Python 3.8+ | ✅ | 核心渲染 |
cairosvg |
可选 | pip install cairosvg — PNG 导出（飞书/Notion 用） |
接口已预留，v1 先专注模板实现。集成协议见 SKILL.md。
| 宿主 | 安装路径 | 触发方式 |
|---|---|---|
| Copilot CLI | ~/.agents/skills/ |
@motion |
| Claude Code | ~/.claude/skills/ |
@motion |
| Cursor | ~/.cursor/skills/ |
@motion |
| Codex | ~/.codex/skills/ |
@motion |
MIT