#Interactive Diagrams (1)

anatomy: turn a technical concept into a real machine, a zero-dependency isometric figure skill with a 12-check geometry audit

Editor's takeWhat is most worth stealing is that it ships its own falsification tooling: twelve checks in kit/audit.mjs (clearances, solid clearances, terminals, loose ends, supports, folds, self-overlaps, crowding, stand-in shapes, wobble, seats, depth order) plus scripts/lines.mjs demanding 'line ends: 0', which turns 'looks fine' into countable failures. It also states outright that a stand-in shape that quiets the audit is itself a bug, and the coverage check exists to catch it. Aesthetics are numeric too: bevels 0.4-1.6, screw dots 0.4-0.55, the subject filling 55-65% of the card, a device ratio cap of 1.5, and a 3D bend bound of R ≥ 2r / sin²(e − θmax). CI rebuilds every example in both themes and requires an empty git diff, so kit compatibility is a machine guarantee. The limits are stated just as honestly: not a chart library (no axes or series), machines, instruments, tools and furniture only, 3D self-reported beta at roughly 20 fps for 380 parts, and one figure costs a long session.

A standard Agent Skill that makes Claude Code, OpenCode or Codex explain a technical idea by inventing a real machine (a pin-tumbler lock for a cache key, a gantry plotter for one shared GPU context) and drawing it as four-tone isometric SVG with a zero-dependency kit of about 16,200 lines, plus optional WebGL shaders and a beta 3D mode. Eight examples ship with their built pages committed, and CI on macOS with Node 22 rebuilds each one and requires byte-identical output.