Explain a System as a Working Isometric Machine With Anatomy

Boxes and arrows explain a cache key about as well as a stick figure explains a violin. Anatomy is a 17k-star Claude skill that explains an idea by building it as a real, working object: the README's own examples turn a cache key that skips work when nothing changed into a pin-tumbler lock that only turns when every pin matches, and one GPU context serving many canvases into a gantry plotter whose single print head visits 16 wells.

Why This Skill Matters

Claude then builds that object 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. Every number the figure shows comes from the same small model that moves its parts. The result is source you own — a Node build script and the page it writes, or for React, geometry modules plus a server component for the static art and one client component for the motion — and the kit ships with it.

Three kinds of figure share one kit, one camera, and one set of craft rules. SVG is the core: solid isometric parts with four-tone shading, painted back to front, delivered as a standalone HTML page, a lone .svg with embedded styles, or React/Next.js components. SVG plus WebGL adds what lines cannot draw — fire, exhaust, water, caustics, lamp light, glow, steam — as a shader between a back and a front SVG in the same isometric camera; the SVG still reads without WebGL. The 3D mode, marked beta, re-projects and re-shades turning parts every frame while the rest stays static art.

Installation

npx skills add wheresryan22/anatomy -g

The CLI asks which agents to set up — Claude Code, Antigravity, OpenCode, Codex, MiniMax Code — or skip the question with -a claude-code, -a antigravity, -a opencode, -a codex, or -a minimax-code. There are no API keys and nothing to npm install: the kit uses only Node's built-in modules. You need Node.js 20.10 or later, and Chrome or Chromium for the checks; React 18 or later only for React output. The CLI copies the whole repository, examples included, about 10 MB.

Claude Code picks up new skills in a running session; if the skills folder itself did not exist when the session started, run /reload-skills. In Codex the command is $anatomy rather than /anatomy.

Real Workflow: Draw a Rate Limiter You Can Poke

Type the README's own quick-start prompt:

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

The workflow SKILL.md sets runs in a fixed order: 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. Verification is mechanical: kit/audit.mjs proves that nothing passes through anything, every end sits on a mount, and every overlap is drawn in depth order; in headless Chrome, scripts/capture.mjs and scripts/drive.mjs take screenshots, close-ups, and slowed-down contact sheets, and scripts/lines.mjs fails any line that ends in mid-air. The skill tells Claude to read every PNG it makes.

Three habits get the best figures, per the README. Name the idea, not the drawing, and give the real numbers — sizes, counts, rates, thresholds — because inventing the object is most of the work. Or name the object if you already know the machine you want, and say what should move. And say where it will live: a standalone HTML page, a lone SVG, or a React/Next.js component, light or dark, since the build differs for each. One of the eval prompts shows the full shape: a figure for Next.js docs on connection pooling, a pool of 10 connections that requests borrow and return, a queue when all 10 are busy, delivered as a React component plus a static HTML preview, dark theme.

Tips

• 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, or an interactive explainer.
• Light is the theme the skill designs for first, shaders included; every figure comes in light or dark.
• In Codex, the sandbox may stop the headless Chrome the checks need. The figure is still built and only its checks fail — approve the check outside the sandbox when asked, which needs the default approval_policy = "on-request".
• Ask for a printable version of any figure and Anatomy writes its sheet.mjs; scripts/print.mjs produces A4 PDFs — a one-page poster, a one-page technical drawing, and a two-page explainer.
• The smallest example, dial-indicator, is about 300 lines; the built pages for all eight examples are committed, so open any .html under examples/ to try one.

When Not to Use This

The README's Limits section is direct. It is not a chart library: 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 or exact maps, and an idea with no mechanism to build will come out weaker. It is slow on purpose: a figure takes a long session, the Raptor example's build takes a few minutes, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts. Shaders need WebGL, under reduced motion every figure goes still, and the 3D mode is beta — proved on its example and one test figure, not yet on a production figure.

See the leaderboard for more skills.