What does the Anatomy skill make?
Each figure is a small machine built from many shaded parts that you can rotate, hover and inspect, inside a card with a title and a live readout. A rate limiter becomes a bucket filling with tokens; a cache key that skips work becomes a pin-tumbler lock. The idea is to make abstract systems physical enough to understand at a glance.
| Mode | What you get |
|---|---|
| SVG | The core output: a standalone HTML page, a single SVG file or React/Next.js components. |
| SVG + WebGL | Shader effects such as fire, water, glow and steam; the SVG still works without WebGL. |
| 3D (beta) | Parts that move in true 3D, re-shaded every frame. |
How do you install and use it?
- Install it as a skill:
npx skills add wheresryan22/anatomy -g -a claude-code(Node 20.10 or newer; no API keys). - In Claude Code, run
/anatomyfollowed by the idea, for example “explain how a token bucket rate limiter works, interactive”. - Name real numbers or the real object, and say what you want back — standalone HTML, a lone SVG or a React component — and light or dark theme.
Builds are deliberately slow (minutes, and longer for a full 3D check) because the skill renders and checks its own figure in a browser.
What is a Claude Code skill?
A skill is a packaged set of instructions, scripts and resources that a coding agent loads when a task matches it — a reusable “how we do this” for the agent. Anatomy is one example; teams also write skills for their own deployment steps, review checklists or house style. Skills are a big reason coding agents have moved from writing snippets to delivering finished work.
What are its limits?
- It is not a charting tool — no axes or data plots.
- It draws machines, instruments and objects, not people, bodies or exact maps; for medical anatomy you need dedicated 3D anatomy software or a custom WebGL build.
- The 3D mode is still beta, and shaders need WebGL.
How can businesses use interactive diagrams like this?
Interactive explainers help in product pages, onboarding, training and sales demos — anywhere a moving picture explains a system faster than text. We build interactive, animated experiences too; our own AI Lab is an example. For a custom build, see custom AI software development.
Frequently asked questions
Is Anatomy free?
Yes. It is open source under the MIT licence and needs no API keys; you only pay for your coding agent’s model usage.
Does Anatomy create 3D human anatomy models?
No. Despite the name, it draws machines and systems, not human bodies.
Which agents does it work with?
Claude Code (with /anatomy), and other agents that support skills, such as Codex and OpenCode.