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 21 of 32Show everything
Tools
- audit.mjsProves a figure's geometry instead of trusting the eye: records each part's true shape as you draw it, ray-casts every overlapping pair to…
- capture.mjsScreenshots a figure with headless Chrome through the browser's own debugging protocol, with no npm packages: whole card, phone width, a…
- drive.mjsRuns a scripted session in headless Chrome: move, click, key, wait-until, run JavaScript in the page, slow motion (for example 0.05x) and…
- gl.mjsA small WebGL layer for shaders that sit inside the drawing in the same isometric camera: the camera as GLSL (GLSL_ISO with rayOf and…
- inline-kit.mjsReturns the kit, the WebGL layer and the 3D runtime as source text with their export keywords removed, so a build script can inline them…
- 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…
- lines.mjsThe line-end check: on a built page, every seam, rule, rib, tick and pointer must end on a stroke, a dot or an outline. It rings the…
- pdf-button.mjsTwelve lines: a small link on the card that opens the figure's printable PDF.
- print.mjs and print-sheet.mjsPrints a finished figure on paper without drawing it again: opens the built light page, plays the poses a small sheet.mjs spec lists…
- publish.mjsSends a finished figure to the author's public community gallery as a GitHub pull request: copies the figure's source into a clone, checks…
- 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…
- react/live.tsxClient hooks for calm motion: useLoop (a requestAnimationFrame loop that hands your tick a delta and stops when nothing moves), useEased…
- 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…
- turn-audit.mjs (3D orbit audit, beta)Checks a 3D figure at every turn angle and in every motion clip: no ordering cycles, no loose groups. Slow by the repo's own account: 15 to…
- turn-bench.mjsTimes the 3D engine in Node: CPU time per kind of part.
- turn-build.mjs (3D builder, beta)The build side of the 3D mode: turning(P, { recorder }) declares groups (turn, slide, hinge, free), live layers and convex parts with seven…
- turn-check.mjsBrowser checks for 3D figures: fidelity against the kit's own builders, a z-buffer order check, pixel pops between tiny angle steps, line…
- turn-fixed.mjs, canvas-painter.mjs, gl-shared.mjsThree experimental variants of the 3D runtime and WebGL layer (a fixed-camera turn engine of 147 KB, a canvas painter, a shared GL…
- turn.mjs (3D runtime, beta)The runtime of the optional 3D mode: parts that truly turn (a dial, a hinge, a piece that breaks off) are re-projected and re-shaded every…