One Open Source Project a Day (No. 256): Anatomy — Have Claude Invent a Machine for Any Technical Concept and Draw It as an Interactive Isometric Illustration

Anatomy is an Agent Skill. Give it a technical concept and it invents a physical device whose behavior embodies that concept (a cache key becomes a pin-tumbler lock, a shared GPU context becomes a gantry plotter), then drives the picture from a small model to produce an interactive isometric SVG illustration, with optional WebGL shaders and 3D. A dependency-free drawing kit, a nine-step workflow, and built-in geometry and overlap audits. Works with Claude Code, Codex, OpenCode, and more. MIT License, about 25k Stars.

·6 min read·AI Engineering
Open SourceAnatomyAgent SkillSVGVisualizationWebGLClaude Code

Introduction

"A cache key is a pin-tumbler lock. A shared GPU context is a gantry plotter."

This is the 256th article in the "One Open Source Project a Day" series. Today's project is Anatomy.

The hard part of explaining a technical concept is rarely the knowledge itself; it's finding the right metaphor. How do you draw a token-bucket rate limiter? Boxes and arrows get forgotten after one look. A machine with a tap, a bucket, and an outlet valve, one you can drag and watch the numbers change on, sticks.

Anatomy turns that into an Agent Skill: you hand it a concept, Claude first invents a physical device whose operation matches the concept, then draws it as an interactive isometric illustration. The repo was created on 2026-10-08 and has about 25k Stars.

What You Will Learn

  • Anatomy's core move: invent the object first, then draw it
  • The nine-step workflow, and why "every number comes from the same small model that moves the parts"
  • Three output kinds: plain SVG, SVG + WebGL, and 3D (beta)
  • How to install and invoke it, and when it isn't the right tool
  • Its built-in verification

Prerequisites

  • Having used Claude Code or a similar agent and installed a Skill
  • Basic knowledge of SVG / HTML
  • Optional: React and WebGL

Project Background

What It Is

Anatomy is an Agent Skill that has Claude explain a technical idea by inventing a physical object whose behavior embodies the concept, for example a cache key as a pin-tumbler lock, or a shared GPU context as a gantry plotter. It targets Claude Code and also runs in Antigravity, OpenCode, Codex, and MiniMax Code.

Project Stats

  • ⭐ GitHub Stars: about 25,360
  • 🍴 Forks: about 2,120
  • 💻 Language: JavaScript
  • 📅 Created: 2026-10-08
  • 📄 License: MIT
  • 👤 Author: Ryan (@wheresryan22)

What It Does

The Problem It Solves

Typical technical diagrams:
  Boxes + arrows → understandable, forgettable
  Numbers are hand-filled and don't match what the picture does
 
Anatomy:
  Invent a machine whose operation is the concept
  ↓ parts are driven by a small model
  ↑ every number on screen comes from the same model that moves the parts

Three Output Kinds

KindDetails
SVGSolid isometric parts with four-tone shading. Delivered as standalone HTML, a lone .svg, or React / Next.js components
SVG + WebGLShaders for fire, exhaust, water, caustics, light, glow, and steam, rendered between back and front SVG layers in the same camera. The SVG still reads without WebGL
3D (beta)Moving parts are re-projected and re-shaded every frame

Figures come in light and dark themes (light is designed first), and everything goes still under reduced motion. Print output is available as A4 PDFs via scripts/print.mjs.

Quick Start

# Quick install
npx skills add wheresryan22/anatomy -g
 
# Target a specific agent
npx skills add wheresryan22/anatomy -g -a claude-code
# Others: antigravity / opencode / codex / minimax-code

You can also git clone it into the agent's skills folder (for example ~/.claude/skills/anatomy), or download the ZIP. With Codex, browser checks may need sandbox approval.

Invoke it

/anatomy a token bucket rate limiter

In Codex it's $anatomy. The official sample prompts include a token bucket rate limiter, a connection pool React component, a CDN edge cache SVG, a Bunsen burner with a WebGL flame, and an espresso machine. Tip: name the idea (ideally with real numbers) or the object, and say where it will live (HTML, SVG, React) and which theme.

Requirements

  • Node.js 20.10 or later (built-in modules only)
  • Chrome or Chromium for the checks
  • React 18 or later, only for React output
  • A supported agent

A Deeper Look

Layout

  • SKILL.md: the workflow and condensed craft rules
  • kit/: the dependency-free drawing library: isometric camera, solids and parts (iso-kit), lathe parts, tubes and cables, a WebGL layer, a 3D runtime, and React components
  • references/: longer guides covering craft, the kit API, motion, React, verification, WebGL, the walkthrough, and 3D

The Nine-Step Workflow

  1. Collect the true numbers
  2. Invent the object
  3. Write a parts list
  4. Plan the world
  5. Build the geometry once with the kit
  6. Paint back to front
  7. Frame it in a card with a title, hint, and live readout
  8. Make it live (pointer and keyboard motion)
  9. Verify it like a critic

The key is that every number in the figure comes from the same small model that also moves the parts, so the picture and the numbers can't drift apart.

Verification: Not Done Just Because It's Drawn

Most AI drawing stops at generation. Anatomy builds verification into the flow:

  • kit/audit.mjs checks that nothing passes through anything else and that overlaps are depth-ordered correctly
  • Headless Chrome scripts (capture, drive, lines, turn-check) produce screenshots, close-ups, and contact sheets, and the skill reads every PNG

That's what keeps a geometrically busy isometric figure trustworthy.

Examples

The repo ships dial-indicator (about 300 lines), desk-computer, arcade-cabinet, raptor-engine (11 assemblies, WebGL plume), ripple-tank, test-rig and spot-plate (React), and turning-dial (3D). Most build with node examples/<name>/build.mjs, with optional --light or --audit.

Limits

  1. Not a chart library: no axes, no data plots
  2. Suited to machines, instruments, tools, and furniture, not people or maps
  3. Slow by design: one figure takes a long session
  4. Shaders need WebGL
  5. 3D is still beta: the 380-part stress test ran at roughly 20 fps

Community and Contributing

Figures can be published to the anatomy-community gallery through a pull request the agent opens for you. Contributions follow CONTRIBUTING.md, which includes no code comments and keeping existing examples byte-identical. The repo also provides issue templates, a changelog, a code of conduct, and a security policy.

Project Links and Resources

Summary

Key Takeaways

  1. Idea: invent an object whose operation embodies the concept, then draw it
  2. Trustworthy numbers: figures come from the same model that drives the parts
  3. Three outputs: SVG, SVG + WebGL, and 3D (beta)
  4. Built-in verification: geometry and overlap audits plus a screenshot-by-screenshot review
  5. Limits: not a charting tool, no people or maps, and generation is slow

Who This Is For

  • People who need to explain system designs, algorithms, or protocols clearly to a team or readers
  • Anyone making technical blogs, docs, or courses who wants moving diagrams
  • Developers curious about how an Agent Skill organizes workflow, verification, and reference material

Suggested First Steps

Install it and try one concept you know well, such as /anatomy a token bucket rate limiter, then check whether the metaphor fits and the numbers agree. After that, read SKILL.md and references/ to see how it breaks the process into steps and adds verification; the same structure carries over to Skills of your own.

Check out PrimeSkills — a curated marketplace of AI agents and skills that have been validated in real-world, enterprise-grade workflows. No fluff, just what actually works.

Find more useful knowledge and interesting products on my Homepage

← Back to Blog