Anatomy Agent Skill Guide

Key takeaways#

• Anatomy is an open-source agent skill for creating interactive isometric technical illustrations.
• It is designed for Claude Code and also documents use with Antigravity, OpenCode, and Codex.
• The skill outputs SVG, SVG plus WebGL hybrid figures, standalone HTML, standalone SVG files, and React or Next.js components.
• The strongest fit is explaining real-world machines, software systems, and abstract technical flows with physical metaphors.

What Anatomy is#

Anatomy is a GitHub-hosted agent skill by wheresryan22. The project describes itself as a way for an agent to explain an idea by building it as a real, working object. Instead of returning a flat diagram, the skill creates shaded isometric illustrations with a small model behind the moving parts. That model drives geometry, labels, interaction, and the live readout.

The repository is most clearly a resource for AI-agent users rather than a standalone SaaS product. You add the skill to an agent environment, then ask it to create a visual explanation. The README examples include technical metaphors such as a cache key as a pin-tumbler lock or one GPU context serving many canvases as a gantry plotter visiting wells.

Quick start#

For Claude Code, the README documents this global install command:

npx skills add wheresryan22/anatomy -g -a claude-code

After installation, you can call the skill with a prompt such as:

/anatomy explain how a token bucket rate limiter works, interactive

The same package also documents use with other agents. OpenCode can use /anatomy, while Codex uses $anatomy. The README notes that the kit uses Node built-in modules and does not require API keys or a separate npm install for the generated kit.

What it creates#

Anatomy supports three main output styles. The core mode is SVG: shaded isometric parts, a framed layout, live readout, eased motion, and optional export as HTML, SVG, or a React/Next.js component. The second mode combines SVG and WebGL for effects such as fire, water, steam, caustics, lamp light, or glow while keeping the SVG readable when WebGL is not available. The third mode is an experimental 3D path where moving parts are re-projected and re-shaded every frame.

The gallery examples show why this matters. A Raptor engine illustration can split into assemblies on hover. A ripple tank combines SVG apparatus with WebGL waves and optics. A turning dial example shows the beta 3D mode with many moving parts.

When to use it#

Use Anatomy when a normal diagram is too static but a full custom frontend is too expensive. It is a strong fit for architecture docs, explainer posts, onboarding lessons, product education, and technical talks where the audience benefits from seeing a system as a machine. It is also useful for agent workflows because the output can become code, not just a one-off image.

Avoid it when you only need a simple screenshot, a quick Mermaid chart, or a polished brand illustration. Anatomy is built for explanatory mechanics. It shines when the concept has parts, state, input, output, and motion.

Source notes#

The repository lists an MIT license, a project site at skills.wheresryan.sh/anatomy, and a large public GitHub audience. As with any generated visual content, review the final geometry, labels, and claims before publishing. The skill can build a useful explanatory object, but the user is still responsible for checking that the metaphor matches the real system.