You need a figure that explains how a token bucket rate limiter works. A boxes-and-arrows slide says nothing about the mechanism. A stock illustration shows a bucket, not the logic. An image generator gives you a pretty picture with the wrong number of tokens and pipes that lead nowhere. This guide covers how to create isometric illustrations with Claude Code, using a free agent skill that explains an idea by building it as a real, working object.

What Anatomy is

Anatomy is a free, MIT-licensed agent skill by wheresryan22 for detailed, interactive isometric illustrations of real-world machines and complex systems: polished SVGs with optional WebGL shaders and 3D effects. The repository had 25,287 stars and 2,113 forks when checked on 2026-11-06, and its SKILL.md at the root makes it a standard Agent Skill for Claude Code, Antigravity, OpenCode, Codex, and MiniMax Code.

The core idea is unusual. Instead of drawing the concept, Anatomy invents 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.

Anatomy makes three kinds of figure, all sharing one kit, one camera, and one set of craft rules. Plain SVG is the core: solid isometric parts with four-tone shading, painted back to front, in a card with a live readout and eased motion, shipped as a standalone HTML page, a lone .svg file, or React and Next.js components. SVG plus WebGL adds what lines cannot draw — fire, exhaust, water, caustics, lamp light, glow, and steam — with the shader in a canvas between a back and a front SVG. The 3D mode, still in beta, turns parts in true 3D.

The repository ships eight complete examples with built pages committed, so you can open any .html file in examples/ and try it: the 300-line dial-indicator gauge, the typeable 1984-style desk-computer, the arcade-cabinet with about 240 solids and 15 cables, the raptor-engine that comes apart into 11 assemblies, plus ripple-tank, test-rig, spot-plate, and the 3D turning-dial.

Install and use

The commands below are quoted verbatim from the README and were not executed in this run (unverified).

Install the skill with the skills CLI:

npx skills add wheresryan22/anatomy -g

The CLI asks which agents to set up; add -a claude-code, -a antigravity, -a opencode, -a codex, or -a minimax-code to skip the question, and leave off -g for one project. It copies the whole repository, examples included, about 10 MB, and needs a recent Node.js: version 1.7.1 asks for 22.20 or later. No API keys, nothing to npm install: the kit uses only Node's built-in modules.

The git route installs the same way, for Claude Code:

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

Antigravity, OpenCode, Codex, and MiniMax Code use the matching folders under ~/.gemini/antigravity/skills/, ~/.config/opencode/skills/, ~/.agents/skills/, and ~/.minimax/skills/. A ZIP download is also offered, with a one-line curl and tar command in the README.

Then, in Claude Code, ask for the figure you want:

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

In Codex the command is $anatomy; the other agents take the same /anatomy command. You do not 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. The README gives more prompts from the skill's own evals, for example a figure for Next.js docs on database connection pooling, as a React component plus a static HTML preview.

Three habits get the best figures, according to the README. Name the idea, not the drawing, and give the real numbers — sizes, counts, rates, thresholds. Or name the object and say what should move. And say where it will live: a standalone HTML page, a lone SVG file, or a React component; light or dark.

A figure arrives as source you own: a Node build script and the page it writes, or, for React, geometry modules plus server and client components. Each example has a Node build script, for example:

node examples/dial-indicator/build.mjs

Add --light for the light theme. The Raptor and the arcade cabinet also print to three A4 PDFs with node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all.

Verification is built into the workflow, and it is the part that separates Anatomy from a drawing prompt. The skill tells Claude to 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. The kit's audit.mjs proves the geometry — nothing passes through anything, every end sits on a mount:

node examples/raptor-engine/build.mjs --audit

In headless Chrome, capture.mjs and drive.mjs take screenshots, close-ups, and contact sheets, lines.mjs fails any line that ends in mid-air, and turn-check.mjs checks 3D figures. One note for Codex users: the skill checks its own figures by starting headless Chrome, and the Codex sandbox may stop Chrome. The figure is still built; only its checks fail. The README lists three workarounds: approve the check outside the sandbox, allow it once in ~/.codex/config.toml, or run it yourself.

Where it fits, and where it does not

Anatomy fits best when a technical idea needs a working picture: documentation for a library or API, a blog post explaining a mechanism, a landing page hero, or a conference talk figure. The Raptor engine, the ripple tank, and the arcade cabinet show the range: dense pipework, optics, and a coin mechanism are all the same kind of problem — a system with parts that move in a fixed relationship. Finished figures can go to the community gallery via the anatomy-community repository or scripts/publish.mjs --submit.

It does not fit everything. The README is blunt about the 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, and not exact maps. An idea with no mechanism to build comes out weaker.

It is also 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. The 3D mode is beta: 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-test hand measured about 20 fps.

Before you start: building needs Node.js 20.10 or later, the checks need Chrome or Chromium (or CHROME_PATH), and React output needs React 18 or later.

FAQ

How do I create isometric illustrations with Claude Code? Install the Anatomy skill with npx skills add wheresryan22/anatomy -g, then ask in plain words, for example /anatomy explain how a token bucket rate limiter works, interactive. Give the real numbers the figure should show and say where it will live: a standalone HTML page, a lone SVG file, or a React component, light or dark. The command is quoted from the README, not executed here.

Does Anatomy work with Codex or OpenCode? Yes. It follows the open Agent Skills format, so Antigravity, OpenCode, Codex, and MiniMax Code load it too. In Codex the command is $anatomy instead of /anatomy. One Codex caveat: the sandbox may block the headless Chrome checks, so approve them outside the sandbox, allow them in ~/.codex/config.toml, or run them yourself.

What file formats does Anatomy produce? A standalone HTML page, a lone .svg file with its styles embedded, or React and Next.js components. SVG plus WebGL figures keep the shader in a canvas between a back and a front SVG, and the SVG still reads without WebGL.

Can Anatomy make charts or data plots? No. The README states it is not a chart library: there are no axes, series, or data plots. Numbers appear as a live readout driven by the same model that moves the parts. For a chart, use a charting library.

Is Anatomy free for commercial use? Yes, according to the repository: MIT licence, © 2026 Ryan. The kit has no dependencies apart from React for its React components, uses only Node's built-in modules, and needs no API key to run.

See the skill's directory entry for install, platforms, and quick start: Anatomy on aiskills.one.