Most technical explanations still rely on boxes and arrows. The Anatomy skill changes that. Built by Ryan (@wheresryan22), it is a Claude Code (and OpenCode/Codex) skill that takes a one-line idea and turns it into a crafted, interactive isometric figure — a real physical object whose working is the concept.
A cache that skips work when nothing changed becomes a pin-tumbler lock that only turns when every pin matches. A rate limiter becomes a physical token bucket machine. Every number the figure shows comes from the same small model that moves its parts.
What Anatomy Makes
Anatomy produces three kinds of figures, all sharing one isometric camera and craft rules:
- SVG — Solid isometric parts with four-tone shading, correct painter’s order, a framed card with title, hint, and live readout, plus calm eased motion.
- SVG + WebGL — Shaders for fire, water, plasma, exhaust, or light that live inside the same isometric drawing.
- 3D (beta) — Parts that truly turn in depth (dials, fingers, pieces that break off), re-projected and re-shaded every frame.
Examples that ship with the skill include a firing raptor engine, a ripple tank, a turning dial, an arcade cabinet, and more. Many are interactive: hover, drag, or press keys and the machine responds.
How to Install and Use It
Install with one command (Node 22+ recommended):
npx skills add wheresryan22/anatomy -g -a claude-code
Then in Claude Code:
/anatomy explain how a token bucket rate limiter works, interactive
Add the words interactive, WebGL, or 3D when you want those modes. The skill sizes the request first (Figure, Hero, or Epic) and tells you the estimate before it starts drawing.
Why It Matters for Designers and Developers
- Explanatory power — Readers understand because they recognize the machine, not because they parse a diagram.
- Consistency — Every value on the readout comes from the same model that drives the motion. Nothing pops or disagrees.
- Production-ready paths — SVG works everywhere; WebGL adds richness when needed; the figures can be published to a community gallery.
- Framework flexibility — Works framework-free or as React components. There is even an
anatomy-figurespackage for embedding finished pieces.
The skill is open source (MIT) and was released in October 2026. It already has strong traction because it turns a single sentence into something that feels like a small instrument on a bench — complete with knurled knobs, springs, and dials.
Try It Yourself
Install the skill, pick a technical idea you normally explain with slides or static diagrams, and ask Anatomy to build the machine that does it. The results are often more memorable than traditional illustrations, and they stay interactive in the browser.
Useful links:
- GitHub: https://github.com/wheresryan22/anatomy
- Skill site & gallery: https://skills.wheresryan.sh/anatomy
If you build something interesting with it, the skill can even help publish the figure to the community collection.
Have you tried Anatomy yet? What machine would you ask it to build first?
