anatomy

Anatomy is a zero-dependency agent skill designed to translate abstract computational and physical concepts into interactive, isometric figures. Built for integration with Claude Code, Antigravity, OpenCode, Codex, and MiniMax Code, Anatomy directs an AI model to represent complex system mechanics using physical analogies—such as explaining a cache hit/miss routine through a mechanical pin-tumbler lock or illustrating a rocket engine test stand. ### Architecture & Rendering Mechanics Anatomy leverages a hybrid graphics approach that combines SVG with WebGL. Heavy structural components and precise geometrical lines are drawn using raw SVG, ensuring vector scaling across different screens. For complex visual dynamics—such as dynamic exhaust plumes or particle streams—it overlays WebGL shaders rendered directly beneath or inside the scene context, synchronized to the same isometric camera parameters. The codebase relies strictly on standard runtime features, keeping setup lightweight and deterministic. * Node.js Requirement: Node `>= 20.10` * Dependency Overhead: `0` third-party packages By bypassing heavy external 3D engines like Three.js in favor of pure SVG and standard WebGL contexts, the skill outputs minimal markup files that load fast and render natively in modern browser runtimes. ### Installation & Setup Because Anatomy adheres to the standard Agent Skills specification, you can install it into your preferred CLI agent workflow using `npx`: ```bash npx skills add ``` Alternatively, you can download the project source directly via the GitHub web interface or as a zip file to access the examples (such as the `raptor-engine` illustration) and manually load the skill definition into your AI toolchain. ### Developer Review Most AI-generated visual output relies on simple text-based flowcharts or basic standard diagrams. Anatomy takes a different approach by treating visual documentation as a physical layout problem using strict isometric projections. The technical execution is clean: mixing declarative SVG shapes for crisp lines with WebGL shaders for high-performance visual effects delivers strong results without bloating runtime performance. The zero-dependency architecture keeps it portable across Node environments, making it a reliable skill for developers looking to add automated visual diagramming capabilities to their agent workflows.