Anatomy turns abstract tech concepts into interactive machines

Anatomy is an open-source agent skill that turns abstract technical concepts into working, interactive isometric machines.

Instead of the usual boxes, arrows, and boring flowchart diagrams, Anatomy builds a physical device whose mechanical movement explains how the system works. If you ask it to explain a cache key that skips unnecessary work, it invents a pin-tumbler lock that only turns when every pin matches. If you ask about database pooling or rate limiting, it translates requests into physical valves, pistons, or gantry plotters with real-time numeric readouts.

What it builds

Every figure generated by Anatomy is crafted in a consistent isometric perspective and comes in three flavors.

The core format is pure SVG. It draws solid isometric parts with four-tone shading from back to front, complete with smooth animations and live telemetry cards. You get the output as a standalone HTML page, a self-contained SVG file, or a React and Next.js component ready to drop into technical docs.

When clean vector lines fall short, Anatomy combines SVG with WebGL shaders. For elements like rocket exhaust, water ripples, caustics, and steam, a shader canvas sits neatly between background and foreground SVG layers without breaking the isometric camera angle.

There is also an experimental 3D mode. For complex mechanisms like rotating dials or articulating joints, it re-projects and re-shades moving parts frame by frame while keeping the rest of the illustration static.

How to run it

Anatomy runs as a standard agent skill folder built entirely on Node.js built-in modules. You do not need third-party npm packages or separate API keys.

You can install it globally via the skills CLI with npx skills add wheresryan22/anatomy -g, or clone the repository directly into your local agent skills folder. It works out of the box with Claude Code, Antigravity, OpenCode, Codex, and MiniMax Code. The entire package with examples is around 10 MB and requires Node.js 22.20 or later.

Once installed, you simply prompt your agent with /anatomy followed by the concept and your preferred constraints, such as real-world counts, limits, or light and dark themes. The agent writes the code, computes the underlying physical model, and even spins up headless Chrome behind the scenes to audit joint alignments.

Why it matters

Anatomy is one of the cleverest uses of coding agents we have seen for developer education. Instead of generating static screenshots or generic vector charts, it bridges code generation with interactive physical metaphors, making hard technical ideas immediately intuitive.

If you maintain open-source docs, write engineering blogs, or design landing pages, this is worth testing right away. Just keep in mind that its headless verification scripts might bump into sandbox permissions in strict environments like Codex, requiring you to approve temporary directory access.