Dashmotion
把一句自然语言或 Mermaid 源码变成会动的技术图：一个自包含的 HTML/SVG 文件，虚线流动、光点穿行，无需任何依赖。
证据显示该技能纯本地运行：无网络请求、无外部字体（明确使用系统等宽栈）、输出为自包含HTML，语义JSON写入临时目录不污染用户文件夹；layout.py对颜色/虚线做白名单校验防止SVG注入，并对属性转义引号；check_diagram.py明确要求机器化校验而非截图。未发现红线风险。扣分项：发布者身份未验证、仓库无安装完整性签名，外部效果面（npx timecut/ffmpeg导出）依赖外部工具但未提示其供应链风险，未满25分。
内部一致性极强：SKILL.md与references/scripts相互引用一致，layout.py有validate_graph前置校验（含组父链环检测，报告式fail-closed）、样式令牌fail-safe降级、文档化已知限制；check_diagram.py实现C1-C9确定性检测并文档化盲区。静态审查下限10分，虽无法执行验证关键路径，但按上限给满10。
触发语义清晰（描述中列出flowchart/architecture/animated/mermaid等触发词与场景），明确声明不支持的Mermaid类型（序列图等）并给出替代方案，明确声明不支持自动文字碰撞检测等限制；输出为离线自包含HTML，不依赖任何海外服务，对中国大陆网络无障碍，且保真度规则含中文标签逐字保留要求。扣分项：无真实触发案例/示例输入输出对佐证，非ASCII宽度估算（CJK 14px）未经验证，扣3分。
分层文档结构优秀（SKILL.md→模式参考→脚本契约渐进披露），带版本号2.2.4、MIT许可证、fallback路径明确。扣分项：未提供CHANGELOG、维护者归属与更新路径信息不足、无FAQ/示例图库，layout.py源码在文档中要求当黑盒对待但无独立文档说明其输出契约的边界测试，扣5分。
设计上显著优于手动绘制：确定性布局引擎+机器校验+保真度重算消除手算坐标这一主要失败源，价值主张具体。但静态审查无法确认渲染输出直接可用，无已验证的代表性输出样本，按静态上限7以内给6分。
两个确定性校验脚本（check_diagram.py/check_fidelity.py）连同layout.py完整提交，检查逻辑可独立审计和复现，事实与限制声明分离清晰。扣分项：无CI工作流或提交的测试套件证明这些脚本覆盖关键路径的执行证据，无第三方运行佐证，静态上限5以内给4分。
- 静态审查，未执行任何脚本；渲染质量与校验脚本行为均未实测。
- 发布者未经FollowSkills企业注册表验证，身份未知；维护与更新路径未在可见文件中声明。
- GIF/MP4导出路径依赖npx timecut与ffmpeg，属未审查的第三方工具链，使用前自行确认。
- 校验脚本自述盲区：文字/标签碰撞、边界20px内边距、图例位置无法机器检测，仍需人工核对。
- 非ASCII（含中文）标签宽度估算未经渲染验证，中文标签布局可能有偏差。
这个 Skill 能做什么，适合哪些场景？
Dashmotion 是一个 Claude 技能，用普通英文描述或 Mermaid 源码生成深色主题的动画技术图，输出为单个自包含 HTML 文件。它有两种模式：Flow 模式画流程、管道和状态机，Architecture 模式画系统拓扑并让请求以光点形式沿真实路径穿行。动画只用两种原生技术：stroke-dashoffset 虚线流动和 animateMotion 光点运动，不依赖任何库。内置确定性的 Python 布局引擎和结构自检脚本，保证图形不重叠、连线不穿框。输出文件几 KB 大小、矢量无限缩放、循环播放，双击即可在浏览器打开。
读取自然语言描述或 Mermaid（flowchart/graph/stateDiagram-v2）源码；判断使用 Flow 还是 Architecture 模式（Mermaid 输入会额外做逐节点/逐边的忠实性校验）；把请求解析成语义图 JSON；调用纯标准库的 scripts/layout.py 计算坐标并渲染出完整 HTML；用 scripts/check_diagram.py 检查重叠、连线穿框、动画循环接缝、越界等问题直到 0 violations；Mermaid 输入再用 check_fidelity.py 核对标签与边数。产物是一个内嵌 CSS 和内联 SVG 的单文件，含暂停按钮与 prefers-reduced-motion 支持，可选通过 timecut+ffmpeg 导出 GIF/MP4。
- 开发者想让 README 或落地页顶部有一段 Diagrid/Temporal 风格的动态架构图，替代笨重的 GIF。
- 写技术文档的人已有一张静态 Mermaid 流程图，想让它在文档里动起来而不重画。
- DevOps 工程师需要向团队展示 CI/CD 管道或 Kubernetes 微服务平台的请求路径。
- 产品演示中需要表达'请求如何在系统中流转'——光点沿真实链路从网关跳到服务再到数据库。
- 支持 reduced-motion 的可访问性要求，同时仍想要动画图示的团队。
这个 Skill 有哪些优点和局限？
- 输出零依赖：单 HTML 文件，几 KB、矢量、无限循环，任何浏览器直接打开。
- 有确定性 Python 布局引擎和机械化自检脚本（check_diagram.py、check_fidelity.py），不是靠目测保证质量。
- 可访问性内建：prefers-reduced-motion 适配、可见暂停按钮、role="img" + title/desc。
- Mermaid 转换保持拓扑与标签逐字不变，不支持的图类型（时序图等）会明确拒绝而非有损转换。
- 仅支持 Mermaid 的 flowchart/graph 和 stateDiagram-v2，时序图、类图、ER 图、甘特图不支持。
- 布局引擎和校验脚本需要 Python 3；无 Python 时走慢速手工布局回退路径。
- 官方针对 Claude Code 和 claude.ai 安装测试，其他 Agent 客户端未在来源中给出验证证据。
- 每次生成的布局略有不同，不保证像素级一致。
如何安装这个 Skill？
需要包含 Skills 的 Claude 套餐（Pro/Max/Team/Enterprise）。Claude Code：运行 npx skills add csthink/dashmotion -a claude-code -g（-g 为全局安装到 ~/.claude/skills/，去掉则装到当前项目）。claude.ai：从 GitHub Releases 下载 dashmotion.zip，在 Settings → Capabilities → Skills → + Add 上传并开启。更新用 npx skills update dashmotion -g -y。README 建议选 copy 而非 symlink 方式安装。
如何使用这个 Skill？
安装后直接用一句话触发，例如：Use dashmotion to draw a simple 3-step login flow. 或指向设计文档：use dashmotion to draw the architecture in docs/design.md。已有 Mermaid 源码可整段粘贴并说 'animate this mermaid'。生成后可用自然语言迭代：'make the auth path stand out'、'put Redis next to Postgres'。得到的 HTML 双击即可在浏览器打开；若需 GIF/MP4，README 给出了 timecut 录制命令。