Radar
← All projectsThursday, October 15, 2026
Anatomy
Agent skill that turns a technical idea into a crafted interactive isometric machine — SVG parts, optional WebGL effects, and live readouts in one shareable figure.
Why it matters
Anatomy is a standard Agent Skill for Claude Code, Codex, OpenCode, and Antigravity. You ask it to explain a concept; it invents a physical object whose working is the idea, then builds that object from dozens of solid isometric parts inside a framed card with title, hint, and live numbers. Core output is SVG. Hard-to-draw effects like fire, water, or caustics sit in WebGL layers that share the same camera. A beta 3D mode re-projects moving parts each frame. Zero npm deps — Node builtins only — and the kit self-checks joints with headless capture scripts.
Founders still explain systems with slides, Mermaid, or generic AI diagrams that look the same as everyone else's. Anatomy gives coding agents a craft kit so docs, blogs, and landing pages get figures people actually want to open and poke — not another flowchart dump.
How it works
Install with npx skills add wheresryan22/anatomy -g (pick Claude Code, Codex, OpenCode, or Antigravity), or clone the repo into your skills folder. In chat run /anatomy (or $anatomy in Codex) and describe what to explain — rate limiters, connection pools, CDN cache hits, lab gear. It ships standalone HTML, embedded SVG, or React/Next components, light or dark. Open the committed examples/ pages to see the bar before you generate your own.
Most diagram skills draw boxes and arrows. Anatomy forces a physical metaphor first, then crafts interactive machine figures with shaded parts, motion, and optional shaders — closer to a science-museum card than Mermaid. Complementary to Diagram Design on Radar: that pack covers branded editorial diagram types; this one owns the isometric explainer lane for systems you want people to feel, not just scan.
Capabilities
- Public demo available
Similar tools