用途：把已经画好并评审过的静态 SVG 图表做成讲解动画或幻灯片。动画会放大图表缺陷，因此图表不存在或尚未评审时，应先用 illustration-draw / mermaid-draw 绘制，再用 diagram-review 评审，然后才动画化。不适用于 UI 微交互、应用 CSS、屏幕或终端录制。
主要能力：一份动画定义产出三种结果。animate.py 向静态 SVG 写入 CSS 关键帧（可在任意浏览器和 README 的 <img> 中播放）；capture.mjs 用系统 Chrome 加载同一文件，按帧设定精确时间并截图，因此 GIF/MP4 是确定性的，不会与 SVG 漂移。时序来自设计系统的 motion tokens，换主题也会改变动效。播放顺序基于 renderers 输出的 data-step / data-kind 属性：标题打字 → 分组淡入 → 卡片落位 → 连接线绘制、箭头随线到达 → 步骤徽章弹出 → 注释 → 强调色最后填充 → 停留。
预设：reveal（默认）用于任意图表；pipeline 用于宽幅从左到右的流程图，标题固定，镜头跟随最新步骤并最终回到总览（源图画在 2400×630 画布上）；build 用于 arch_svg.py 生成的分层架构，类似 PowerPoint 构建，镜头先看第一层，其他层先做幽灵显示，从左到右逐层聚焦（堆叠层从上到下），连接线随较晚的端点到达，镜头在新层开始时才拉宽，最后停在整张图上，每拍一步（--beat-ms，默认 600），建议用 MP4。配合 pipeline_svg.py 讲解器时，pipeline 逐行播放代码面板、依次播放标注、逐块构建仪表盘、增长时间条，并在进入下一步前等待当前步骤内容。
使用方式：仅生成 SVG 无额外依赖；GIF/MP4 需要 Node ≥ 22.12、Chrome 或 Chromium、ffmpeg（gifsicle 可选）。命令：python3 "${CLAUDE_SKILL_DIR}/scripts/animate.py" diagram.svg --out diagram.anim.svg --gif diagram.gif --mp4 diagram.mp4 [--preset pipeline --frame-width 1200] [--canvas social|square|wide] [--design-system design-system.md]。--canvas 会把 GIF/MP4 填充到 1200×627、1080×1080 或 1920×1080。首次运行 GIF 需要 --allow-install，会在 ~/.cache/diagram-skills/ 对固定 lockfile 执行 npm ci --ignore-scripts（仅 puppeteer-core，不下载浏览器），需先询问再加该参数。幻灯片用 deck.py：python3 "${CLAUDE_SKILL_DIR}/scripts/deck.py" a.anim.svg b.anim.svg --out deck.html，加 --mp4 可输出每个幻灯片构建过程的 1080p 视频。
输出与限制：产出 .anim.svg（静态 SVG 加一个 <style> 块，含 prefers-reduced-motion 规则）、.gif、*.mp4（H.264、yuv420p）以及 *.last.png。交付时给出路径、时长和文件大小；不要提交或推送。总时长受 motion.max-seconds 限制，长图用更紧凑的错开而非更长片段，建议 10 秒内。GIF 体积随面积×帧数增长，1200px 宽、≤6 秒约 1MB；LinkedIn 和 X 优先 MP4，README 和 Slack 用 GIF。截图时 Chrome 禁用所有 DNS，网络字体和远程图片无法加载，图表必须自包含。动画后的 SVG 不要用 diagram-review 检查（pipeline 镜头轨道本就比画框宽），应检查静态 SVG。其他功能、收费与平台信息暂未提供。