Anatomy: turn a one-line idea into a machine you can take apart

npx skills add wheresryan22/anatomy --skill anatomy

Ask Claude to “draw a diagram that explains X” and you usually get boxes with arrows, leaving you to imagine the motion. Anatomy, an open-source Claude Code skill by Ryan, takes another road: the agent has to invent a real machine whose working is the concept, draw it part by part as an isometric figure, and make it draggable, pressable and explodable. The repo was created on October 8, 2026, is MIT-licensed, and had about 830 stars as of October 11. The README’s mappings are direct: 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 print head visits 16 wells.

The order it works in

SKILL.md fixes a ten-step workflow. It opens by sizing the request: a Figure is 40–80 parts in 30–90 minutes, a Hero is 80–150 parts in 2–4 hours, and an Epic takes six hours or more and never starts without you. Then comes truth: the readout, the motion and the caption must all come from the same model. After that the agent invents the object, writes a parts list of at least 40, builds the geometry once with the kit’s drawing library, paints back to front, and frames it in a card with a figure number, a title, an interaction hint and a live readout. Verification is the last step and it is harsh: --audit must prove, at rest, apart and in every frame of the explode, that no pipe passes through anything and every overlap is drawn in true depth order, and a headless Chrome session reads every screenshot so no line ends in mid-air.

Three kinds of output

• Plain SVG: a standalone HTML page, a lone .svg file with styles embedded, or React/Next.js components (copy the kit into your project). The smallest example is about 300 lines.
• SVG plus WebGL: fire, exhaust, caustics, lamp light and steam that lines cannot draw come from a shader canvas sandwiched between back and front SVG layers, in the same isometric camera; without WebGL the SVG still reads. The ripple tank is the reference here: one layer casts lamp caustics on the paper screen, another paints the water’s reflections.

• 3D (beta): a dial that turns in true 3D, fingers that flex, a part that breaks off as a free body. Small figures run at 60 fps; a 380-part stress hand measured about 20 fps at 1440 px wide.

The repo ships eight complete examples with their built pages committed — open any HTML file and play. A desk computer holds about 85 solids; an arcade cabinet about 240 solids and 15 cables. The official collection goes further with 33 figures, including a Rolls-Royce Trent 970 — the A380’s engine — with 541 solids, which the site says took 14 hours to build while the audit measured 6,320 overlapping pairs. They ship as the npm package anatomy-figures.

The rules it enforces

• Solids, not wireframes: every part is filled and painted in order; no dashed hidden lines.
• Lines resolve: every line ends on a face, another line or a terminal dot; nothing floats in the air.
• Pipes cross nothing: pipes and cables keep about 1.5 radii of clearance, gap at every flange and clamp, and the audit fails the build otherwise.
• No popping: shaders ride envelopes with attack and decay, phase changes crossfade, figures stop offscreen and go still under reduced motion.

Who it’s for

Engineers and technical writers who put explanatory figures into docs, blogs or landing pages, and creators explaining mechanics or algorithms. Install is one command, npx skills add wheresryan22/anatomy -g -a claude-code (Node 20.10+, no dependencies), then ask /anatomy explain how a token bucket rate limiter works, interactive. To start from the smallest example, copy the 300 lines of dial-indicator; if you want a full 3D scene to orbit rather than a part-level machine, threejs-architecture-effects is the closer fit.

The honest catch: it is slow on purpose. A Figure takes 30–90 minutes and the site’s turbofan took 14 hours; the 3D mode is beta; the verification scripts need a local Chrome. And it is no chart library — there are no axes or data series, so trend plots are out of scope.