Skip to content
Get packs

Guide · Open source

How to use anatomy: install the Claude skill and make isometric figures

Updated · written with AI from the project's own documentation and checked against our catalogue data

Anatomy is an agent skill for Claude and other coding agents that explains a technical idea by building a physical object whose working mirrors that idea, drawn as an interactive isometric SVG. This guide shows how to install it, run your first figure, and decide whether it fits your work. By the end you will know the prerequisites, the install commands from the README, and what the output can and cannot do.

Anatomywheresryan22/anatomy · ★ 24k · MIT

Quick start

  1. 1Check Node.js. Confirm you have Node.js 20.10 or later installed.
  2. 2Pick your agent. Choose a supported agent: Claude Code, Antigravity, OpenCode, Codex, or MiniMax Code.
  3. 3Install the skill. Run npx skills add wheresryan22/anatomy -g -a claude-code, or swap in your agent name after -a.
  4. 4Invoke the skill. In your agent, type /anatomy (or $anatomy in Codex) followed by the idea you want explained.
  5. 5Choose interactive or static. Ask for an interactive figure if you want pointer and keyboard response.
  6. 6Open the output. Open the generated HTML page or SVG file in a browser to view and interact with it.

Check the requirements before you install

Anatomy needs Node.js 20.10 or later and a supported coding agent such as Claude Code, Antigravity, OpenCode, Codex, or MiniMax Code. The skill runs inside one of these agents, so it does nothing on its own.

The README says the kit uses only Node's built-in modules and needs no API keys, so there is no separate package to install.

  • Node.js 20.10 or later
  • One supported agent: Claude Code, Antigravity, OpenCode, Codex, or MiniMax Code
  • No API keys required, according to the README

Install the skill with the skills CLI

Anatomy is a standard Agent Skill: a folder with a SKILL.md at its root. The README's global install for Claude Code uses the skills CLI with the -g flag, which installs for your user account.

If you run the bare command without -a, the CLI asks which agents to set up. Add -a to skip that prompt for a specific agent.

  • Claude Code, global: use -a claude-code, which installs to ~/.claude/skills/anatomy
  • Antigravity, global: use -a antigravity
  • OpenCode, global: use -a opencode
  • Codex, global: use -a codex
  • One project only: leave out -g; the README lists .claude/skills/anatomy for Claude Code
npx skills add wheresryan22/anatomy -g -a claude-code

Generate your first figure

In Claude Code, invoke the skill with /anatomy followed by a plain request describing the idea you want explained. The README's example asks for a token bucket rate limiter as an interactive figure.

For Antigravity, OpenCode, and MiniMax Code the README says the same /anatomy command works. In Codex, type $anatomy instead.

  • Name the idea clearly, such as how a cache key decides when to skip work
  • Ask for interactive if you want the figure to respond to the pointer and keyboard
/anatomy explain how a token bucket rate limiter works, interactive

Choose the right output type

Anatomy makes three kinds of figure. SVG is the core: solid isometric parts in a card with a live readout. SVG plus WebGL adds shader effects such as fire, water, and light. The 3D mode is labelled beta in the README and turns some moving parts in true 3D.

The SVG output can ship as a standalone HTML page, a lone .svg file with its styles embedded, or React or Next.js components. Each figure can be light or dark, and the README says light is the theme designed for first.

  • SVG: standalone HTML, lone .svg file, or React/Next.js components
  • SVG plus WebGL: effects drawn in a canvas between SVG layers
  • 3D (beta): selected parts re-projected each frame

Know what the output is not for

Anatomy produces stylized isometric art, not data charts. If you need a plain static diagram or a chart for a report, a tool built for that job is a better fit.

The README also says the 3D mode is beta and is not production-ready 3D graphics. Treat it as an explanatory aid, not a rendering engine.

  • Not for data reports or charts
  • Not for production 3D graphics (3D mode is beta)
  • Not usable without a supported agent

What people use it for

  • Explaining a rate limiter or cache logic to a team as an interactive figure
  • Students seeing how a mechanism such as a dial or gauge works
  • Teachers preparing interactive visual explanations of physics or engineering
  • Building an illustrated React or Next.js component for a technical article

Frequently asked questions

Is anatomy free to use?

The repository is released under the MIT licence, as stated in the README and listed licence. The README says it needs no API keys, but your coding agent may have its own terms.

What are the requirements for anatomy?

You need Node.js 20.10 or later and a supported agent such as Claude Code, Antigravity, OpenCode, Codex, or MiniMax Code. The README says it has no dependencies beyond Node's built-in modules.

How do I install anatomy in Claude Code?

Run npx skills add wheresryan22/anatomy -g -a claude-code. The README says this installs to ~/.claude/skills/anatomy. Then type /anatomy followed by your request in Claude Code.

Can I use anatomy for data charts?

No. The README says the output is stylized isometric art, so people who need plain static diagrams or charts for data reports should use a different tool.

Is the 3D mode ready for production?

The README labels the 3D mode as beta, and it is not positioned as production-ready 3D graphics. Use it for explanations rather than production rendering.

How does anatomy compare with Mermaid, D3.js, Excalidraw, or draw.io?

Those are comparable projects listed in the source. Anatomy is unusual because an agent generates a physical, isometric illustration from a prompt, whereas tools like Mermaid and draw.io are built for diagram authoring and D3.js for data-driven graphics.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Anatomy suits developers, students, and teachers who already use Claude Code or another supported agent and want an interactive, illustrated explanation of a mechanism or system. If you need a plain diagram, a data chart, or production-grade 3D, pick a tool built for that job, such as Mermaid, D3.js, Excalidraw, or draw.io.

Install options & downloads