anatomy
Build crafted, highly detailed, interactive isometric SVG figures that explain a technical idea as a real physical object (a test rig, a dial gauge, a cabinet of drawers, a plotter, a lock), with many small precise solid parts, four-tone shading, correct painter's order, a framed card with title, hint and live readout, and calm eased motion. Use this whenever someone wants an isometric illustration, an explanatory diagram or figure for docs, a blog post, a landing page or an article, a "Linear-style" or "premium" technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works, even if they never say "isometric". Works framework-free (TypeScript/JS that writes SVG and HTML) and in React/Next.js, and can add realistic WebGL shaders (fire, exhaust, water, caustics, lamp light) that live inside the drawing in the same isometric perspective.
Pinned to revision 1b2edfeb1317, so it is the text this page describes rather than whatever the author pushed since.
Files
- skills/anatomy/SKILL.md
- skills/anatomy/.github/assets/dial-indicator.webp
- skills/anatomy/.github/assets/raptor-engine-apart.webp
- skills/anatomy/.github/assets/raptor-engine-firing.webp
- skills/anatomy/.github/assets/ripple-tank.webp
- skills/anatomy/.github/assets/turning-dial.webp
- skills/anatomy/CHANGELOG.md
- skills/anatomy/CODE_OF_CONDUCT.md
- skills/anatomy/CONTRIBUTING.md
- skills/anatomy/LICENSE
- skills/anatomy/README.md
- skills/anatomy/SECURITY.md
- skills/anatomy/agents/openai.yaml
- skills/anatomy/evals/evals.json
- skills/anatomy/examples/arcade-cabinet/arcade-cabinet-light.html
- skills/anatomy/examples/arcade-cabinet/arcade-cabinet.css
- skills/anatomy/examples/arcade-cabinet/arcade-cabinet.html
- skills/anatomy/examples/arcade-cabinet/build.mjs
- skills/anatomy/examples/arcade-cabinet/live.js
- skills/anatomy/examples/arcade-cabinet/parts.mjs
- skills/anatomy/examples/arcade-cabinet/screen.mjs
- skills/anatomy/examples/desk-computer/build.mjs
- skills/anatomy/examples/desk-computer/desk-computer-light.html
- skills/anatomy/examples/desk-computer/desk-computer.html
- skills/anatomy/examples/dial-indicator/build.mjs
- skills/anatomy/examples/dial-indicator/dial-indicator-light.html
- skills/anatomy/examples/dial-indicator/dial-indicator.html
- skills/anatomy/examples/raptor-engine/build.mjs
- skills/anatomy/examples/raptor-engine/live.js
- skills/anatomy/examples/raptor-engine/raptor-engine-light.html
- skills/anatomy/examples/raptor-engine/raptor-engine.html
- skills/anatomy/examples/raptor-engine/raptor.css
- skills/anatomy/examples/ripple-tank/build.mjs
- skills/anatomy/examples/ripple-tank/live.js
- skills/anatomy/examples/ripple-tank/model.mjs
- skills/anatomy/examples/ripple-tank/ripple-tank-light.html
- skills/anatomy/examples/ripple-tank/ripple-tank.html
- skills/anatomy/examples/ripple-tank/ripple.css
- skills/anatomy/examples/spot-plate/art.tsx
- skills/anatomy/examples/spot-plate/drops.ts
- skills/anatomy/examples/spot-plate/fan.ts
- skills/anatomy/examples/spot-plate/figure.tsx
- skills/anatomy/examples/spot-plate/geometry.ts
- skills/anatomy/examples/spot-plate/live.tsx
- skills/anatomy/examples/spot-plate/rig.ts
- skills/anatomy/examples/spot-plate/spot-plate.css
- skills/anatomy/examples/test-rig/art.tsx
- skills/anatomy/examples/test-rig/figure.tsx
- skills/anatomy/examples/test-rig/geometry.ts
- skills/anatomy/examples/test-rig/live.tsx
- skills/anatomy/examples/test-rig/pose.ts
- skills/anatomy/examples/test-rig/rig.ts
- skills/anatomy/examples/test-rig/stretch.css
- skills/anatomy/examples/test-rig/view.ts
- skills/anatomy/examples/turning-dial/build.mjs
- skills/anatomy/examples/turning-dial/dial.css
- skills/anatomy/examples/turning-dial/live.js
- skills/anatomy/examples/turning-dial/stress.mjs
- skills/anatomy/examples/turning-dial/turning-dial-light.html
- skills/anatomy/examples/turning-dial/turning-dial-verify-light.html
- skills/anatomy/examples/turning-dial/turning-dial.html
- skills/anatomy/examples/turning-dial/turning-stress-light.html
- skills/anatomy/kit/audit.mjs
- skills/anatomy/kit/canvas-painter.mjs
- skills/anatomy/kit/gl-shared.mjs
- skills/anatomy/kit/gl.mjs
- skills/anatomy/kit/iso-kit.mjs
- skills/anatomy/kit/iso-kit.ts
- skills/anatomy/kit/iso.css
- skills/anatomy/kit/lathe.mjs
- skills/anatomy/kit/react/draw.tsx
- skills/anatomy/kit/react/live.tsx
- skills/anatomy/kit/tube.mjs
- skills/anatomy/kit/turn-audit.mjs
- skills/anatomy/kit/turn-build.mjs
- skills/anatomy/kit/turn-fixed.mjs
- skills/anatomy/kit/turn.mjs
- skills/anatomy/references/3d.md
- skills/anatomy/references/craft.md
- skills/anatomy/references/kit.md
- skills/anatomy/references/motion.md
- skills/anatomy/references/react.md
- skills/anatomy/references/verify.md
- skills/anatomy/references/walkthrough.md
- skills/anatomy/references/webgl.md
- skills/anatomy/scripts/capture.mjs
- skills/anatomy/scripts/drive.mjs
- skills/anatomy/scripts/inline-kit.mjs
- skills/anatomy/scripts/line-ends.mjs
- skills/anatomy/scripts/lines.mjs
- skills/anatomy/scripts/turn-bench.mjs
- skills/anatomy/scripts/turn-check.mjs
- skills/anatomy/scripts/turn-fidelity.mjs
Every link opens the file at its source, pinned to the revision this page describes.