# What is the Anatomy Claude Code skill, and how do you make interactive 3D diagrams with it?

> Anatomy is a free, open-source agent skill for Claude Code (and other coding agents) that explains a technical idea by drawing it as an interactive isometric machine — for example, a cache shown as a lock. You type /anatomy and a description; it produces editable SVG and JavaScript, with optional WebGL effects and a beta 3D mode. Despite the name, it draws machines, not human anatomy.

By Vijay Sharma, Agentic AI Tech Hub · Updated October 23, 2026 · https://www.agenticaitechhub.com/blog/anatomy-claude-code-skill

## 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?

1. Install it as a skill: npx skills add wheresryan22/anatomy -g -a claude-code (Node 20.10 or newer; no API keys).
2. In Claude Code, run /anatomy followed by the idea, for example “explain how a token bucket rate limiter works, interactive”.
3. 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](https://www.agenticaitechhub.com/ai-lab) is an example. For a custom build, see [custom AI software development](https://www.agenticaitechhub.com/blog/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.