Anatomy
Builds detailed interactive isometric SVG figures that explain a technical idea as a physical object, with optional WebGL.
$ npx skills add https://craftwork.design/skills/anatomy -a claude-code -y
Installs into .claude/skills/anatomy. Add -g for every project.
SKILL.md
This skill makes figures like a small instrument on a bench: a heavy base on feet, rails with tick rulers, a carriage on bushings, knurled knobs, coil springs, a dial gauge whose needle moves, screws as tiny dots. The reader understands the idea because they recognise the machine. Every number the figure shows comes from the same model that moves its parts.
Eight complete examples ship with the skill. Open the closest one before you start. Each framework-free example is built with node examples/<name>/build.mjs, which writes a standalone HTML page next to the script; add --light for the light theme.
examples/dial-indicator/is the smallest: a dial gauge on a stand, about 300 lines in all.examples/desk-computer/is framework-free SVG: a desk computer with a keyboard you can type on. The typed line appears on a CRT screen drawn in the plane of the case front, and the picture collapses to a line and a dot when you switch it off. It has about 85 solids and 850 paths.examples/arcade-cabinet/is an upright arcade cabinet with its side panel off, a Hero of about 240 solids and 15 cables. A quarter flies into the slot, rolls down the coin chute at the speed a rolling disc reaches on a 30° slope, trips the coin-switch wire and drops into the cash box; the switch's pulse runs chunk by chunk along its cable to the board, and the CRT warms up, self-tests and runs an attract mode drawn in the plane of the tilted monitor. The stick tilts and closes a microswitch under the panel. It shows how to place a camera so a cutaway's mechanism stays in view, a concave board drawn as a prism along any axis, moving parts rebuilt in the page from the same module the build uses, and live coins and a wire drawn in reserved slots of the settled order.node build.mjs --auditproves the geometry.
Files
114 files, 11.4 MBMore graphics & generative art
- Pixel2Motion
Turns a raster logo into a clean minimal SVG and choreographs it into an SVG or HTML animation.
nolangzGraphics & generative art2.4K - Icon Set Generator
Generates a cohesive SVG icon set for a project from a style spec, with optical corrections and a preview page.
JezwebGraphics & generative art1.1K