Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

HyperFrames CLI

Run commands as npx hyperframes ... unless project instructions provide a wrapper. Obey the wrapper when present. The CLI requires Node.js 22 or newer and FFmpeg.

Development loop

1. Scaffold: npx hyperframes init <project> (centered blank). Or capture a site. Pass --example=<name> only to start from a named example.
2. Find the move: if the request names an asset, sound, image, voice or fast visual edit, resolve it through /media-use before proposing a plan. Otherwise, before authoring motion by hand, search for a primitive that already does it: npx hyperframes catalog --query "reveal a headline one line at a time". Ask for the effect you want rather than the mechanism you have in mind. Install with npx hyperframes add <name> (see /hyperframes-registry). Author by hand only once nothing fits.
3. Author: write the composition using /hyperframes-core. To know what is on a project's timeline (tracks, clips, starts, ends, what plays), run npx hyperframes timeline --json instead of reading index.html and every sub-composition file: nested rows carry absolute main-timeline absStart/absEnd and their owning file, not just their local, per-sub-composition time. Prefer --json over the text form; it costs fewer tokens for the same or better correctness. See references/upgrade-info-misc.md for one-liners that answer common questions without reading the whole output.
4. Get fast feedback while editing: run npx hyperframes lint after the first HTML pass and after structural changes.
5. Run the final gate: run npx hyperframes check; it reruns lint before opening the browser. Do not prepend a redundant standalone lint invocation. Add --snapshots for annotated overview frames and finding crops.
6. Inspect sub-compositions: when index.html mounts data-composition-src, capture midpoint snapshots and inspect each mounted scene. Inspect the opening 30 seconds and reported problem times at full resolution; zoom into fine geometry, text, and WebGL edges rather than judging a contact sheet alone.
7. Open the final Studio preview: run npx hyperframes preview --background, verify the URL returns HTTP 200, hand the timeline project URL to the user, and ask whether to revise or render. Keep it alive until review ends.
8. Render only after approval: use --quality draft while iterating, --quality looks for the first real encode (the CLI default), and --quality delivery for final delivery.
9. Hand the project to the desktop app (on offer): when the render's Framey line ends in hyperframes open …, offer npx hyperframes open [dir]. It opens the project in the HyperFrames desktop app and adds it to Home; under Claude Code, Codex or Grok its chat picks up this conversation. Without the app it exits 1 and prints the download link. --json for agents. When open says to run catch-up once the person is back, or any command ends with a line naming it, run npx hyperframes catch-up [dir] before your next change: it lists what was asked and changed in the app since the hand-off. An older CLI has no catch-up.
10. Verify the output: confirm the file exists and is non-empty. Read the render summary's second line (beginframe vs screenshot, GPU, stage timings). screenshot + software gpu on Linux is the slow path. ffprobe -v error -show_format -show_streams and compare duration (and fps if the brief set it) to the root data-duration. Visually inspect decoded output frames at the same times as the preview, including close-ups; a successful check or encode does not certify the pixels inside a canvas.