Anatomy: The Claude Code Skill That Draws Ideas as Interactive Isometric Machines

Short answer: Anatomy is a free Claude Code skill that explains a technical idea by building it as a real, working machine you can drag and press in the browser. The repository, wheresryan22/anatomy, was created on October 8, 2026, and had reached about 2,176 stars and 165 forks by October 11. It is MIT licensed, and its README sums it up as a skill that "explains an idea by building it as a real, working object."

If you have been pasting Mermaid boxes and arrows into docs, this is the opposite approach. We previously looked at why Mermaid-style diagram output often disappoints; Anatomy is one attempt at the other end of the spectrum, trading speed for craft.

TL;DR: what you need to know

What it makes, in the author's words

The idea is simple to state. According to the README, a cache key that skips work when nothing changed becomes a pin-tumbler lock that only turns when every pin matches, and one GPU context serving many canvases becomes a gantry plotter whose single print head visits 16 wells. Claude then builds the object from dozens of small, shaded parts, frames it in a card with a title, a hint and a live readout, and checks its own work by zooming in on every joint.

The project site makes the case against boxes and arrows: they tell you the parts exist, not what the parts do. Its showcase is a mechanical watch movement built from the single line /anatomy explain how a mechanical watch keeps time, interactive, which the author says took just under two hours of Claude working alone. Drag the crown to wind it, press S to slow time, press E to lift the bridges apart.

There are three kinds of figure:

• SVG. The core: solid isometric parts with four-tone shading, painted back to front.
• SVG plus WebGL. For fire, water, caustics and steam, with the shader running in the figure's own isometric camera between a back and a front SVG layer. The SVG still reads without WebGL.
• 3D (beta). Parts that turn in true 3D, re-projected and re-shaded every frame. The README calls it proved on one example and one test figure, not yet on a production figure.

How to install and run it

Anatomy is a standard Agent Skill: a folder with a SKILL.md at the root. If skills are new to you, start with our guide to building your first agent skill and the walkthrough of installing skills with npx.

Blank window with a single block cursor, the starting point for installing the Anatomy skill in a terminal

# for you, in Claude Code only
npx skills add wheresryan22/anatomy -g -a claude-code

# or clone into your skills folder
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

The README notes the skills CLI copies the whole repository, examples included, about 10 MB, and that version 1.7.1 of the CLI asks for Node 22.20 or later, while the kit itself needs Node 20.10+. Then, in Claude Code:

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

You do not have to name the skill. Claude also loads it when you ask for an isometric illustration, an explanatory figure for docs or a landing page, or an interactive explainer. Per the project site, until a request matches, Claude sees only the skill's name and description and reads the rest on demand.

How to write a prompt that works

The author's three habits, from the README:

1. Name the idea, not the drawing. Say what the figure should explain and give real numbers such as sizes, counts, rates and thresholds. Anatomy invents the object.
2. Or name the object. If you already know you want an espresso machine, a Bunsen burner or a lock, say so and say what should move.
3. Say where it will live. Standalone HTML, a lone SVG, or a React component; light or dark theme.

Three keywords change the result and only apply when you type them: interactive for pointer and keyboard response, WebGL for shaders, and 3D for parts that turn in depth. The project site warns 3D is slow, hours to build rather than minutes.

Example prompts from the repo's evals include a database connection pool with a pool of 10 connections and a queue for waiting requests, and a CDN edge cache showing hit versus miss with a 60-second TTL.

What Claude actually does: a fixed workflow

Magnifier over a claim marked with a check, standing for the zoomed-in verification pass in the Anatomy skill workflow

The skill is not one big prompt. SKILL.md sets a workflow that the project site lays out in ten steps: size the request, collect the true numbers and write them as a small model, invent the object, list at least forty parts, plan the world and camera, build the geometry once, paint back to front, frame it in a card, make it live, and verify it like a critic.

Two details stand out for people who care about quality:

• One model drives everything. Per the README, every number a figure shows comes from the same small model that moves its parts, so the readout cannot disagree with the picture.
• An audit proves the geometry. kit/audit.mjs checks that nothing passes through anything and every overlap is drawn in depth order. The Trent 970 turbofan example reportedly had 6,320 overlapping pairs across 541 solids checked. Headless Chrome scripts take screenshots and contact sheets, and one fails any line that ends in mid-air.

This matches the pattern we have seen in other skills that add verification loops, such as Archify for architecture diagrams and diagram-design, though Anatomy aims at much denser illustrations.

How long it takes, and what it costs

This is the question most readers will ask first, because Claude Code time is billing time. The project site publishes the author's measured active time, with idle gaps left out:

The sizing scheme is explicit: a Figure holds 40 to 80 parts and takes 30 to 90 minutes, a Hero 80 to 150 parts and 2 to 4 hours, and an Epic six hours or more. A Figure is built without asking, a Hero is announced first, and an Epic is never started without you: Claude proposes a Hero version instead. That guard matters if you pay per token. For how a long session adds up, see what a Claude Code task costs.

What people are asking

Is it a replacement for a diagram tool? No. The README is blunt: it is not a chart library, has no axes or data plots, and draws machines, instruments, tools and furniture. An idea with no mechanism to build "will come out weaker."

Is it fast? No, by design. The README says it is slow on purpose, with a long session for parts list, geometry, audit and close-ups in both themes. Whatever the size, the site says a working page appears in the browser within the first hour.

Will it work without WebGL? The SVG still reads, and under reduced motion every figure goes still. Shaders need WebGL.

Can I reuse the finished figures? Every figure arrives as source you own: a Node build script and the page it writes, or for React, geometry modules plus one client component for motion. The author also publishes the collection as an npm package, anatomy-figures, with five themes and 26 CSS tokens. Confirm licensing for the packaged figures on the project site before shipping them in a commercial product.

Honest limits and open issues

• Early project. The repository is three days old with 8 commits when I viewed it. The repository showed 11 open items on its tracker, which suggests active hardening rather than a stable release.
• 3D is beta. A small turning figure runs at 60 fps, but the 380-part stress hand measured about 20 fps at 1440 px and 13 to 15 fps on a throttled phone profile, per the README.
• Claude's eyes. The project site admits Claude is very good at building these figures and not always good at seeing them, which is why the verification scripts exist.
• Stars are not a review. 2,000-plus stars in days shows interest, not production use. Try a Figure-size request before committing a docs site to it.
• Check the code. Any skill that runs scripts and launches headless Chrome deserves a read first. Our security scanner coverage for agent skills is a good starting point.

Where Anatomy fits among visual skills

Skills that make output visual are a growing category. Show Me helps coding agents present visual results, and the ELI5 skill explains concepts simply. Anatomy sits at the heavyweight end: it is for the one hero figure on a docs page or landing page, not for every answer. If you want to understand how skills compare to hooks and plain prompts, see skills vs hooks vs prompts.

A practical first try

1. Install with the one-line command above.
2. Pick an idea from your own docs with real numbers, for example a rate limiter with a bucket of 20 tokens refilling at 5 per second.
3. Prompt: /anatomy explain how a token bucket with 20 tokens refilling at 5 per second throttles requests, interactive, standalone HTML, light theme.
4. Let Claude size it. Accept a Figure, and decline an Epic.
5. Open the generated page, test pointer, keyboard and reduced-motion behavior, and check the readout against your own expectation.

If the result is good, embed the HTML or SVG. If it is not, the README's advice is to name the object yourself and say what should move.

Related reading

• What is Mermaid slop?
• Archify: agent skill for architecture diagrams
• diagram-design Claude Code skill
• Build your first agent skill, step by step
• Install skills with npx
• Skills vs hooks vs prompts
• Sources: Anatomy repository and project site

Star counts, issue counts and version requirements are accurate as of October 11, 2026 and change quickly for a young repository.