An LRU cache becomes a bookcase; a message queue becomes a marble run. Anatomy gives Anthropic’s Claude Code a way to turn technical concepts into physical objects whose moving parts demonstrate the underlying behavior. The output is code for a figure readers can inspect and, when requested, interact with.
The Anatomy project page, dated October 9, 2026, describes a reusable skill with six complete examples, a drawing kit, and instructions covering everything from the concept’s factual model to browser checks. Users can install it with one command instead of reconstructing that workflow in every prompt.
Anatomy is a community project, not an Anthropic product update. Its practical appeal is the combination of a repeatable process and visible source code. Review remains essential: a convincing animation can still explain the wrong behavior.
Install Anatomy in Claude Code
The public repository provides this command for installing Anatomy for your user account and selecting Claude Code explicitly:
npx skills add wheresryan22/anatomy -g -a claude-code
The -g flag installs the skill for your user rather than only the current project. The -a claude-code flag selects Claude Code without asking which supported agents to configure.
For a project-scoped installation, use:
npx skills add wheresryan22/anatomy
According to the README, that version asks which agents to set up and installs into the current project. For Claude Code, the documented project location is .claude/skills/anatomy.
The installer requires a recent Node.js version. The README specifically lists Node.js 22.20 or later for version 1.7.1 of the skills CLI. This requirement applies to the installer, not SVG.
The repository also documents a manual installation: clone directly into Claude Code’s user-level skills directory.
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
Make sure SKILL.md ends up inside the anatomy folder. The README says Claude Code picks up newly added skills in a running session, with /reload-skills needed if the skills folder did not exist when the session started.
Before installing into an important repository, inspect the instructions and scripts. A scratch project is a sensible first destination for a community skill that will generate files and run browser checks.
The Workflow Starts With Behavior, Not Geometry
Anatomy’s central instruction is that the object itself should explain the idea. The skill asks Claude to invent a recognizable machine whose mechanism maps onto the concept, instead of simply arranging boxes and arrows.
The creator’s build notes describe Anatomy as a folder of instructions Claude reads before drawing. The six examples provide working references, and Claude is instructed to open the closest example before starting. They cover ordinary SVG figures, WebGL-enhanced scenes, and a turning object.
Three requirements distinguish this workflow from a generic drawing prompt.
First comes factual behavior. Claude should collect the real counts, thresholds, dimensions, or curves and encode them in a small model. The motion, readout, and caption should then read from that model. A changing number should describe the same state that moves the parts; it should not function as decorative text.
Before building geometry, Claude must also develop a concept and a parts list. The prescribed list contains at least 40 parts, grouped into the base, structure, mechanism, controls, and focal subject. This deliberate stylistic constraint is intended to avoid flat slabs or abstract stacks masquerading as explanations. It does not, by itself, make a diagram more accurate.
Construction and verification have their own rules. Static geometry is computed ahead of time, solids are painted in depth order, and wrapping parts may need separate front and back sections. The finished figure should undergo browser captures, close-up inspection, and automated checks.
These rules reduce how much the user has to specify repeatedly. They don't establish deterministic output or guarantee that Claude will choose an appropriate metaphor. The published examples demonstrate the creator’s results, not independently measured consistency across Claude Code versions.
Ask for the Concept, Then Specify the Deliverable
Once installed, Anatomy can be invoked directly:
/anatomy explain how a token bucket rate limiter works, interactive
In this documented repository example, the user names the technical behavior and Claude chooses the physical representation.
The project distinguishes three prompt modifiers. interactive requests pointer and keyboard behavior; without it, the project says the result is a still drawing. WebGL requests shader effects such as fire, water, or moving light. 3D requests parts that turn in depth and are re-projected and re-sorted as they move.
For a documentation task, specify both the behavior and the destination. One repository example asks for:
/anatomy a figure for our Next.js docs on database connection pooling:
a pool of 10 connections, requests borrow one and give it back,
and when all 10 are busy new requests wait in a queue.
A React component plus a static HTML preview, dark theme.
The prompt defines the capacity, the waiting behavior, the integration target, and a preview format that can be reviewed separately. That makes it more actionable than a request for a polished database illustration.
Documented output options include standalone HTML, an SVG file with embedded styles, and React/Next.js components. Choose the least complicated format that serves the page. A static explanation doesn't necessarily benefit from shaders or continuously changing geometry.
Review the Model, SVG, and Shaders Separately
Inspect Anatomy’s work at two stages: the skill’s source before generation, and the generated project before publication.
Start with SKILL.md to understand what Claude is being asked to follow. Then inspect references/ for the detailed rules, kit/ for drawing helpers, scripts/ for checks, and examples/ for complete implementations. The README says built example pages are committed, so their HTML can be opened directly.
For generated output, separate explanation quality from visual polish:
- Check the concept-to-object mapping. Identify what each important motion means. For connection pooling, verify that the figure distinguishes borrowing a connection, returning it, and waiting when the pool is full. Attractive machinery should not obscure those states.
- Inspect the behavioral model. Find the constants and state transitions driving the animation. Confirm thresholds, units, and edge cases against the system being documented. Sharing one model across the readout and motion prevents disagreement between them, but both can still share an incorrect assumption.
- Review SVG geometry and depth order. SVG paints later elements over earlier ones. Check pipes, springs, cables, and moving parts for impossible intersections or incorrect occlusion, particularly during transitions rather than only at rest.
- Inspect WebGL integration. The documented approach places a shader canvas between back and front SVG layers using the same camera. Verify that the effect stays inside the intended region and that the underlying figure remains understandable without WebGL.
- Review generated scripts, imports, asset references, and event handlers before merging a component or publishing an HTML page. Check the repository’s and any included third-party material rather than assuming every asset is cleared for marketing use.
Sources
- Anatomy project pageskills.wheresryan.sh
- public repositorygithub.com
- build notesskills.wheresryan.sh
