作者 Anatomy 介绍视频的 10 秒片段，展示可交互的涡扇发动机与发电站机械结构。
演示视频关于这个 Skill
Anatomy 是 Ryan 开发、采用 MIT 许可的 Agent Skill，通过实体机械的运作解释技术概念。缓存键可以对应一把锁，共享资源可以对应一台服务多个工位的机器。Agent 构建有体积的等轴测零件，为插画添加标题与实时读数，再让动作与底层模型关联。仓库包含绘图库、示例源码与浏览器检查脚本。
为什么推荐
适合解释系统如何运作：把概念对应到可辨认的机械结构，再让动作和数值由同一个模型驱动。建议从一项交互和真实参数开始。封面是作者介绍视频的 10 秒压缩片段，画廊复用官方仓库截图。
适合用来做什么
- 需要在文档和文章中解释算法、基础设施或系统行为的技术作者。
- 希望在产品页面或 React 应用中加入交互式说明插画的前端开发者。
- 希望通过机械运动和模型驱动的数值演示原理的教育者。
选择 SVG、WebGL 或 3D 输出
细致的 SVG 机械结构
构建有阴影和体积的零件、机械细节及鼠标／键盘交互，交付独立 HTML、内嵌样式的 SVG 或 React／Next.js 组件。
融入插画的 WebGL 特效
用着色器表现尾焰、火焰、水、光和蒸汽。Canvas 图层与插画共用视角，让特效位于 SVG 零件之间；缺少 WebGL 时 SVG 仍可阅读。
可选 3D 动作，目前为测试版
运动时重新投影并计算旋转或关节零件的明暗。上游密码拨盘示例展示了该模式；复杂场景需要单独评估性能。
安装与调用 Skill
该仓库本身就是 Skill 文件夹，需将 SKILL.md、kit、references 与所需脚本放在一起。项目安装器可选择 Agent；全局安装使用 -g 并指定 Agent 标识。
Claude Code 与 OpenCode 使用 /anatomy，Codex 使用 $anatomy。若客户端没有显示 Skill，按上游说明重新加载或重启。CLI 的 Agent 标识与 SkillHey 标签不同：Codex 使用 codex，Antigravity 使用 antigravity。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add wheresryan22/anatomy | 安装到当前项目并选择 Agent。 |
npx skills add wheresryan22/anatomy -g -a claude-code | 为 Claude Code 全局安装。 |
npx skills add wheresryan22/anatomy -g -a codex | 为 Codex 全局安装。 |
npx skills add wheresryan22/anatomy -g -a opencode | 为 OpenCode 全局安装。 |
npx skills add wheresryan22/anatomy -g -a antigravity | 为 Antigravity 全局安装。 |
向 Agent 提供概念与真实行为
| 命令 | 用途与使用时机 |
|---|---|
/anatomy explain a token bucket rate limiter as an interactive mechanism, standalone HTML, light theme | Claude Code 或 OpenCode 的起步任务；补充实际容量与补充速率。 |
$anatomy explain a pool of 10 database connections, with borrowing, release and a waiting queue, as a React component | Codex 的起步任务；明确请求和队列的预期行为。 |
说明概念与参数
提供数量、速率、阈值或尺寸，并说明希望通过什么交互演示它们。
选择交付格式与主题
指定 HTML、SVG 或 React 组件，以及浅色或深色主题，让 Agent 设计能够对应概念的机械结构。
用同一个模型驱动画面
机械的位置与显示的数值应来自同一个模型；先检查对应关系，再增加零件或特效。
检查实际输出
检查桌面／手机画面、鼠标与键盘操作、减少动态效果以及 WebGL 回退，并按插画需要执行几何和线条检查。
示例、验证与适用边界
画廊采用作者提供的示例：猛禽发动机、拆分组件、水波槽、旋转拨盘与百分表。封面截取作者在 X 发布的介绍视频，展示其他演示场景。这些属于上游素材，并非 SkillHey 新生成的结果。
Anatomy 主要面向机械结构与技术解释，不是统计图表、人物肖像或精确地图工具。3D 模式处于测试阶段，细致建模与审计可能耗时较长。新输出仍需单独进行视觉与性能检查。
仓库提供浏览器截图和几何审计工具。画廊截图不能证明任意生成的机械都通过检查；应为实际制作的输出执行对应脚本，并阅读生成的图片。
使用前需要了解
- 需要能够加载仓库 SKILL.md 并读写本地文件的 Agent。作者记录了 Claude Code、Codex、OpenCode 与 Antigravity 的支持。
- 绘图库与构建、检查脚本需要 Node.js 20.10+。可选的 skills CLI 安装器有独立的 Node 要求；上游当前为该安装方式建议 22.20 或更高版本。
- 截图与浏览器检查需要 Chrome 或 Chromium；安装位置不常见时设置 CHROME_PATH。仅输出 React 组件时需要 React 18+。
- 着色器特效需要 WebGL。绘图库不要求 API Key 或安装依赖；你使用的 Agent／模型服务可能有独立费用。
支持的 Agent
常见问题
Anatomy 免费吗？
仓库采用 MIT 许可开源。AI 编程 Agent 或模型服务可能单独收费。
必须使用 React 或 WebGL 吗？
不必。核心可输出不依赖框架的 SVG 与 HTML。只有组件模式需要 React，着色器特效才需要 WebGL。
浏览器检查被限制时怎么办？
作者记录了 Chrome 配置，以及受沙盒限制的 Agent 如何为特定命令获取权限。处理对应浏览器权限，或在终端执行检查；生成的插画仍可单独查看。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
