Agent skill · software engineering · heygen-com
hyperframes-cli
Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade, skills, compositions, docs, benchmark, telemetry, transcribe, auth, tts, and remove-background. Also use when diagnosing build or render failures. validate, inspect, and layout are deprecated aliases; use check. Covers local, HeyGen-hosted cloud, AWS Lambda, and Google Cloud Run rendering.
Why this skill is useful
Provides specific commands and workflows for using HyperFrames CLI that the AI wouldn't reliably generate on its own.
What it needs
Requires ffmpeg, node installed locally. About 10k tokens when loaded. Last updated 2026-08-07. 39,818 stars on the source repository.
What this skill does
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> or capture a site. In non-TTY mode, pass --non-interactive --example=<name>. 2. Find the move: 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. 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. 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 draft quality for iteration and high quality for delivery. 9. Verify the output: confirm the file exists, is non-empty, and has a plausible duration. Mandatory creator-edit cross-references Before authoring or diagnosing a zoom, punch-in/punch-out, reframe, camera move, or any keyframe motion, read /hyperframes-keyframes first. Before hyperframes keyframes, read /hyperframes-keyframes; the command surfaces animation trajectories and does not diagnose clip cuts. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heygen-com/hyperframes-cli