hyperframes-cli

作成者: heygen-com

HyperFrames CLI dev loop — `npx hyperframes` for scaffolding (init), validation (lint, inspect), preview, render, and environment troubleshooting (doctor, browser, info, upgrade). Use when running any of these commands or troubleshooting the HyperFrames build/render environment. For asset preprocessing commands (`tts`, `transcribe`, `remove-background`), invoke the `hyperframes-media` skill instead.

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-cli

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin.

HyperFrames CLI

Run npx hyperframes <command> unless the project gives a wrapper; then use the wrapper. It needs Node.js 22+ and FFmpeg. Every command has --help; most take --json, and a failure prints ✗ …, a Fix: line and exits non-zero.

Commands by job

JobCommands
Startinit <dir> (blank; --example <name> only when asked), capture <url>
Read a projectinfo, compositions, timeline --json, docs <topic>
Check itlint while writing; check --json as the gate (lint, runtime, layout, contrast)
Look at itsnapshot (--at <t,…>, --range START,END, --composition <id>, --zoom, --angle, --against <video>), keyframes, compare, audio
Edit the timelinetimeline with move, trim, split, set, duplicate, delete, apply, undo, ids
Reusecatalog, add (/hyperframes-registry)
Media and soundmedia-treatment, grade-compare, remove-background, tts, transcribe, beats, normalize-audio (/media-use)
Show and shippreview, present (/slideshow), render, publish, cloud, lambda, cloudrun
Desktop appopen, catch-up
Upkeepdoctor, browser, upgrade, skills, usage, clean, feedback

validate, inspect and layout are deprecated aliases of check; events is telemetry for skills' own scripts. Don't run them.

The loop

  1. Write, then npx hyperframes lint after the first pass and after structural changes.
  2. npx hyperframes check --json and fix every error. While a lint error remains the layout and contrast audits don't run; "0 samples" means nothing was checked. Contrast failures carry a suggestedColor. A finding at a single sample (an entrance in flight) is info; a 3 s+ video with no visible change fails sweep_static.
  3. npx hyperframes snapshot and read the PNGs (under .hyperframes/artifacts/snapshots/): that is how you see the video. With sub-compositions, snapshot a midpoint of every scene; tiny unstyled content or a missing hero is a mount defect (../hyperframes/references/format.md).
  4. npx hyperframes preview --background, check the URL answers 200, give the person the project URL and wait, unless they asked for the file or for no stops. Passing checks alone is not a reason to render.
  5. When it is time to render (step 4): npx hyperframes render --quality looks --output out.mp4 (draft while iterating, delivery for the final). Confirm the file is non-empty and its ffprobe duration matches the root data-duration, then look at decoded frames.

"This element" or the current selection: npx hyperframes preview --context --json --context-fields selection; no-selection means ask them to click it.

Edit the timeline

These are the edits Studio itself makes, so the result stays in Studio's shape.

  • timeline --json lists clips with absolute absStart/absEnd, owning file and the #id ref the edit commands take (timeline ids stamps missing ids).
  • timeline move|trim|split|set|duplicate|delete <ref> … --plan --json previews one edit; run it again without --plan. --start, --end, --duration set one edge or the length.
  • An edit is refused when the clip would overlap a neighbour (--overwrite, or move the neighbour first) or end past its composition: raise the root's data-duration first. No command changes data-duration.
  • Several edits at once: a JSON file such as [{"verb": "move", "ref": "#outro", "time": "9"}], then timeline apply plan.json --json. Each run prints a receipt; save it and timeline undo receipt.json reverts it.

Project history

Every write is kept and can be undone. At the start of a turn, npx hyperframes history begin --who <you> --label "<plan>", then history --since mine --who <you> to see what the person changed; build on their edits. A check failed or they say it got worse: history undo --who <you>, never hand-edit back. End the turn with history end.

Render where

NeedCommand
Localrender --quality looks --output out.mp4 (draft, delivery)
Reproducible containerrender --docker --strict --output out.mp4
Batch from variablesrender --batch rows.json --output "renders/{name}.mp4"
Hosted, no local Chrome or FFmpegcloud render (references/cloud.md)
Your own AWS or GCPlambda render, cloudrun render (references/lambda.md, references/cloudrun.md)

A 30 s film renders in a minute or two: run it in the foreground. Detach only a render longer than your tool's timeout (HYPERFRAMES_RENDER_DETACHED=1, its own group, output to a log) and wait with until grep -qE 'Render (complete|failed)' render.log; do sleep 5; done, never pgrep -f, which matches its own loop and waits until the tool times out.

After a verified render, send one feedback --rating, plus a report for anything the person asked for that HyperFrames can't do, unless telemetry is off: references/feedback.md.

When a command fails

SymptomFix
Chrome missing or won't startnpx hyperframes browser ensure; doctor --json always exits 0, gate on .ok
A heavy page isn't ready in timeRaise --timeout on check or snapshot
Unusual codec looks blankKeep --proxy on (the default)
Render slow on LinuxThe summary's second line says screenshot + software gpu: the slow path
capture fails or writes BLOCKED.mdTake nothing from its partial files; retry into a new -o folder
Disk tightclean --dry-run, then clean; never delete .hyperframes (it holds history)

References

Read the row before running its command.

CommandsRead
init, capture, skillsreferences/init-and-scaffold.md
lint, check, motion sidecars, snapshotreferences/lint-validate-inspect.md
compare, grade-compare, render --batchreferences/compare-and-batch.md
beatsreferences/beats.md
preview, play, render, publish, Studio contextreferences/preview-render.md
doctor, browserreferences/doctor-browser.md
auth, cloud, template variablesreferences/cloud.md
lambda, cloudrunreferences/lambda.md, references/cloudrun.md
info, upgrade, compositions, timeline, docs, usage, telemetryreferences/upgrade-info-misc.md
--strict flags, run ids, clean, shader lint, JSON pathsreferences/conventions.md
keyframes../hyperframes/references/motion.md (Seeing motion)

heygen-comのその他のスキル

hyperframes-audio
heygen-com
Use when audio already placed in a HyperFrames composition needs to be mixed: a music bed that fights a voiceover (voiceover carve), effects on a track (EQ, compressor, limiter, gate, saturation, delay, reverb, chorus, phaser, bitcrush), or automation envelopes drawn on a track's volume or any effect parameter. Don't use for sourcing or generating audio — finding BGM, SFX, or making a voiceover is `/media-use`. Don't use for clip timing or track layout, which is `/hyperframes-core`.
hyperframes-animation
heygen-com
HyperFramesのアニメーション知識全般 — アトミックモーションルール、マルチフェーズシーンブループリント、シーン遷移、広範なモーションデザイン技法、および7つのランタイムアダプター(GSAPデフォルト、Lottie、Three.js、Anime.js、CSSキーフレーム、Web Animations API、TypeGPU)。あらゆるモーションやアニメーションタスクに使用:2~4のルールを選んで構成するか、ブループリントを読み込むか、ランタイム固有のAPI(例:GSAPイージング/Lottieプレイヤー/Three.jsミキサー)を参照。HyperFramesネイティブ:単一の一時停止タイムライン、シークセーフ、...
creativedevelopmentdesign
hyperframes-core
heygen-com
HyperFrames HTML構成契約。構成構造、データ属性、クリップ、トラック、サブ構成、変数、メディア再生、決定論的レンダリングルール、および最小限のレンダリング可能なプロジェクトの検証に使用します。
developmentmediacreative
hyperframes-media
heygen-com
HyperFramesコンポジション向けのアセット前処理 — マルチプロバイダーTTS(HeyGen / ElevenLabs / Kokoroローカル)、マルチプロバイダーBGM(Google Lyria / ローカルMusicGen)、Whisper文字起こし、背景除去、キャプション作成。npx hyperframes tts、bgm、transcribe、remove-background、voice/provider選択、music-moodプロンプト、captions / subtitles / lyrics / karaoke / per-word stylingに使用。
mediaaudiovideo
hyperframes-registry
heygen-com
HyperFrames構成にレジストリブロックとコンポーネントをインストールして配線します。hyperframes addの実行時、ブロックやコンポーネントのインストール時、インストールしたアイテムをindex.htmlに配線する時、またはhyperframes.jsonを操作する時に使用します。addコマンド、インストール場所、ブロックサブ構成の配線、コンポーネントスニペットのマージ、レジストリ検出、そして新しいブロックやコンポーネントを作成して上流に貢献する方法(アイデア→スキャフォールド→検証→PR)をカバーします。
developmentapicode-review
general-video
heygen-com
カスタムHyperFrames HTMLビデオ合成オーサリングにおいて、専門的なワークフローが適合しない場合のフォールバックとして使用します。長尺またはマルチシーンの作品、ブランド/サイズルリール、モンタージュ、タイトルカード、モーションポスター(任意の長さ)、スタティックループ、および任意の長さやフォーマットの自由形式の合成をカバーします。製品プロモーション(product-launch-video)、一般的なウェブサイトからビデオへのキャプチャ(website-to-video)、トピック解説(faceless-explainer)、GitHub PRビデオ(pr-to-video)、既存映像のキャプション付けなどには使用しません。
videocreativemedia
motion-graphics
heygen-com
ユーザーが短く、デザイン主導のモーショングラフィックを求める場合に使用します。モーションそのものがメッセージとなるもの:キネティックタイポグラフィ、統計や数字のカウントアップ、チャート/データビジュアライゼーションの演出、ロゴスティング、ブランドロックアップ、ローワーサード、コールアウト、ソーシャルオーバーレイ、アニメーション付き見出し/ツイート/ニュースアイテム、モーションポスター、または素早いページキャプチャのハイライト。通常10秒未満、最大約30秒で、ナレーションの流れやボイスオーバー、実写の被写体はありません。MP4または透明オーバーレイでレンダリング可能。長尺、複数シーン、ナレーション付き、ブランドリールなどの作品には使用しません。
creativevideodesign
hyperframes-read-first
heygen-com
動画、アニメーション、モーショングラフィック、解説動画、タイトルカード、オーバーレイ、字幕付き動画、商品プロモーション、ウェブサイト動画、PR・チェンジログ動画、データモンタージュ、モーションポスター、またはHyperFrames HTMLコンポジションの作成、生成、編集、アニメーション化、レンダリングを依頼する場合は、ここから始めてください。ユーザーがHyperFramesに完成したMP4/ウェブ動画の作成やレンダリング、ワークフローの選択、またはプロダクトローンチ動画、顔出しなし解説動画、ウェブサイトから動画への変換などのルーティングを希望する場合、他の動画・アニメーションスキルよりも先に使用してください。
creativevideomedia