Anatomy is a Claude Code skill that draws explainer figures

An explainer figure on a developer landing page or a technical doc usually ends with a reach for a stock illustration or a long modelling session in a vector editor. Anatomy, an MIT-licensed Claude Code skill by a developer publishing as wheresryan22, writes those figures from a one-line prompt. The GitHub repository has reached 171 stars in the two days since the project went public.

The skill's approach is to have Claude invent a physical object whose working is the concept, then build that object part by part. The README gives the example of a cache key that skips work when nothing changed, drawn as a pin-tumbler lock that only turns when every pin matches. A GPU context serving many canvases becomes a gantry plotter with one print head visiting sixteen wells. A reader asked for "a token bucket rate limiter, interactive" gets a token bucket figure, not a diagram of boxes and arrows.

What ships with it

Anatomy is an Agent Skill: a folder with a SKILL.md the agent reads. Inside is a drawing kit written in plain Node with no runtime dependencies, covering an isometric camera, a parts library, round parts on any axis, pipes and cables, a WebGL layer for shaders inside the SVG, a 3D runtime in beta, and React components. Longer guides live in a references/ folder that Claude opens when it needs them. The output is source: an HTML page, a standalone SVG file, or React modules, each driven by a small model that the readout and the moving parts share.

Verification runs on the output

The skill tells Claude to check its own work. A built-in audit script proves that no pipe passes through anything, that every end sits on a mount, and that every overlap is drawn in the right depth order. Headless Chrome scripts take screenshots and close-ups, drive scripted sessions, fail any line that ends in mid-air, and run a 3D orbit audit on turning figures. The skill tells Claude to open every PNG it produces and read it. For the committed Raptor engine example, the build takes a few minutes, and a 3D orbit audit of a thirty-part figure takes fifteen to twenty minutes.

The gallery in the README includes four built examples: a Raptor 2 rocket engine firing in a test stand with a WebGL plume; a school ripple tank with two SVG dippers over two WebGL layers for lamp light and water caustics; a combination dial on a door with a small gold hand that turns with it in the 3D mode; and a dial indicator reading three gauge blocks on a sliding carriage. Each one is committed as an HTML file inside examples/ and runs by opening the file.

The limits the README names are honest. Anatomy is for machines, instruments, tools and furniture, not for people, maps or data charts. The 3D mode is beta and runs well on small figures: a 380-part stress figure measures about 20 frames per second at 1440 pixels wide on the author's machine and 13 to 15 on a throttled phone profile. Under reduced motion every figure sits still. For a product page that wants a specific illustration for a specific concept, this is the kind of asset a team buys from an illustrator, if it can afford one, and skips otherwise. The skill writes it from the brief instead.

Source

• wheresryan22, wheresryan22/anatomy on GitHub
• Project site, skills.wheresryan.sh/anatomy