Anatomy

A Claude skill that explains an idea by building it as a real, working object.
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.

npx skills add wheresryan22/anatomy -g -a claude-code

Then, in Claude Code:

/anatomy explain how a token bucket rate limiter works, interactive

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.

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:

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

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.

Usage

Type /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.

/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:

1. 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.
2. 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.
3. 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.

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.md is 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.mjs proves 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.mjs and scripts/drive.mjs take screenshots, close-ups and slowed-down contact sheets, scripts/lines.mjs fails any line that ends in mid-air, and scripts/turn-check.mjs checks 3D figures. The skill tells Claude to read every PNG it makes.

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

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.

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.

• Report a bug
• Request a figure
• Changelog

License

MIT © 2026 Ryan · @wheresryan22

_{If Anatomy drew something useful for you, a ⭐ helps other people find it.}