Anatomy
A Claude skill that explains an idea by building it as a real, working object.
Also runs in OpenCode and Codex.
Crafted, interactive isometric figures with many small precise parts, in SVG, WebGL and 3D.
Quick start · Gallery · What it makes · Install · Usage · Examples · How it works · Limits
examples/raptor-engine, light theme, firing. The engine and stand are SVG; the plume is a WebGL shader in the same isometric camera.
Ask Claude for a figure that explains a technical idea, and Anatomy has it invent a physical thing whose working is the concept. A cache key that skips work when nothing changed becomes a pin-tumbler lock that only turns when every pin matches. One GPU context serving many canvases becomes a gantry plotter whose single print head visits 16 wells.
Then Claude builds that thing out of dozens of small, solid, shaded parts, puts it in a framed card with a title, a hint and a live readout, makes it move calmly under the pointer and the keyboard, and checks its own work by zooming in on every joint. Every number the figure shows comes from the same small model that moves its parts.
Quick start
npx skills add wheresryan22/anatomy -g -a claude-code
Then, in Claude Code:
/anatomy explain how a token bucket rate limiter works, interactive
For OpenCode or Codex, swap the agent: -a opencode or -a codex. OpenCode takes the same /anatomy command; in Codex, type $anatomy.
That's it. No API keys and nothing to npm install: the kit uses only Node's built-in modules.
Gallery
 |
 |
| raptor-engine: hover to take it apart into 11 assemblies. An audit proves that no pipe passes through anything, at rest, apart and in every frame between. | ripple-tank: SVG apparatus over two WebGL layers (lamp light and caustics on the paper, reflections in the water) driven by a dispersion and optics model. |
 |
 |
| turning-dial: the 3D mode (beta). About 90 parts are re-projected and re-shaded every frame as you drag the dial. | dial-indicator: the smallest example, about 300 lines. Hover to slide the carriage; the needle reads each block. |
Every screenshot is the light theme of a page in examples/, captured with the skill's own scripts/capture.mjs and scripts/drive.mjs. The built pages are committed: open any .html in examples/ to try it.
What it makes
Three kinds of figure. All three share one kit, one camera and one set of craft rules.
| Kind | What it is | Example |
|---|---|---|
| SVG | The core. Solid isometric parts with four-tone shading, painted back to front, in a card with a live readout and eased motion. It ships as a standalone HTML page, a lone .svg file with its styles embedded, or React/Next.js components. |
dial-indicator, desk-computer, arcade-cabinet, test-rig |
| SVG + WebGL | For what lines can't draw: fire, exhaust, water, caustics, lamp light, glow, steam. The shader runs in a canvas between a back and a front SVG, in the figure's own isometric camera, so it sits inside the drawing. The SVG still reads without WebGL. | raptor-engine, ripple-tank |
| 3D beta | Parts that turn in true 3D: a dial or turntable that spins, fingers that flex, a piece that breaks off and falls. The moving parts are re-projected and re-shaded by the kit's own rules every frame; the rest of the figure stays static art. | turning-dial |
Each figure is light or dark. Light is the theme the skill designs for first, shaders included.
Install
Anatomy is a standard Agent Skill: a folder with a SKILL.md at its root. This repository is that folder. Pick one way in:
| Command | Installs to | |
|---|---|---|
| skills CLI, for you (Claude Code) | npx skills add wheresryan22/anatomy -g -a claude-code |
~/.claude/skills/anatomy |
| skills CLI, for you (Antigravity) | npx skills add wheresryan22/anatomy -g -a antigravity |
~/.gemini/antigravity/skills/anatomy |
| skills CLI, for you (OpenCode) | npx skills add wheresryan22/anatomy -g -a opencode |
~/.config/opencode/skills/anatomy |
| skills CLI, for you (Codex) | npx skills add wheresryan22/anatomy -g -a codex |
~/.agents/skills/anatomy |
| skills CLI, for one project | npx skills add wheresryan22/anatomy |
.claude/skills/anatomy for Claude Code, .agents/skills/anatomy for Antigravity, OpenCode and Codex |
| git, for you (Claude Code) | git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy |
~/.claude/skills/anatomy |
| git, for you (Antigravity) | git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy |
~/.gemini/antigravity/skills/anatomy |
| git, for you (OpenCode) | git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy |
~/.config/opencode/skills/anatomy |
| git, for you (Codex) | git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy |
~/.agents/skills/anatomy |
| git, for one project | git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy |
.claude/skills/anatomy (Claude Code and OpenCode) or .agents/skills/anatomy (Antigravity, OpenCode and Codex) |
| Download, no git | see below | any of the folders above |
With the skills CLI
The skills CLI finds the SKILL.md at the root of this repository and installs it as anatomy. By default it installs into the current project and asks which agents to set up. -g installs it for your user, and -a claude-code sets up Claude Code only. Use -a antigravity, -a opencode or -a codex for Antigravity, OpenCode or Codex only.
The CLI copies the whole repository, examples included (about 10 MB). It needs a recent Node.js: version 1.7.1 of the CLI asks for 22.20 or later.
With git
Clone the repository into one of the skill folders, so that SKILL.md ends up at <skills folder>/anatomy/SKILL.md. For Claude Code use ~/.claude/skills/anatomy or .claude/skills/anatomy. For Antigravity use ~/.gemini/antigravity/skills/anatomy or .agents/skills/anatomy. For OpenCode use ~/.config/opencode/skills/anatomy or .opencode/skills/anatomy; OpenCode also reads the Claude Code and .agents folders. For Codex use ~/.agents/skills/anatomy or .agents/skills/anatomy. For a project install, commit the folder so your team gets it too. To update later, git pull inside that folder.
Download, without git
Download the ZIP, unpack it, rename the folder from anatomy-main to anatomy, and move it into ~/.claude/skills/ (Claude Code), ~/.gemini/antigravity/skills/ (Antigravity), ~/.config/opencode/skills/ (OpenCode) or ~/.agents/skills/ (Codex).
Or in one line on macOS or Linux:
mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy
For Antigravity, OpenCode or Codex, put the same files in ~/.gemini/antigravity/skills/anatomy, ~/.config/opencode/skills/anatomy or ~/.agents/skills/anatomy:
mkdir -p ~/.gemini/antigravity/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.gemini/antigravity/skills/anatomy
mkdir -p ~/.config/opencode/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.config/opencode/skills/anatomy
Claude Code picks up new skills in a running session. If the skills folder itself did not exist when the session started, run /reload-skills. Antigravity and OpenCode list it as /anatomy in their chat; restart if it does not show. Codex lists it under /skills and runs it with $anatomy; restart Codex if it does not show.
Codex: if the browser checks are blocked
The skill checks its own figures by starting headless Chrome, which writes a temporary profile and talks to it over a local port. Codex runs commands in a sandbox, and that sandbox may stop Chrome. The figure is still built; only its checks fail. In order of preference:
-
When Codex asks to run a check outside the sandbox, approve it for that command. This needs the default
approval_policy = "on-request". -
Or allow it once in
~/.codex/config.toml:approval_policy = "on-request" sandbox_mode = "workspace-write" [sandbox_workspace_write] network_access = true writable_roots = ["/tmp"]
Newer Codex releases may name these settings differently; check the config reference for your version.
-
Or run the check yourself in a normal terminal, for example
node scripts/capture.mjs page.html --out shots/page.png.
Starting Codex with --sandbox danger-full-access also works, but it lifts every limit for that session, so keep it for projects you trust.
Usage
Type /anatomy (in Codex, $anatomy) and say what the figure should explain:
/anatomy explain how a token bucket rate limiter works, interactive
You don't have to name the skill. Claude also loads it when you ask for an isometric illustration, an explanatory figure for docs, a blog post or a landing page, or an interactive explainer. Antigravity, OpenCode and Codex do the same.
More prompts, from the skill's evals
/anatomy a figure for our Next.js docs on database connection pooling: a pool of 10 connections, requests borrow one and give it back, and when all 10 are busy new requests wait in a queue. A React component plus a static HTML preview, dark theme.
/anatomy an isometric SVG explaining how a CDN edge cache works, cache hit vs miss, TTL of 60 s, for a dark landing page. Just the SVG file and a PNG preview.
/anatomy a Bunsen burner on a lab bench: opening the air collar turns the lazy yellow flame into a roaring blue cone. WebGL for the flame, one HTML file, dark theme.
/anatomy a heat-exchanger espresso machine with the side panel off: boiler, heat-exchanger tube, group head, pump, steam wand and gauge. Show the water flowing when you pull a shot. Standalone HTML, light theme.
Three habits get the best figures:
- Name the idea, not the drawing. Say what it should explain and give the real numbers (sizes, counts, rates, thresholds). Anatomy invents the object; that is most of the work, and it does it better than a description of boxes and arrows.
- Or name the object. If you already know the machine you want (an espresso machine, a Bunsen burner, a lock), say so, and say what should move.
- Say where it will live. A standalone HTML page, a lone SVG file, or a React/Next.js component; light or dark. The build differs for each.
A figure arrives as source you own: a Node build script and the page it writes, or, for React, geometry modules, a server component for the static art and one client component for the motion. The kit comes with it.
Examples
Each framework-free example has a Node build script that writes standalone pages next to itself. Add --light for the light theme.
| Example | What it shows | Build |
|---|---|---|
dial-indicator |
A dial gauge on a stand over a carriage of gauge blocks. The smallest example, about 300 lines. | node examples/dial-indicator/build.mjs |
desk-computer |
A 1984-style desk computer with a keyboard you can type on. The typed line appears on a CRT drawn in the plane of the case front, and switching it off collapses the picture to a line and a dot. About 85 solids. | node examples/desk-computer/build.mjs |
arcade-cabinet |
An upright arcade cabinet with its side panel off. Drop a quarter: it rolls down the coin chute past the coin-switch wire into the cash box, a pulse runs along the cable to the board, and the CRT warms up into an attract mode drawn in the plane of the tilted monitor. About 240 solids and 15 cables. | node examples/arcade-cabinet/build.mjs |
raptor-engine |
A Raptor 2 engine in a test stand. It comes apart into 11 assemblies, and a WebGL plume, shock, splash and steam render between the back and front SVG. The reference for dense pipework, smooth shading, fades and the audit. The build takes a few minutes. | node examples/raptor-engine/build.mjs |
ripple-tank |
A school ripple tank on tall legs over a paper screen, seen from 44° up. Two WebGL layers are registered to the isometric planes and driven by a pure model in model.mjs. |
node examples/ripple-tank/build.mjs |
test-rig |
A production figure from a React/Next.js site: a glass button on a spring-mounted carriage, a finger probe on a rail, and a dial gauge reading the lean. 53 solids. No build script: copy it into a React app. | none |
spot-plate |
A second figure from the same site: six pairs of glass drops on a spot plate that run together into one piece of glass as a fan of feeler blades opens. Each pair is drawn from one distance field. No build script: copy it into a React app. | none |
turning-dial |
The 3D mode: a combination dial that turns in true 3D with a small robot hand on it, a three-hinge finger that lifts, and a pod that breaks off as a free body. stress.mjs is a 380-part hand in a cluttered workshop, used to measure performance. |
node examples/turning-dial/build.mjs |
node examples/raptor-engine/build.mjs --audit, node examples/arcade-cabinet/build.mjs --audit and node examples/turning-dial/build.mjs --light --audit also run the geometry audit. The 3D audit is slow; see references/3d.md.
How it works
SKILL.mdis what Claude reads. It sets the workflow: collect the true numbers first, invent the object, write a parts list, plan the world, build the geometry once with the kit, paint back to front, frame it, make it live, and then verify it like a critic. It also holds the craft rules in short form.kit/is the drawing library the figures are built from: the isometric camera, solids and a parts library (iso-kit), round parts on any axis (lathe.mjs), pipes and cables (tube.mjs), the WebGL layer (gl.mjs), the 3D runtime (turn*.mjs), and React components (react/). Apart from React for those components, it has no dependencies.references/are the long-form guides Claude opens when it needs them: craft, the kit API, motion, React, verification, WebGL, a design walkthrough and the 3D mode.- Verification.
kit/audit.mjsproves the geometry: nothing passes through anything, every end sits on a mount, and every overlap is drawn in depth order (node build.mjs --audit). In headless Chrome,scripts/capture.mjsandscripts/drive.mjstake screenshots, close-ups and slowed-down contact sheets,scripts/lines.mjsfails any line that ends in mid-air, andscripts/turn-check.mjschecks 3D figures. The skill tells Claude to read every PNG it makes.
Repository layout
anatomy/
├── SKILL.md the skill: workflow, setup and craft rules
├── kit/ the drawing library
│ ├── iso-kit.ts the core: camera, solids, parts, SVG renderer, card and page, CSS
│ ├── iso-kit.mjs the same core as plain ESM, for Node build scripts
│ ├── iso.css the kit's CSS, both themes
│ ├── react/ draw.tsx (server-safe components), live.tsx (client hooks)
│ ├── lathe.mjs round parts on any axis
│ ├── tube.mjs pipes, tubes and cables
│ ├── audit.mjs the geometry audit
│ ├── gl.mjs the WebGL layer for shaders inside the drawing
│ ├── turn.mjs the 3D runtime (beta)
│ ├── turn-build.mjs the 3D builder
│ ├── turn-audit.mjs the 3D orbit audit
│ └── turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs
│ experimental variants, not yet documented or used by the examples
├── references/ long-form guides Claude reads as needed
│ ├── craft.md kit.md motion.md react.md
│ └── verify.md webgl.md walkthrough.md 3d.md
├── scripts/ headless Chrome checks and build helpers
│ ├── capture.mjs screenshots and close-ups
│ ├── drive.mjs scripted sessions and contact sheets
│ ├── lines.mjs the line-end check (with line-ends.mjs)
│ ├── inline-kit.mjs the kit as source, to inline into a standalone page
│ ├── turn-check.mjs 3D checks in the browser (with turn-fidelity.mjs)
│ └── turn-bench.mjs 3D timing in Node
├── examples/ eight complete figures, built pages committed
├── evals/evals.json test prompts and what a good answer contains
└── .github/ issue forms, PR template, CI, README images
Requirements
| Needed for | Notes | |
|---|---|---|
| Claude Code, or Antigravity, OpenCode or Codex | everything | The skill is written for Claude Code and follows the open Agent Skills format, so Antigravity, OpenCode and Codex load it too. In Codex, the browser checks start Chrome; if its sandbox blocks that, allow it for those commands. |
| Node.js 20.10+ | builds, kit, checks | Built-in modules only: nothing to npm install. The examples were rebuilt byte for byte on Node 20.19 and 22.11. On Node 20 the browser scripts restart themselves with --experimental-websocket. |
| Chrome or Chromium | the checks | capture.mjs, drive.mjs, lines.mjs and turn-check.mjs look in the usual places on macOS, Linux and Windows and in Playwright's cache. Set CHROME_PATH for any other binary. They run it headless with WebGL on. |
| React 18+ | React output only | kit/react/, examples/test-rig/ and examples/spot-plate/. |
Limits
- It is not a chart library. There are no axes, series or data plots. Numbers appear as a live readout driven by a model, and as the true sizes and counts of the parts.
- It draws machines, instruments, tools and furniture. Not people or exact maps. An idea that has no mechanism to build will come out weaker.
- It is slow on purpose. A figure takes a long session: the parts list, the geometry, the audit, and close-ups of every joint in both themes. The Raptor's build takes a few minutes, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts.
- Shaders need WebGL. Without it the SVG still reads, and under reduced motion every figure goes still.
Note
The 3D mode is beta. It is proved on its example and one test figure, not yet on a production figure. A small 3D figure runs at 60 fps; the 380-part stress hand measured about 20 fps at 1440 px wide and 13 to 15 fps on a throttled phone profile, on a heavily loaded machine.
Share a figure
Made something good? Ask your agent to "publish this figure to the Anatomy community gallery". It asks for a title and your GitHub name, shows what it will send, and after your yes opens a pull request on anatomy-community for you: no git, no forking by hand. Or run scripts/publish.mjs --submit yourself. Without a terminal, use the gallery's Submit a figure form with a GitHub Gist.
Contributing
Issues and pull requests are welcome. Read CONTRIBUTING.md first: it covers building the examples, the checks, and the house rules a change has to keep (among them, no comments in code, and kit changes that leave every existing example byte-identical). Please follow the Code of Conduct, and report security problems as described in SECURITY.md.
License
MIT © 2026 Ryan · @wheresryan22
If Anatomy drew something useful for you, a ⭐ helps other people find it.