Anatomy for Claude Code: Interactive SVGs for Documentation

Back

Kevin Riedl

11 min read · 12 Oct 2026
Last reviewed October 12, 2026

Next

Let a reader pull an engine apart, change a wave frequency or send a burst of API requests. Give each action a visible consequence. That is a useful brief for a technical illustration, and Anatomy gives a coding agent a way to build it.

Anatomy is an open-source agent skill by wheresryan22 that generates interactive isometric illustrations as editable web code. SVG supplies the geometry; JavaScript controls the behavior. WebGL can add effects such as water or exhaust, while a separate 3D mode handles rotating parts. The Anatomy README documents standalone HTML, SVG and React/Next.js output.

The interesting opportunity is a documentation component that readers can explore and developers can review. Here is how to install the skill, give it a precise brief and choose an embedding method that preserves the interaction.

Source review: 12 October 2026, repository commit 689dcf9. Demo descriptions come from the project's source. The prompt and acceptance example below are Wavect's proposed workflow; we have not benchmarked Anatomy or run that prompt.

What do the rocket engine, ripple tank and dial demos show?

Start with the creator's interactive gallery. The three examples in the announcement demonstrate different ways to make a mechanism readable.

The 3D reference marks that mode as beta. Treat these examples as evidence of the rendering approach. A detailed engine illustration does not establish engineering accuracy, manufacturing suitability or a validated simulation.

How do you install Anatomy in Claude Code?

For a personal Claude Code installation, run the command documented in the README:

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

The -g flag installs it for your user; -a claude-code selects Claude Code. The skill folder should contain ~/.claude/skills/anatomy/SKILL.md together with its kit and reference files.

Check the two Node requirements separately. Anatomy lists Node.js 20.10+ for its own builds and checks. Its README says the skills CLI version discussed there requires Node.js 22.20+. Chrome or Chromium is needed for browser verification; React 18+ is only needed for React output.

If you prefer Git, the repository documents this alternative:

git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

Inspect a third-party skill before using it in a project. Keep the selected revision with your project notes so a later update is deliberate. The current README also documents OpenCode and Codex support, although this walkthrough uses Claude Code.

Invoke it with /anatomy followed by the brief. If the skills directory was created during the current Claude Code session and the skill is missing, the README recommends /reload-skills.

Give Anatomy a mechanism, a learning goal and testable numbers

A useful first figure answers one question. For API documentation, that might be: why can a short burst succeed while the next request is rejected?

The following is an original example prompt. It describes a deliberately simple token bucket with a teaching clock. Adjust the model to match your API before publishing it.

/anatomy
Create an interactive isometric illustration for API documentation.
Explain burst limits with a token dispenser that holds at most 8 tokens.

Model:
- Start with 8 tokens. Each accepted request consumes 1 token.
- Refill at 2 tokens per second, capped at 8.
- Reject a request if fewer than 1 token is available. Do not queue it.
- Use a teaching clock: time advances only through the time controls.

Controls:
- Send 1 request; send 10 requests at the same instant.
- Advance 0.5 seconds; advance 10 seconds; reset.
- Show token balance and cumulative accepted/rejected counts.
- Derive the moving parts and every readout from the same state.

Deliver one self-contained HTML file plus its editable build source.
Use SVG; add no remote fonts, analytics or model calls.
Support keyboard and touch, visible focus and reduced motion.
Keep controls usable when decorative motion is disabled.
Include a static explanation and the expected results for each control.
List simplifications and checks performed.

The small model makes review possible. Refill follows balance = min(8, balance + 2 * elapsedSeconds). A request consumes a token only if the balance is at least one. Animating the dispenser must not change those rules.

Check the explanation with a repeatable sequence

These are calculated expectations for our example, not measured Anatomy results. Checking them catches a plausible-looking illustration that refills too quickly, exceeds its capacity or shows a counter disconnected from the animation.

How do you embed an Anatomy illustration in a website?

Choose the output format according to the interaction you need. A standalone HTML page is a convenient first target because it keeps the figure's markup, styling and behavior together. A React component offers closer integration with an existing application.

Why does the SVG stop responding inside an img tag?

SVG used as an image runs under image-context restrictions. MDN documents disabled JavaScript and restricted external resources in that context. An <img src="figure.svg"> is therefore suitable for a static illustration; it does not preserve JavaScript controls from an interactive page.

For an interactive embed, request the HTML output or integrate the SVG and its behavior into your application. Keep a static image for previews and sharing.

A standalone HTML embed

After saving your reviewed, self-contained output at the example path below, a starting embed could look like this:

<iframe
  class="anatomy-figure"
  src="/illustrations/anatomy-rate-limit.html"
  title="Interactive explanation of API burst limits"
  loading="lazy"
  sandbox="allow-scripts">
</iframe>

Add responsive dimensions in your site's stylesheet:

.anatomy-figure {
  display: block;
  width: 100%;
  height: clamp(24rem, 65vw, 42rem);
  border: 0;
}

MDN's iframe reference explains the title, loading and sandbox attributes. This is a starting configuration for a self-contained file, not a universal embedding contract. Test your content security policy and any asset loading it needs. Keep every control reachable on a narrow screen.

Put the learning goal, assumptions and expected outcomes in the surrounding article as ordinary HTML. A reader should still understand the mechanism when the embed cannot load. Google's guidance for AI features in Search also recommends making important content available in textual form. Structured explanations help readers and retrieval systems, but do not guarantee rankings or citations.

Using Anatomy with React and Next.js

The project's React integration guide separates static geometry and server-rendered art from the client component that handles movement. It also calls for matching rest poses before hydration.

Keep that boundary when integrating a figure. Load the complete documentation page during review, including repeated instances. Check for hydration warnings, ID collisions and animation loops that survive navigation. For typography, colors and approved interface patterns, give the agent your Claude Code design-system files.

What should you check before publishing?

Anatomy's verification workflow includes geometry and visual checks. Those checks can catch rendering defects. Domain review must separately establish that the mechanism, labels, units and simplifications teach the right thing.

Its motion and interaction guide describes keyboard input, touch, reduced motion and stopping offscreen work. Treat these as requirements to verify in your generated output.

• Check the model. Run a short sequence with known results. Reset midway through an animation and confirm that the labels still match the state.
• Use a keyboard and a phone. Every essential action should work without hover. Show focus, explain controls and avoid announcing every animation frame to a screen reader.
• Disable motion and WebGL separately. Reduced motion should preserve useful input. The underlying SVG and text should still explain the subject if a shader is unavailable.
• Measure the complete page. Check load size, response to input and scrolling with all its figures present. Start with SVG and add GPU effects when they explain something.
• Inspect network requests. A generated browser figure can run without new model calls. Confirm that your actual output has no unexpected remote fonts, analytics or services.
• Keep maintainable source. Save the prompt, model assumptions, selected skill revision, build source and accepted output together. Name an owner for later corrections.

The source kit uses the MIT license. Preserve the required notice when redistributing its code. Open-source licensing is separate from the cost of using a coding agent and reviewing its output.

Choose one explanation people currently struggle with

Useful candidates include a component's assembly order, a buffer filling up, or a valve changing a flow. Start with an explanation that already causes questions. Ask a few intended readers to predict the next state, then compare their answer with the illustration. That gives you a concrete way to assess its usefulness.

For a simple dependency graph, a conventional diagram may be enough. For numerical trends, use a chart. Anatomy earns its place when manipulating a mechanism helps someone understand it.

A generated illustration is normally built, reviewed and shipped as a page asset. If your goal is an interface that adapts during a conversation, our Intelligent UI and OpenUI implementation guide covers that separate application architecture.

To introduce this into a team's documentation process, bring one difficult explanation and its correct expected behavior. Wavect's AI enablement service is the relevant path for setting up a repeatable agent workflow and review process.