Agent skill for creating isometric illustrations

A developer publishing as wheresryan22 released Anatomy, a Claude skill that turns a technical concept into an interactive isometric illustration built from dozens of shaded parts, installable via `npx skills add wheresryan22/anatomy -g` and runnable in Claude Code, Antigravity, OpenCode, Codex and MiniMax Code. The kit requires no API keys and no `npm install`, using only Node's built-in modules, and outputs standalone HTML pages, lone `.svg` files or React/Next.js components across three figure types: SVG, SVG plus WebGL shaders, and a beta 3D mode that re-projects and re-shades about 90 parts per frame. The skill checks its own work by zooming in on every joint, and an audit of the raptor-engine example proves no pipe passes through anything at rest, apart or in any intermediate frame.

A Claude skill that explains an idea by building it as a real, working object. Also runs in Antigravity, OpenCode, Codex and MiniMax Code. Crafted, interactive isometric figures with many small precise parts, in SVG, WebGL and 3D. Quick start quick-start · Gallery gallery · What it makes what-it-makes · Install install · Usage usage · Examples examples · How it works how-it-works · Limits limits examples/raptor-engine , light theme, firing. The engine and stand are SVG; the plume is a WebGL shader in the same isometric camera. Ask Claude for a figure that explains a technical idea, and Anatomy has it invent a physical thing whose working is the concept. A cache key that skips work when nothing changed becomes a pin-tumbler lock that only turns when every pin matches. One GPU context serving many canvases becomes a gantry plotter whose single print head visits 16 wells. Then Claude builds that thing out of dozens of small, solid, shaded parts, puts it in a framed card with a title, a hint and a live readout, makes it move calmly under the pointer and the keyboard, and checks its own work by zooming in on every joint. Every number the figure shows comes from the same small model that moves its parts. npx skills add wheresryan22/anatomy -g The CLI asks which agents to set up Claude Code, Antigravity, OpenCode, Codex, MiniMax Code . To skip the question, add -a claude-code , -a antigravity , -a opencode , -a codex , or -a minimax-code . Then, in Claude Code: /anatomy explain how a token bucket rate limiter works, interactive For Antigravity, OpenCode, Codex, or MiniMax Code, target that agent: -a antigravity , -a opencode , -a codex , or -a minimax-code . Antigravity, OpenCode and MiniMax Code take the same /anatomy command; in Codex, type $anatomy . That's it. No API keys and nothing to npm install : the kit uses only Node's built-in modules. | <sub raptor-engine : hover to take it apart into 11 assemblies. An audit proves that no pipe passes through anything, at rest, apart and in every frame between.</sub | <sub ripple-tank : SVG apparatus over two WebGL layers lamp light and caustics on the paper, reflections in the water driven by a dispersion and optics model.</sub | | <sub turning-dial : the 3D mode beta . About 90 parts are re-projected and re-shaded every frame as you drag the dial.</sub | <sub dial-indicator : the smallest example, about 300 lines. Hover to slide the carriage; the needle reads each block.</sub | Every screenshot is the light theme of a page in examples/ https://github.com/wheresryan22/anatomy/blob/main/examples , captured with the skill's own scripts/capture.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/capture.mjs and scripts/drive.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/drive.mjs . The built pages are committed: open any .html in examples/ to try it. Three kinds of figure. All three share one kit, one camera and one set of craft rules. | Kind | What it is | Example | |---|---|---| | SVG | The core. Solid isometric parts with four-tone shading, painted back to front, in a card with a live readout and eased motion. It ships as a standalone HTML page, a lone .svg file with its styles embedded, or React/Next.js components. | dial-indicator , desk-computer , arcade-cabinet , test-rig | | SVG + WebGL | For what lines can't draw: fire, exhaust, water, caustics, lamp light, glow, steam. The shader runs in a canvas between a back and a front SVG, in the figure's own isometric camera, so it sits inside the drawing. The SVG still reads without WebGL. | raptor-engine , ripple-tank | | 3D <sup beta</sup | Parts that turn in true 3D: a dial or turntable that spins, fingers that flex, a piece that breaks off and falls. The moving parts are re-projected and re-shaded by the kit's own rules every frame; the rest of the figure stays static art. | turning-dial | Each figure is light or dark. Light is the theme the skill designs for first, shaders included. Anatomy is a standard Agent Skill https://agentskills.io : a folder with a SKILL.md at its root. This repository is that folder. Pick one way in: | | Command | Installs to | |---|---|---| | skills CLI , for you Claude Code | npx skills add wheresryan22/anatomy -g -a claude-code | ~/.claude/skills/anatomy | | skills CLI , for you Antigravity | npx skills add wheresryan22/anatomy -g -a antigravity | ~/.gemini/antigravity/skills/anatomy | | skills CLI , for you OpenCode | npx skills add wheresryan22/anatomy -g -a opencode | ~/.config/opencode/skills/anatomy | | skills CLI , for you Codex | npx skills add wheresryan22/anatomy -g -a codex | ~/.agents/skills/anatomy | | skills CLI , for you MiniMax Code | npx skills add wheresryan22/anatomy -g -a minimax-code | ~/.minimax/skills/anatomy | | skills CLI , for one project | npx skills add wheresryan22/anatomy | .claude/skills/anatomy for Claude Code, .agents/skills/anatomy for Antigravity, OpenCode and Codex, .minimax/skills/anatomy for MiniMax Code | | git , for you Claude Code | git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy | ~/.claude/skills/anatomy | | git , for you Antigravity | git clone https://github.com/wheresryan22/anatomy.git ~/.gemini/antigravity/skills/anatomy | ~/.gemini/antigravity/skills/anatomy | | git , for you OpenCode | git clone https://github.com/wheresryan22/anatomy.git ~/.config/opencode/skills/anatomy | ~/.config/opencode/skills/anatomy | | git , for you Codex | git clone https://github.com/wheresryan22/anatomy.git ~/.agents/skills/anatomy | ~/.agents/skills/anatomy | | git , for you MiniMax Code | git clone https://github.com/wheresryan22/anatomy.git ~/.minimax/skills/anatomy | ~/.minimax/skills/anatomy | | git , for one project | git clone https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy | .claude/skills/anatomy Claude Code and OpenCode or .agents/skills/anatomy Antigravity, OpenCode, Codex and MiniMax Code | | Download , no git | see below | any of the folders above | With the skills CLI The skills https://github.com/vercel-labs/skills CLI finds the SKILL.md at the root of this repository and installs it as anatomy . By default it installs into the current project and asks which agents to set up. -g installs it for your user, and -a claude-code sets up Claude Code only. Use -a antigravity , -a opencode , -a codex or -a minimax-code for Antigravity, OpenCode, Codex or MiniMax Code only. The CLI copies the whole repository, examples included about 10 MB . It needs a recent Node.js: version 1.7.1 of the CLI asks for 22.20 or later. With git Clone the repository into one of the skill folders, so that SKILL.md ends up at <skills folder /anatomy/SKILL.md . For Claude Code use ~/.claude/skills/anatomy or .claude/skills/anatomy . For Antigravity use ~/.gemini/antigravity/skills/anatomy or .agents/skills/anatomy . For OpenCode use ~/.config/opencode/skills/anatomy or .opencode/skills/anatomy ; OpenCode also reads the Claude Code and .agents folders. For Codex use ~/.agents/skills/anatomy or .agents/skills/anatomy . For MiniMax Code use ~/.minimax/skills/anatomy or $MINIMAX DATA DIR/skills/anatomy if you moved its data folder or .minimax/skills/anatomy ; MiniMax Code also reads the Claude Code, Codex and .agents folders. For a project install, commit the folder so your team gets it too. To update later, git pull inside that folder. Download, without git Download the ZIP https://github.com/wheresryan22/anatomy/archive/refs/heads/main.zip , unpack it, rename the folder from anatomy-main to anatomy , and move it into ~/.claude/skills/ Claude Code , ~/.gemini/antigravity/skills/ Antigravity , ~/.config/opencode/skills/ OpenCode , ~/.agents/skills/ Codex or ~/.minimax/skills/ MiniMax Code . Or in one line on macOS or Linux: mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy For Antigravity, OpenCode, Codex or MiniMax Code, put the same files in ~/.gemini/antigravity/skills/anatomy , ~/.config/opencode/skills/anatomy , ~/.agents/skills/anatomy or ~/.minimax/skills/anatomy : mkdir -p ~/.gemini/antigravity/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.gemini/antigravity/skills/anatomy mkdir -p ~/.config/opencode/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.config/opencode/skills/anatomy Claude Code picks up new skills in a running session. If the skills folder itself did not exist when the session started, run /reload-skills . Antigravity and OpenCode list it as /anatomy in their chat; restart if it does not show. Codex lists it under /skills and runs it with $anatomy ; restart Codex if it does not show. MiniMax Code lists it as /anatomy ; restart mcode if it does not show. Codex: if the browser checks are blocked The skill checks its own figures by starting headless Chrome, which writes a temporary profile and talks to it over a local port. Codex runs commands in a sandbox, and that sandbox may stop Chrome. The figure is still built; only its checks fail. In order of preference: 1. When Codex asks to run a check outside the sandbox, approve it for that command. This needs the default approval policy = "on-request" . 2. Or allow it once in ~/.codex/config.toml : approval policy = "on-request" sandbox mode = "workspace-write" sandbox workspace write network access = true writable roots = "/tmp" Newer Codex releases may name these settings differently; check the config reference for your version. 3. Or run the check yourself in a normal terminal, for example node scripts/capture.mjs page.html --out shots/page.png . Starting Codex with --sandbox danger-full-access also works, but it lifts every limit for that session, so keep it for projects you trust. Type /anatomy in Codex, $anatomy and say what the figure should explain: /anatomy explain how a token bucket rate limiter works, interactive You don't have to name the skill. Claude also loads it when you ask for an isometric illustration, an explanatory figure for docs, a blog post or a landing page, or an interactive explainer. Antigravity, OpenCode, Codex and MiniMax Code do the same. Three habits get the best figures: 1. Name the idea, not the drawing. Say what it should explain and give the real numbers sizes, counts, rates, thresholds . Anatomy invents the object; that is most of the work, and it does it better than a description of boxes and arrows. 2. Or name the object. If you already know the machine you want an espresso machine, a Bunsen burner, a lock , say so, and say what should move. 3. Say where it will live. A standalone HTML page, a lone SVG file, or a React/Next.js component; light or dark. The build differs for each. A figure arrives as source you own: a Node build script and the page it writes, or, for React, geometry modules, a server component for the static art and one client component for the motion. The kit comes with it. Each framework-free example has a Node build script that writes standalone pages next to itself. Add --light for the light theme. | Example | What it shows | Build | |---|---|---| | dial-indicator https://github.com/wheresryan22/anatomy/blob/main/examples/dial-indicator | A dial gauge on a stand over a carriage of gauge blocks. The smallest example, about 300 lines. | node examples/dial-indicator/build.mjs | | desk-computer https://github.com/wheresryan22/anatomy/blob/main/examples/desk-computer | A 1984-style desk computer with a keyboard you can type on. The typed line appears on a CRT drawn in the plane of the case front, and switching it off collapses the picture to a line and a dot. About 85 solids. | node examples/desk-computer/build.mjs | | arcade-cabinet https://github.com/wheresryan22/anatomy/blob/main/examples/arcade-cabinet | An upright arcade cabinet with its side panel off. Drop a quarter: it rolls down the coin chute past the coin-switch wire into the cash box, a pulse runs along the cable to the board, and the CRT warms up into an attract mode drawn in the plane of the tilted monitor. About 240 solids and 15 cables. | node examples/arcade-cabinet/build.mjs | | raptor-engine https://github.com/wheresryan22/anatomy/blob/main/examples/raptor-engine | A Raptor 2 engine in a test stand. It comes apart into 11 assemblies, and a WebGL plume, shock, splash and steam render between the back and front SVG. The reference for dense pipework, smooth shading, fades and the audit. The build takes a few minutes. | node examples/raptor-engine/build.mjs | | ripple-tank https://github.com/wheresryan22/anatomy/blob/main/examples/ripple-tank | A school ripple tank on tall legs over a paper screen, seen from 44° up. Two WebGL layers are registered to the isometric planes and driven by a pure model in model.mjs . | node examples/ripple-tank/build.mjs | | test-rig https://github.com/wheresryan22/anatomy/blob/main/examples/test-rig | A production figure from a React/Next.js site: a glass button on a spring-mounted carriage, a finger probe on a rail, and a dial gauge reading the lean. 53 solids. No build script: copy it into a React app. | none | | spot-plate https://github.com/wheresryan22/anatomy/blob/main/examples/spot-plate | A second figure from the same site: six pairs of glass drops on a spot plate that run together into one piece of glass as a fan of feeler blades opens. Each pair is drawn from one distance field. No build script: copy it into a React app. | none | | turning-dial https://github.com/wheresryan22/anatomy/blob/main/examples/turning-dial | The 3D mode: a combination dial that turns in true 3D with a small robot hand on it, a three-hinge finger that lifts, and a pod that breaks off as a free body. stress.mjs is a 380-part hand in a cluttered workshop, used to measure performance. | node examples/turning-dial/build.mjs | The Raptor and the arcade cabinet also print. node scripts/print.mjs examples/raptor-engine/sheet.mjs --format all writes three A4 PDFs from the built light page: a one-page poster, a one-page technical drawing and a two-page detailed explainer. Ask for a printable version of any figure and Anatomy writes its sheet.mjs ; see references/print.md https://github.com/wheresryan22/anatomy/blob/main/references/print.md . node examples/raptor-engine/build.mjs --audit , node examples/arcade-cabinet/build.mjs --audit and node examples/turning-dial/build.mjs --light --audit also run the geometry audit. The 3D audit is slow; see references/3d.md https://github.com/wheresryan22/anatomy/blob/main/references/3d.md . - SKILL.md https://github.com/wheresryan22/anatomy/blob/main/SKILL.md is what Claude reads. It sets the workflow: collect the true numbers first, invent the object, write a parts list, plan the world, build the geometry once with the kit, paint back to front, frame it, make it live, and then verify it like a critic. It also holds the craft rules in short form. - kit/ https://github.com/wheresryan22/anatomy/blob/main/kit is the drawing library the figures are built from: the isometric camera, solids and a parts library iso-kit , round parts on any axis lathe.mjs , pipes and cables tube.mjs , the WebGL layer gl.mjs , the 3D runtime turn .mjs , and React components react/ . Apart from React for those components, it has no dependencies. - references/ https://github.com/wheresryan22/anatomy/blob/main/references are the long-form guides Claude opens when it needs them: craft, the kit API, motion, React, verification, WebGL, a design walkthrough and the 3D mode. - Verification. kit/audit.mjs https://github.com/wheresryan22/anatomy/blob/main/kit/audit.mjs proves the geometry: nothing passes through anything, every end sits on a mount, and every overlap is drawn in depth order node build.mjs --audit . In headless Chrome, scripts/capture.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/capture.mjs and scripts/drive.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/drive.mjs take screenshots, close-ups and slowed-down contact sheets, scripts/lines.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/lines.mjs fails any line that ends in mid-air, and scripts/turn-check.mjs https://github.com/wheresryan22/anatomy/blob/main/scripts/turn-check.mjs checks 3D figures. The skill tells Claude to read every PNG it makes. Repository layout anatomy/ ├── SKILL.md the skill: workflow, setup and craft rules ├── kit/ the drawing library │ ├── iso-kit.ts the core: camera, solids, parts, SVG renderer, card and page, CSS │ ├── iso-kit.mjs the same core as plain ESM, for Node build scripts │ ├── iso.css the kit's CSS, both themes │ ├── react/ draw.tsx server-safe components , live.tsx client hooks │ ├── lathe.mjs round parts on any axis │ ├── tube.mjs pipes, tubes and cables │ ├── audit.mjs the geometry audit │ ├── gl.mjs the WebGL layer for shaders inside the drawing │ ├── turn.mjs the 3D runtime beta │ ├── turn-build.mjs the 3D builder │ ├── turn-audit.mjs the 3D orbit audit │ └── turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjs │ experimental variants, not yet documented or used by the examples ├── references/ long-form guides Claude reads as needed │ ├── craft.md kit.md motion.md react.md │ └── verify.md webgl.md walkthrough.md 3d.md ├── scripts/ headless Chrome checks and build helpers │ ├── capture.mjs screenshots and close-ups │ ├── drive.mjs scripted sessions and contact sheets │ ├── lines.mjs the line-end check with line-ends.mjs │ ├── inline-kit.mjs the kit as source, to inline into a standalone page │ ├── turn-check.mjs 3D checks in the browser with turn-fidelity.mjs │ └── turn-bench.mjs 3D timing in Node ├── examples/ eight complete figures, built pages committed ├── evals/evals.json test prompts and what a good answer contains └── .github/ issue forms, PR template, CI, README images | | Needed for | Notes | |---|---|---| | Claude Code https://code.claude.com/docs/en/overview , or Antigravity https://antigravity.google , OpenCode https://opencode.ai/docs/skills/ , Codex https://developers.openai.com/codex/skills or MiniMax Code https://github.com/MiniMax-AI/minimax-code | everything | The skill is written for Claude Code and follows the open Agent Skills format, so Antigravity, OpenCode, Codex and MiniMax Code load it too. In Codex, the browser checks start Chrome; if its sandbox blocks that, allow it for those commands. | | Node.js 20.10+ | builds, kit, checks | Built-in modules only: nothing to npm install . The examples were rebuilt byte for byte on Node 20.19 and 22.11. On Node 20 the browser scripts restart themselves with --experimental-websocket . | | Chrome or Chromium | the checks | capture.mjs , drive.mjs , lines.mjs and turn-check.mjs look in the usual places on macOS, Linux and Windows and in Playwright's cache. Set CHROME PATH for any other binary. They run it headless with WebGL on. | | React 18+ | React output only | kit/react/ , examples/test-rig/ and examples/spot-plate/ . | - It is not a chart library. There are no axes, series or data plots. Numbers appear as a live readout driven by a model, and as the true sizes and counts of the parts. - It draws machines, instruments, tools and furniture. Not people or exact maps. An idea that has no mechanism to build will come out weaker. - It is slow on purpose. A figure takes a long session: the parts list, the geometry, the audit, and close-ups of every joint in both themes. The Raptor's build takes a few minutes, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts. - Shaders need WebGL. Without it the SVG still reads, and under reduced motion every figure goes still. Note The 3D mode is beta. It is proved on its example and one test figure, not yet on a production figure. A small 3D figure runs at 60 fps; the 380-part stress hand measured about 20 fps at 1440 px wide and 13 to 15 fps on a throttled phone profile, on a heavily loaded machine. Made something good? Ask your agent to "publish this figure to the Anatomy community gallery" . It asks for a title and your GitHub name, shows what it will send, and after your yes opens a pull request on anatomy-community https://github.com/wheresryan22/anatomy-community for you: no git, no forking by hand. Or run scripts/publish.mjs --submit yourself. Without a terminal, use the gallery's Submit a figure form with a GitHub Gist. Issues and pull requests are welcome. Read CONTRIBUTING.md https://github.com/wheresryan22/anatomy/blob/main/CONTRIBUTING.md first: it covers building the examples, the checks, and the house rules a change has to keep among them, no comments in code, and kit changes that leave every existing example byte-identical . Please follow the Code of Conduct https://github.com/wheresryan22/anatomy/blob/main/CODE OF CONDUCT.md , and report security problems as described in SECURITY.md https://github.com/wheresryan22/anatomy/blob/main/SECURITY.md . MIT https://github.com/wheresryan22/anatomy/blob/main/LICENSE © 2026 Ryan · @wheresryan22 https://x.com/wheresryan22 <sub If Anatomy drew something useful for you, a ⭐ helps other people find it.</sub