Anatomy: explain an idea by building a machine

Ask Anatomy for a figure about a cache key and you won't get boxes and arrows. Claude picks a pin-tumbler lock that only turns when every pin matches, builds it from dozens of small shaded parts, and frames it in a card with a title, a hint and a live readout. GitHub user wheresryan22 publishes the skill under the MIT license. Anthropic doesn't publish it. If skills are new to you, read what Claude skills are.

What a figure is made of

The README lists three kinds of figure. Plain SVG is the core: solid parts with four-tone shading, painted back to front. SVG plus WebGL adds what lines can't draw, such as fire, exhaust, water, caustics and steam, in the same isometric camera. A 3D mode, still in beta, turns parts in true 3D. You choose the output: a standalone HTML page, one .svg file, or React and Next.js components, in a light or dark theme.

Every job gets a size before any geometry. The SKILL.md defines three tiers: a Figure has 40 to 80 parts and is built without asking, a Hero has 80 to 150 parts and takes about 2 to 4 hours, and an Epic (a whole vehicle or plant) means 6 hours or more. For an Epic, Claude gives the estimate, proposes a smaller Hero version and waits for your choice.

Then it checks its own work. A geometry audit proves that no pipe passes through anything and that every end sits on a mount. Headless Chrome takes screenshots and close-ups of each joint, a line check fails any line that ends in mid-air, and Claude is told to read every PNG it makes.

Eight finished examples ship in examples/, from a 300-line dial gauge to a rocket engine in a test stand that comes apart into 11 assemblies. Open any built .html there to try one.

How to install it

With the skills CLI:

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

Swap -a codex, -a opencode or -a antigravity for another agent. The CLI wants a recent Node: version 1.7.1 of it asks for 22.20 or later. Or clone the repo straight into your skills folder:

git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

The skill itself needs Node.js 20.10 or newer and Chrome or Chromium for the checks. There's nothing to npm install and no API key. If your skills folder didn't exist when the session started, run /reload-skills. In Codex the command is $anatomy.

Example request

/anatomy explain how [concept, e.g. a token bucket rate limiter] works. Real numbers: [capacity, refill rate, requests per second]. Make it interactive, as [a standalone HTML page | one SVG file | a React component], [light | dark] theme.

Give the real sizes and rates and let it invent the object, or name the machine yourself and say what should move. Ask for a printable version later and it writes a sheet.mjs that lays the figure out as an A4 PDF: a poster, a technical drawing or a handout.

Limits

• It isn't a chart library. There are no axes or data series. Numbers appear as a live readout from the model that moves the parts.
• Machines only. The README says it draws machines, instruments, tools and furniture, not people or exact maps, and an idea with no mechanism comes out weaker.
• Slow on purpose. A Hero figure takes hours, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts.
• 3D is beta. A 380-part stress test ran at about 20 fps at 1440 px wide.
• Codex may block the checks. Its sandbox can stop Chrome. The figure still gets built; only the checks fail until you approve them outside the sandbox.
• Trusted pages only. The check scripts start Chrome with file access enabled, and SECURITY.md says to point them only at pages you trust. The CLI install copies the whole repo, examples included, about 10 MB.

When to use it

Use it for docs, a blog post or a landing page where readers should play with the idea to get it: connection pools, CDN caches, rate limiters, anything with a mechanism. For a real, named machine taken apart in 3D and recorded to video, Teardown builds a simulator page.