The diagram problem: parts without behavior
Better Stack’s viral video, *This Claude Code Skill Is Actually Insane*, highlights a core problem with traditional diagrams: boxes and arrows confirm a component’s existence but rarely reveal its dynamic behavior. We see parts, but the state changes and causal relationships often remain abstract, leaving us to infer the mechanism.
Enter [anatomy](/en/anatomy), an open-source agent skill for Claude Code that flips this paradigm. Its guiding principle, explicitly stated in the root prompt, is "Don’t draw boxes, arrows and labels. Invent a real, well-made physical thing whose working is the concept." This mandate forces the AI to generate interactive, physical machines that embody the system’s logic.
This approach transforms understanding. A cache key becomes a pin-tumbler lock; the right key aligns the pins, opening the door. An LRU cache might manifest as a rotating mechanical bookcase, while a TCP handshake animates as ropes and pulleys exchanging letters.
Instead of memorizing static connections, users can now follow a mechanism, observing how an LRU cache rotates or how a dial indicator’s carriage slides to read each block. This interactive, physical embodiment demystifies complex systems, making them intuitive for both teaching and debugging. The output isn't a static image, but inspectable HTML, SVG, or WebGL code.
A cache becomes a lock—and a protocol becomes a rope
Instead of abstract boxes, the anatomy skill makes a cache key a pin-tumbler lock. A physical mechanism, it shows the right key aligning pins, allowing the lock to turn. This makes validation tangible, revealing the inner workings of a concept.
An LRU cache transforms into a rotating mechanical bookcase or marble run. You observe items accessed, shifted, and evicted as the mechanism operates, demystifying its behavior. Similarly, TCP becomes a main rope or pulley system, exchanging letters back and forth, illustrating the handshake protocol’s state changes.
This approach extends to physical assemblies and measurements. A Raptor rocket engine, for instance, explodes into 11 distinct assemblies on hover, complete with a WebGL exhaust plume. A dial indicator reveals its carriage sliding to gauge blocks, with the needle reading each block as you interact.
These interactive models, rendered as SVG or WebGL, don't just exist; they run. They offer a profound shift from static diagrams to kinetic explanations, bridging the gap between a component’s existence and its dynamic function.
Under the hood: illustrations you can inspect
Anatomy, the skill showcased in the video This Claude Code Skill Is Actually Insane, generates executable code, not static images. Claude produces self-contained SVG, HTML/JavaScript, or React components. This output allows for direct interaction, inspection, and modification, fundamentally shifting how we visualize system behavior.
Layered visual approach drives this interactivity. Isometric rendering, strict painter’s algorithm depth ordering, and optional WebGL effects like an engine plume (as seen on the Raptor rocket engine) contribute to a sense of physical tangibility. Unlike a flat raster image, these are machines you can poke.
Practical differences from traditional image generation are profound. Browser-based audits can catch collisions, invalid pipe endpoints, and incorrect occlusion, ensuring geometric integrity—a crucial detail for a system meant to embody a concept. The code itself can be inspected, debugged, and version-controlled.
This is a significant leap from abstract diagrams. For further exploration of the underlying mechanics, you can inspect the code at GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations. The ability to audit, interact, and version-control these generated "machines" elevates them from mere illustrations to functional, inspectable models of computation.
Enjoying this? Get one like it in your inbox each morning.
one email a day · unsubscribe in two clicks · no third-party tracking
Where the magic stops—and how to try it
This Claude Code Skill Is Actually Insane, but don’t expect it to replace your everyday diagramming tools. Generating these intricate, interactive models demands significant compute and token budgets. Each detailed illustration often requires numerous geometry lines, multiple agent runs, and browser-based validation to ensure accuracy.
Anatomy excels at explaining specific mechanisms and system behaviors—like the inner workings of an LRU cache or the protocol handshakes in TCP. It’s not a substitute for Mermaid charts, standard charting libraries, financial dashboards, or geographic maps. Use it to clarify how something works, not merely that it exists.
To experiment with Anatomy, access the MIT-licensed GitHub project at wheresryan22/anatomy. You'll find the Agent Skills CLI command there. Start small: pick a single concept, generate its interactive model, and inspect the resulting SVG, HTML, or React component code. This ensures the generated interaction and logic align with your intent before sharing.
The skill generates code, not static images. This fundamental difference allows the precise, interactive visualizations shown in This Claude Code Skill Is Actually Insane. From a simple pin-tumbler lock to a multi-assembly Raptor engine with a WebGL exhaust plume, Anatomy makes abstractions tangible.
Frequently Asked Questions
What is the Anatomy Claude Code skill?
An open-source agent skill that guides coding agents to build interactive, code-based illustrations of concepts as working physical mechanisms.
How does Anatomy explain software concepts?
It maps a concept to a mechanical analogy, then creates an interactive illustration that lets users observe or manipulate its behavior.
Can Anatomy replace Mermaid or charting libraries?
No. It complements flowchart tools for explaining mechanisms, but it is not intended for dashboards, financial charts, or geographic maps.
How can I install Anatomy for Claude Code?
The project documents installation with the Agent Skills CLI: npx skills add wheresryan22/anatomy -g -a claude-code.