anatomy – Other skill for AI agents

Anatomy

This skill builds figures that work 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, and screws drawn 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.

Output is a standalone HTML page (SVG plus optional WebGL layers), a lone .svg, or React/Next.js components. The kit uses only Node built-ins, so there is nothing to npm install.

Running it in Hermes

Skill directory. Hermes expands ${HERMES_SKILL_DIR} to this skill's installed directory. Shell variables don't carry over between terminal calls, so repeat the assignment in every call that uses it:

SKILL_DIR="${HERMES_SKILL_DIR}"

Never build inside the skill directory. Every build.mjs writes its HTML next to itself, and the examples import ../../kit/ and ../../scripts/. Lay out a workspace with the same shape: the user's project if they have one, otherwise a folder they name.

SKILL_DIR="${HERMES_SKILL_DIR}"
WORK="$HOME/figures/pin-lock"
mkdir -p "$WORK/figures"
cp -r "$SKILL_DIR/kit" "$SKILL_DIR/scripts" "$WORK/"
cp -r "$SKILL_DIR/examples/dial-indicator" "$WORK/figures/"
cd "$WORK/figures/dial-indicator" && node build.mjs && node build.mjs --light

Start a new figure by copying the closest example into $WORK/figures/<name>/ and renaming it. Leaving the installed skill untouched keeps hermes skills update from flagging it as locally modified.

The examples ship as source only. Upstream's built pages are 9 MB of generated HTML. Build an example (as above) to open or capture it, since it takes a few seconds.

Looking at your work. The upstream workflow says "read every PNG". In Hermes that means vision_analyze on each capture, and the 4× close-ups use its region crop on a high-DPR capture or a --zoom capture. Ask specific questions ("does the pipe at the flange end on the flange face?"), not "does this look good".

Browser. The capture, drive, line-end and 3D checks start a headless Chrome over a loopback DevTools port. They use CHROME_PATH if set, then a Playwright headless shell if one is installed (chromium_headless_shell-* in the Playwright cache, e.g. from npx playwright install chromium), then a system Chrome or Chromium. Prefer the headless shell: it renders the WebGL layers through SwiftShader and makes no outbound connections. A full desktop Chrome opens background connections to Google services even with a throwaway profile, and it fails to start ("Socket path too long", then "Chrome did not start") when TMPDIR is a long path, as Hermes' per-profile scratch dir can be. If you must use one, set TMPDIR to a short directory for that command. Building a figure needs no browser at all.

Long runs. node build.mjs --audit takes about two minutes on a dense Hero, and a full 3D orbit audit takes 15 to 20 minutes for 30 parts. Run those with terminal(background=true, notify=true) and keep working on something else.

Asking about scope. The workflow's sizing step decides whether to build or ask. For an Epic, put the estimate and the Hero alternative to the user with clarify, and wait for their choice.

Delivering. Hand over the absolute path of the built HTML (both themes) plus the PNG captures you verified. On a messaging platform, attach the desktop and phone PNGs, since a chat can't run the page.

The examples

Open the closest one before you start. Each framework-free example builds with node build.mjs in its directory; 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 --audit proves the geometry.
• examples/raptor-engine/ is a rocket engine hanging in a test stand. Its round parts come from kit/lathe.mjs and its pipes and harness from kit/tube.mjs. It comes apart into 11 assemblies with staggered springs and per-frame depth re-sorting. Every part records its true shape, and node build.mjs --audit (kit/audit.mjs) proves several things at rest, apart and in every replayed frame of the explode: nothing passes through anything, every end sits on a real mount, no bend pinches, folds or lands on another line, no curved profile's slope wobbles, and every overlap is drawn in depth order. A WebGL plume, shock, splash and steam render between the back and front SVG. It is the reference for dense pipework, smooth shading and fades.
• examples/ripple-tank/ is a school ripple tank on tall legs over a paper screen, seen from 44° up. Two WebGL layers (lamp light, shadows and caustics on the paper, and the water's reflections and glass) are registered to the isometric planes and driven by a pure dispersion and optics model (model.mjs). A frequency change travels out from the dippers through a history texture.
• examples/test-rig/ is a production figure from a real site (React/Next): a glass button on a spring-mounted carriage, a finger probe on a rail that presses and pulls, and a dial gauge reading the lean. It has 53 solids and about 470 paths.
• examples/spot-plate/ is a second production figure from the same site: six pairs of glass drops on a spot plate, each pair drawn from one distance field, so a pair closer than merge runs together into one piece of glass. A fan of feeler blades sets merge, one blade per gap. It is the reference for shapes that morph into each other and for one control driving many parts.
• examples/turning-dial/ is the optional 3D mode: a combination dial that turns in true 3D with a small robot hand on it. It has about 90 live parts in metal materials, a second turn group, a hinge, a three-hinge finger that lifts and a pod that breaks off as a free body. A WebGL LED, its light pool and sparks follow the moving parts. stress.mjs beside it is a dense hand of about 380 parts in a cluttered workshop, used to measure performance.

The test rig sets the quality bar for the drawing itself. The Raptor sets the bar for shader work: a WebGL effect has to match its world-space, no-pop, seamless rendering.

The one idea that matters

The object is the explanation. Don't draw boxes, arrows and labels. Invent a real, well-made physical thing whose working *is* the concept. Here is how earlier figures mapped:

| Concept | Object |

|---|---|

| One shared GPU context serving many canvases | A gantry plotter: one print head visiting 16 wells |

| A cache key that skips work when nothing changed | A pin-tumbler lock: when every pin matches, the plug turns and nothing is redrawn |

| Seven render targets with different bytes per texel | A chest of seven drawers, each as deep as its bytes |

| A separable blur (49 × 49 taps vs 49 + 49) | A bed-of-nails stamp beside two combs on rails |

| A spring that presses and leans | A test rig with springs, a probe and a dial gauge |

| A height profile | A profile (contour) gauge pressed against the edge |

| Light that depends on facing | A small photo studio: key and fill lamps around a turntable |

Two ways this fails, both seen in practice:

• Too abstract. Stacked plates, floating slabs or labelled boxes don't read as anything.
• Too flat and bland. One big slab with a few lines on it has no volume, no parts and nothing to discover.

The fix for both is the same: a recognisable machine, built from many small, precise, purposeful parts.

Every creation is highly detailed. This holds for every figure, however small the idea or the request: a quick explainer is still a dense, real machine, never a few slabs. What scales with the size (workflow step 1) is how far you push it: a Figure gets the 4× sweep over its subject and mechanism, a Hero or an Epic over the whole drawing.

• Read the real thing. Build it the way the real ob

… (full content is in the download package)