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.