Anatomy
A Claude skill that builds interactive isometric SVG illustrations of machines to explain technical ideas.
- Stars
- 24k
- Forks
- 2k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 18 days ago
- Type
- AI model / agent
What it is
Anatomy is an agent skill for Claude and other coding agents. You ask for a figure explaining a technical idea, and it builds a physical object whose working mirrors that idea, drawn as an interactive isometric SVG with optional WebGL shader effects and beta 3D parts. The README says it uses only Node's built-in modules and needs no API keys.
- Generate an interactive explanation of a rate limiter or cache as a mechanical object
- Produce a standalone HTML page or lone SVG file for a blog post or docs
- Create React or Next.js components containing an animated figure
- Build a figure with a WebGL shader effect such as fire, water, or light
Great for
- Developers who want an explanatory diagram of a system or algorithm they can interact with
- Students learning how a mechanism or technical concept works
- Teachers preparing interactive visual explanations
- People already using Claude Code, Codex, OpenCode, or Antigravity who want illustrations from their agent
Not ideal for
- Users who need plain static diagrams or charts for data reports, since the output is stylized isometric art
- People without a supported coding agent, because the skill runs inside one
- Anyone needing production-ready 3D graphics; the README labels the 3D mode as beta
How to get it
- 1
Install with a package manager
You'll need: Node.js 20.10 or later · A supported agent such as Claude Code, Antigravity, OpenCode, Codex, or MiniMax Code
Install for Claude Code (global)
npx skills add wheresryan22/anatomy -g -a claude-codeInstall with the skills CLI, prompting for agents
npx skills add wheresryan22/anatomy -g - 2
Run it
- Install the skill with the npx command above
- Open Claude Code in your project
- Run /anatomy followed by a request, for example: explain how a token bucket rate limiter works, interactive
- Open the generated HTML file in a browser to view the figure
- 3
Get the most out of it
- Ask for a light or dark theme, since the README says light is designed for first and shaders included
- Use the WebGL variant for effects like fire, water, or light that lines cannot draw well
- Open the committed examples in the examples folder to see what the skill produces before prompting
- Export the figure as a standalone SVG or React component when embedding it in another site
Downloads
Strengths
- Installs with one command and needs no API keys or extra npm packages, per the README
- Figures are built to be interactive and to show live readouts from the same model that moves the parts
- Works across several agents (Claude Code, Antigravity, OpenCode, Codex, MiniMax Code) under the MIT license
Trade-offs
- The 3D mode is marked beta and is limited to a few moving parts in the examples
- Output depends on the underlying agent's model, so results will vary with the prompt and agent used
- The README is truncated, so details of the full feature set and limits are not fully visible here
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| anatomy (this) | 24k | AI model / agent | beginner | 18 days ago | Developers who want an explanatory diagram of a system or algorithm they can interact with |
| mermaid | 91k | Dev tool | beginner | 4 days ago | Developers who want diagrams stored as text alongside their code and docs |
| excalidraw | 135k | App | beginner | 4 days ago | Teams sketching diagrams or wireframes together in a shared canvas |
| diagram-design | 64.2k | AI model / agent | beginner | 5 days ago | Developers who already use a supported coding agent and want architecture or flow diagrams without learning a diagram language |
| watermarks-remover | 25.9k | AI model / agent | intermediate | 5 days ago | Developers who use AI coding agents and want written files scrubbed of provenance metadata |
| fireworks-tech-graph | 11.9k | AI model / agent | intermediate | 16 days ago | Developers who want architecture or flow diagrams from a text description inside Claude Code or Codex |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.