What is Anatomy? The Claude Code skill that builds interactive isometric machines
Short answer
Anatomy is an open-source Claude Code skill by Ryan (@wheresryan22). You name a technical idea in one line. Claude invents a physical machine whose working is that idea, then draws it as a live isometric figure you can rotate, press and read. Figures ship as SVG, with optional WebGL shaders for fire and water, and a beta true-3D mode. Install with one npx skills add command. It also runs in OpenCode, Codex and Antigravity.
What is the Anatomy Claude Code skill?
Most "how it works" diagrams are boxes and arrows. You still have to imagine the motion. Anatomy flips that. Its rule, written at the top of the skill file, is: "The object is the explanation." Claude has to invent a real machine whose parts do the idea, not a labeled flowchart.
Ryan launched it on X on October 10, 2026. The post has drawn millions of views and tens of thousands of likes. The GitHub repo (created October 8, 2026) is MIT-licensed and, as of October 14, 2026, sits at about 8,600 stars. Docs and a live gallery sit at skills.wheresryan.sh/anatomy.
A queue becomes a marble run. An LRU cache becomes a bookcase. A bloom filter becomes a fruit machine. Same pattern every time: the thing you watch move is the thing being explained.
How do you install Anatomy?
For Claude Code on your user account:
npx skills add wheresryan22/anatomy -g -a claude-code
That lands in ~/.claude/skills/anatomy. Swap the agent flag for OpenCode (-a opencode), Codex (-a codex) or Antigravity (-a antigravity). Drop -g to install into the current project only. You can also git clone the repo into the matching skills folder, or unzip a download there.
The README says the kit needs Node 20.10 or later and uses only Node's built-in modules. No separate npm install for the skill itself. A DEV write-up from October 13 notes that the skills CLI (v1.7.x) can need Node 22.20+, even though Anatomy itself supports Node 20.10+. If npx skills add crashes on Node 20, upgrade Node or clone by hand.
How do you use Anatomy after install?
In Claude Code:
/anatomy explain how a token bucket rate limiter works, interactive
Three words change the output, and only when you write them:
- interactive — pointer and keyboard. Leave it out and you get a still drawing.
- WebGL — shaders for fire, water, plasma, air and light, drawn in the same isometric camera as the parts.
- 3D — parts that really turn in depth. Slow. Hours, not minutes. Still marked beta.
Name the idea, not the drawing. "Explain how an LRU cache evicts entries" is enough. If you already know the object, name it and any true numbers that matter. Say where it goes if you want React components for a Next.js docs page, or a dark theme.
You don't always need the slash command. The skill's description covers requests for explanatory diagrams and interactive explainers, so Claude can reach for it on its own. In Codex the command is $anatomy.
If you already run agent workflows, this slots in next to Claude Code Projects and tools that turn code into motion like ManimGX or Claude Motion.
What does Claude actually build?
Between your line and the finished figure, the skill runs a fixed order. The quality of the first four steps matters most: size the job, write a small truth model with real numbers, invent the object, then list at least forty parts grouped into base, structure, mechanism, controls and one lit subject.
Three sizes gate the budget:
- Figure: 40 to 80 parts, SVG with at most one shader. About 30 to 90 minutes. Built without asking.
- Hero: 80 to 150 parts, several shaders or one turning part. About 2 to 4 hours. Announced first, then built.
- Epic: a whole vehicle, building or plant. Six hours or more. Claude gives an estimate and proposes a Hero unless you green-light the full version.
Ryan's published active times (review included, idle gaps out): watch movement 1 hour 54 minutes; seasons (3D) 1 hour 57 minutes; Raptor engine 10 hours 33 minutes (first working version in 38 minutes); turbofan 14 hours. Expect a working page in the browser within the first hour. Most of the time goes into the second look at 4× zoom.
Every figure follows craft rules: one isometric camera, solid parts painted back to front, four tones by facing, exactly one lit accent, no words inside the drawing, and every readout from the same model that moves the parts. Figures pause off-screen, answer keyboard as well as pointer, announce readout changes to screen readers, and go still under reduced motion.
SVG, WebGL or 3D: which mode?
Most figures are pure SVG. That is the core. When the idea needs fire, exhaust, water or lamp light, Claude adds a WebGL canvas between a back and a front SVG so the effect sits inside the drawing. A few figures use the beta 3D mode: moving parts re-projected and re-shaded every frame while the rest stays static art. The site notes a small turning figure at about 60 fps, and a dense 380-part test hand at about 20 fps. A full 3D audit can take fifteen to twenty minutes.
Finished figures can also ship in your product. npm install anatomy-figures gives React components and custom elements, with themes (dark, light, paper, blueprint, sepia) and CSS tokens for every fill and line.
What are the limits?
It is slow when it is good. The skill will not trade the forty-part floor for speed on its own. Ask for something quick if you need a Figure, not a Hero.
Claude is better at building than at seeing. Treat the first figure as a draft. Play with it, say what feels off, ask again. References are for mood and materials, not for copying someone else's drawing.
3D is beta and one subject at a time. And token use can climb on dense Epics. If you run this through Claude Code a lot, the Claude Code cost calculator helps estimate API spend. Want prompt ideas for other agent jobs? Grab our 50 free AI prompts that actually work.
Key facts
- Product: Anatomy, an Agent Skill for Claude Code (also OpenCode, Codex, Antigravity).
- Author: Ryan, @wheresryan22. Launch post October 10, 2026.
- Repo: wheresryan22/anatomy, created October 8, 2026. MIT. About 8,600 stars as of October 14, 2026.
- Install:
npx skills add wheresryan22/anatomy -g -a claude-code. Node 20.10+ for the kit. - Modes: SVG (core), SVG + WebGL, 3D (beta).
- Sizes: Figure ~30 to 90 min; Hero ~2 to 4 h; Epic 6 h+ with a confirm before start.
- Docs and gallery: skills.wheresryan.sh/anatomy. React package:
anatomy-figures.
FAQ
What is Anatomy Claude Code skill?
Anatomy is an open-source Agent Skill by Ryan (@wheresryan22) for Claude Code. You name a technical idea in one line; Claude invents a physical machine whose working is that idea, then builds it as an interactive isometric figure in SVG, with optional WebGL shaders and a beta 3D mode. It also runs in OpenCode, Codex and Antigravity.
How do I install the Anatomy skill?
For Claude Code, run: npx skills add wheresryan22/anatomy -g -a claude-code. That installs to ~/.claude/skills/anatomy. Swap -a opencode, -a codex or -a antigravity for those agents. Or clone the GitHub repo into the matching skills folder. The kit needs Node 20.10 or later and uses only Node built-ins.
How do I use Anatomy after install?
In Claude Code, type a line like: /anatomy explain how a token bucket rate limiter works, interactive. Add WebGL for fire, water or plasma shaders, or 3D for parts that turn in depth. Name the idea, not the drawing. Without the slash command, Claude can still pick the skill when you ask for an interactive explainer or technical illustration.
How long does an Anatomy figure take to build?
The skill sizes work into Figure (40 to 80 parts, about 30 to 90 minutes), Hero (80 to 150 parts, about 2 to 4 hours) or Epic (a whole vehicle or plant, 6 hours or more; Claude asks before starting). Ryan's published timings include a watch movement in 1 hour 54 minutes and a Raptor engine that took 10 hours 33 minutes after a first working version in 38 minutes.
Is Anatomy free and open source?
Yes. The skill and the figures are MIT-licensed. Source is on GitHub at wheresryan22/anatomy. There is also an anatomy-figures npm package for shipping finished React or custom-element figures on a site.
How is Anatomy different from ManimGX or Claude Motion?
Anatomy builds interactive isometric machine figures as SVG (and optional WebGL or 3D) for explainers. ManimGX renders Manim-style math and 3D scenes to MP4 for agents. Claude Motion builds business animations as code and exports MP4. They solve different jobs: diagrams you can poke versus video you watch.
Sources
- @wheresryan22 launch post, Oct 10, 2026
- Anatomy repository and README on GitHub
- Anatomy docs and gallery (skills.wheresryan.sh)
- DEV: local-model Anatomy install notes, Oct 13, 2026
- Agent Skills specification
Keep reading
Get AI news decoded weekly.
Decoded is a free weekly email from Era of Minds. The AI stories that actually matter, in plain English. Five minutes, no hype.
You're in. Check your inbox.
Confirm your email and your 50 AI prompts are on their way.
Free. Unsubscribe anytime. Free gift: 50 AI prompts that actually work, sent the moment you join. More about Decoded