Use Anatomy to Build Interactive Isometric Machine Illustrations
Build six local light and dark previews, test the keyboard interactions and turn a technical idea into a concrete mechanism with the Anatomy agent skill.
Fastest way
Ask your AI to do it
Paste this into the AI agent you already use:
Use Anatomy to explain my technical concept as an interactive physical mechanism. First run the included preview helper into a new directory, inspect the three examples in both themes and test keyboard interaction. Then ask for the real input, output and mechanism before drafting a focused Figure and its parts list. Preserve Ryan’s MIT attribution and distinguish an illustrative analogy from measured engineering behavior. No paid API, public deployment or replacement of existing output.
What is the Anatomy agent skill?
Anatomy is Ryan / wheresryan22’s MIT-licensed skill for detailed, interactive isometric machine illustrations. Start with a mechanism that explains your concept through its moving parts: a dial measures a change, a carriage follows an input, or a switch reveals a state. The package includes an SVG drawing kit, React examples and optional WebGL references. Skillrove distributes a pinned snapshot as version 1.0.0; this is not an upstream semantic release.
Choose it for a technical explainer, documentation figure or interactive product page. Use a system map when you need searchable entities and relationships, or a product cutaway when you need a presentation about parts and layers. An illustrative machine is not a CAD model or an engineering verification.
Try the existing desk computer before downloading
Build your first six previews without an API key
The free download requires a verified Skillrove account. Keep the complete folder together, read SKILL.md and SKILLROVE-README.md, and use Node.js 20.10 or newer. The following helper builds three actual upstream examples in both themes into a new directory. It does not ask an image model to create an illustration. Python 3 only serves the generated pages on your computer; stop the server with Ctrl+C.
- Open http://127.0.0.1:8080/ and choose a light or dark demo. Keep the terminal open while browsing.
- The output includes six standalone HTML pages, the gallery, LICENSE.txt, source.json and delivery-manifest.json. Compare each of the nine listed file hashes with the manifest.
- Choose a new directory on the next build. Existing output is protected. The six preview pages need no external network connection; custom WebGL or React work has separate requirements.
node scripts/skillrove-preview.mjs --output ./sample-anatomy
python3 -m http.server 8080 --bind 127.0.0.1 --directory sample-anatomyTest the mechanism, not just its first frame
Repeat in both themes. Inspect the mechanism at normal size and zoom into joints, cable ends and text. Check reduced-motion behavior and keyboard focus in your destination page. The gallery proves these included examples can be built; it does not prove a new custom illustration is correct.
| Example | Action | What to inspect |
|---|---|---|
| Desk computer | Type a short line; press Escape twice | Typed text appears on the CRT; power switches off and on |
| Arcade cabinet | Press C; try arrows and Space | A coin enters the mechanism; the stick and controls respond |
| Dial indicator | Use left and right arrow keys | The carriage moves and the reading follows the selected block |
Write a mechanism brief before drawing geometry
Supply the concept, actual inputs and outputs, the measured or declared values, and the one interaction the reader should understand. For a cache explainer, describe a lock whose pins represent the current key: when all match, the plug turns without rebuilding the scene. Label this as an analogy. It does not measure your application’s cache-hit rate.
Read the package workflow and references/craft.md, motion.md and verify.md. Start with a focused Figure and list its base, structure, mechanism, controls and subject before generating paths. Keep the model that drives readouts separate from the drawing so a small input change can be checked.
Choose an export and review the destination
Use standalone SVG/HTML for a browser figure. Use the supplied React kit for an existing React 18+ project, and check client-side interaction in that project. Optional WebGL needs browser support; the true-3D mode is beta. Follow the upstream geometry audit and line checks when building custom figures with the corresponding tools.
Deliver editable source, the approved concept, interaction instructions and the original MIT notice. Keep Ryan’s authorship distinct from your custom work. The local example build needs no paid API; any agent/model service used for new work has its own access and usage terms.
Choose a system map for entities and explicit relationships