Ctrl K

Quick Ref / Command

Marketing Kit

/ak:hyperframes

HeyGen HyperFrames Wrapper

Wrap the pinned HeyGen HyperFrames CLI for HTML-first programmatic video: verify Node/FFmpeg/FFprobe/Chrome, scaffold, edit timed HTML, preview, lint and check, render, and prove the MP4.

Confirm fit

Verify deps

Pin CLI

Scaffold composition

Rule 01

HyperFrames is for HTML/CSS timed by data-* attributes, not React-first Remotion work.

Rule 02

The composition HTML is the source of truth; id, data-start, and data-duration on each clip drive timing.

Rule 03

Pinned npx invocations plus lint, check, and ffprobe make fast-moving CLI behavior auditable.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

Start

Input, scope, route

1 Confirm fit Use HyperFrames for short 1080×1920 vertical/social videos, product-launch clips, promo loops, and HTML-authored motion graphics. Use nexu-io/html-video only when that binary or a matching template catalog already exists; otherwise stay on HyperFrames. Route React-first, Remotion, and encode-only work elsewhere.
2 Verify deps Require Node.js 22+, FFmpeg and FFprobe on PATH, and headless Chrome (hyperframes browser ensure); HeyGen credentials (HEYGEN_API_KEY or hyperframes auth login) are only for cloud rendering. Run node scripts/verify-prereqs.mjs before render work.

Work

Agent / skill execution

3 Pin CLI Run every CLI step through npx -y hyperframes@0.8.77 and avoid unpinned npx -y hyperframes commands in scripts or docs.
4 Scaffold composition Scaffold a new composition with the pinned init command, for example npx -y hyperframes@0.8.77 init my-composition --resolution portrait --non-interactive.

Verify

Gate, review, validation

5 Edit HTML contract Author plain HTML: the root carries data-composition-id, data-start="0", data-width, data-height, and usually data-duration; each timed clip carries id, data-start, and data-duration.
6 Preview Run npx -y hyperframes@0.8.77 preview my-composition and open the printed local URL to scrub timing before spending render time.

Report, handoff, artifact

7 Lint, then check Run npx -y hyperframes@0.8.77 lint my-composition for fast feedback, then check as the final gate: it reruns lint and audits runtime errors, failed requests, layout overlap, and contrast in a browser. Use snapshot --at to review key frames without rendering.
8 Render or cloud render Render locally with npx -y hyperframes@0.8.77 render ... --strict --output, or use the separate cloud render top-level command (inspect first with --dry-run) when credential-backed cloud rendering is needed.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:hyperframes [composition or command]

Arguments

[composition or command] Required

Composition brief or command

Natural-language request for a HyperFrames HTML composition, scaffold, preview, lint/check, local render, cloud render, or troubleshooting run. Include aspect ratio, duration, assets, output path, and local/cloud boundary; it is not a fixed parser command.

/ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, pass lint and check before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Vertical product launch Recommended

/ak:hyperframes create a 9:16 product-launch clip as a plain HTML composition

Use when:: You need a short vertical/social video rendered from HTML/CSS.
Expected:: Verifies Node.js and FFmpeg, scaffolds with pinned init --resolution portrait, edits data-* timed HTML, previews, passes lint and check, renders, and ffprobes the MP4.

Remote cloud render

/ak:hyperframes render my-composition remotely with HeyGen cloud output to ./assets/videos/my-composition.mp4

Use when:: You have a HyperFrames HTML composition and need cloud rendering with HeyGen credentials.
Expected:: Checks prerequisites and HeyGen credentials, passes check first, keeps cloud render as a separate top-level command inspected with --dry-run, then verifies the video artifact.

Existing html-video catalog

/ak:hyperframes render this promo from the html-video template catalog already on this machine

Use when:: A template-driven HTML-to-MP4 clip should use an html-video checkout or binary that is already installed.
Expected:: Stays off HyperFrames only because html-video is already available, follows that reference for setup and render, and does not vendor the engine into the project.

Troubleshoot bad MP4

/ak:hyperframes troubleshoot a blank or too-short MP4 from my-composition

Use when:: A HyperFrames render is blank, too short, or failing from malformed composition timing.
Expected:: Runs the verifier, reruns check, inspects data-composition-id, data-start, data-duration, and timeline registration, then follows the documented troubleshooting path before rerendering.

Handled Scope

HTML-first vertical/social video
data-* composition timing
Prerequisite verification
Pinned init/preview/lint/check/render flow
Local, cloud, lambda, and cloudrun render routing

Artifacts Produced

HyperFrames render summary

Pattern

Composition path, pinned command sequence, lint and check results, render command, MP4 output path, ffprobe duration and dimensions, local/cloud note.

A trustworthy result shows lint and check passed before render and ffprobe proved the MP4 duration and dimensions.