Anatomy
wheresryan22/anatomy · MIT · 32 entries
An agent skill, a drawing kit with no dependencies and nine worked examples for explaining an idea as a dense, interactive drawing of a real machine that comes apart. It draws in SVG, with optional WebGL shaders and a beta 3D mode.
- Get it
npx skills add wheresryan22/anatomy -gAdd -a claude-code, -a codex or -a opencode to pick the agent.
- Needs
Node 20.10 or later for builds and checks, with nothing to npm install. Chrome for the checking scripts. React only for the React output. No API keys.
- Sends off your machine
Nothing by itself. One script reaches out, and only when run: publish.mjs pushes a figure's source to GitHub and opens a pull request on the author's public gallery, with the agent's and the model's name. The skill tells the agent to do that only on your explicit yes.
- We watched it run
We drew a machine of our own with the kit alone: a small desktop computer from a parts list, as one 60-line script whose whole drawing follows a single number. It built on the first run, and 96 frames made a clip of it lifting apart and closing.
Seven of its built example pages drew cleanly, with no outside requests. One comes apart under the pointer and names the part you are on.

A shipped figure stepped frame by frame gave the same picture twice when only the clock drives it. It did not when a pointer starts the motion.

- Not tried here
The skill inside an agent, so what it draws from a description is untested here. Its own checking scripts, the 3D mode and the React output were read, not run.
- License
MIT
Two examples show things that belong to others: one draws another company's mark on its screen, and one depicts a named rocket engine. The drawings' code is free to use. Those subjects are theirs.
Everything in it
Showing 5 of 32Show everything
Tools
- iso-kit (core drawing kit)The whole core in one file with no dependencies: an isometric camera (azimuth 45, elevation 30 by default, fitted to your points), solids…
- iso.cssThe kit's styles written out as a stylesheet: the tone ramp, line weights, card, legend and both themes, driven by CSS variables. Import it…
- lathe.mjsRound parts on any axis: turn a profile into a shaded body (bells, flanges, valves, domes), with smooth shading for curved profiles, balls…
- react/draw.tsxServer-safe React components for the same drawing: Solid, Line, Wire, Dots, FaceText, IsoFigure and Plate. Build the static art once in a…
- tube.mjsPipes, tubes and cables: splits a 3D route into chunks that can be depth-sorted, with gaps under collars and clamps, end caps, and rings…