Communitygithub.com

hyperframes-cli

HyperFrames CLI は、Node.js 22 以降と FFmpeg を必要とする動画作成ツールキットです。プロジェクトの初期化、アニメーションのカタログ検索、コンポジションの作成、プレビュー、レンダリング、品質チェックなどをコマンドラインから実行できます。

hyperframes-cli とは?

HyperFrames CLI は、動画やアニメーションの作成プロセスを効率化するためのコマンドラインツールです。Node.js 22 以降と FFmpeg を前提とし、プロジェクトのスキャフォールディング(`init`)、動きのプリミティブを検索するカタログ機能(`catalog`)、コンポジションの作成・編集、高速なフィードバックループ(`lint`、`check`)、プレビュー(`preview`)、レンダリング(`render`)など、動画制作の全工程をカバーします。特に、開発者は目的の動きを自然言語で記述してカタログを検索し、適切なプリミティブが存在すればそれを利用することで、車輪の再発明を防ぎます。また、クリエイター編集におけるクロスリファレンス(例:ズームやカット編集時には専用のドキュメントを参照)が必須であり、品質と一貫性を確保します。CLI は TTY と非 TTY の両方のモードをサポートし、エージェントや CI 環境での利用も考慮されています。オンラインのホステッドティアはなく、カタログ検索やフィードバックはプライバシーを重視して設計されており、オフラインのセマンティック検索(`--on-device`)もオプションで利用可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/jasonfast123/hyperframes-skills/tree/main/skills/hyperframes-cli

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

HyperFrames CLI

npx hyperframes ... としてコマンドを実行します。プロジェクトの指示でラッパーが指定されている場合は、それに従ってください。ラッパーが存在する場合は、そちらを優先します。CLI には Node.js 22 以降と FFmpeg が必要です。

開発ループ

  1. スキャフォールド: npx hyperframes init <project> またはサイトをキャプチャします。非 TTY モードでは、--non-interactive --example=<name> を渡します。
  2. 動きを見つける: 手作業でモーションを作成する前に、すでにその動きを実現するプリミティブがないかを検索します: npx hyperframes catalog --query "一行ずつ見出しを表示する"。思い浮かべた仕組みではなく、実現したい効果を指定してください。npx hyperframes add <name> でインストールします (/hyperframes-registry を参照)。何も適合しない場合にのみ、手作業で作成します。
  3. 作成: /hyperframes-core を使用してコンポジションを記述します。
  4. 編集時の高速フィードバック: 最初の HTML パス後、および構造変更後に npx hyperframes lint を実行します。
  5. 最終ゲートを実行: npx hyperframes check を実行します。lint が再実行されてからブラウザが開きます。冗長な独立した lint 呼び出しを前置しないでください。注釈付きの概要フレームとクロップ領域を見つけるには --snapshots を追加します。
  6. サブコンポジションの検査: index.html が data-composition-src をマウントする場合、中間点のスナップショットをキャプチャし、マウントされた各シーンを検査します。
  7. 最終 Studio プレビューを開く: npx hyperframes preview --background を実行し、URL が HTTP 200 を返すことを確認し、タイムラインプロジェクトの URL をユーザーに渡し、修正するかレンダリングするかを尋ねます。レビューが終了するまでプレビューを開いたままにします。
  8. 承認後にのみレンダリング: イテレーションにはドラフト品質、納品には高品質を使用します。
  9. 出力を検証: ファイルが存在し、空でなく、妥当な長さであることを確認します。

必須のクリエイター編集クロスリファレンス

  • ズーム、パンチイン/パンチアウト、リフレーム、カメラ移動、またはキーフレームモーションの作成や診断を行う前に、/hyperframes-keyframes を読んでください。
  • hyperframes keyframes の前に /hyperframes-keyframes を読んでください。このコマンドはアニメーションの軌跡を表示し、クリップカットの診断は行いません。
  • カット、トリム、スプライス、並べ替え、またはソースタイミングの編集には、/hyperframes-core を読み、そのクリップ/タイムラインのコントラクトを使用してください。
  • フェードイン/フェードアウト、クロスフェード、トラックゲイン、ボリュームオートメーション、ダッキング、ナレーションのカーブ、または配置されたオーディオへのエフェクトには、/hyperframes-audio を読んでください。クリップの配置やピクチャタイミングも変更する場合は、これと一緒にコアもロードしてください。
  • メディアのソース/生成または派生アセットの前処理には /media-use を使用してください。クリエイター編集マークアップは /hyperframes-core → references/creator-editing-recipes.md からコピーしてください。
# 高速イテレーションチェック。作成中に必要に応じて繰り返します。
npx hyperframes lint

# 必須の最終ゲート。lint を含みます。
npx hyperframes check
npx hyperframes preview --background
npx hyperframes render --quality high --output out.mp4
test -s out.mp4
ffprobe -v error -show_format out.mp4

check は最初に lint を実行し、次に1つのブラウザセッションと1つのシークパスを使用して、ランタイムエラー、失敗したリクエスト、レイアウト、*.motion.json のアサーション、WCAG のコントラストを監査します。永続的な問題は終了コードをゲートします。一過性の開始または終了の問題は情報提供のみです。警告をゲートするには --strict を使用します。互換性のために validate、inspect、layout はエイリアスとして残りますが、新しい指示やスクリプトには使用しないでください。

2つの異なるプレビュー画面

これらの状態を混同しないでください:

画面開かれるタイミング目的
ストーリーボードコンポジションチェック前、storyboard: yes の場合のみプランカードとワイヤーフレームスケッチをレビューします。?view=storyboard#project/<name> を開きます。
最終コンポジションプレビューcheck が成功した後レンダリング前にアセンブルされたタイムラインをレビューします。#project/<name> を開きます。

初期のボードは最終ビデオの承認ではありません。レンダリングには常に hyperframes-core/references/review-loop.md で定義された最終承認が必要です。

サブコンポジションのスモークテスト

静的監査ではすべてのマウント障害をキャッチできません。プロジェクトがサブコンポジションを使用する場合、各ホストスロットの少なくとも1つの中間点の可視スナップショットをキャプチャしてください:

npx hyperframes snapshot --at <t1>,<t2>,<t3>

極小のスタイルなしコンテンツ、キャンバスサイズのアイコン、欠落したヒーロー要素、またはタイムライン登録のタイムアウトは、レンダリングをブロックするマウント欠陥として扱います。対応する修正については hyperframes-core/references/sub-compositions.md を参照してください。

エージェントの規約

  • モーションを手作業で作成する前に、カタログを検索してください。 npx hyperframes catalog --query "<平易な英語でのビート>"。検索は完全にローカルで行われます。ホステッドティア、アカウントはなく、クエリテキストが外部に送信されることもありません。デフォルトでは、アイテムの名前、タイトル、説明と共有される語彙でランク付けされるため、カタログ自身の表現を再利用しないフレーズは見逃されます。代わりに意味でランク付けするには --on-device を追加してください(以下のオフラインティアを参照)。

  • ビデオが英語でなくても、クエリは英語で記述してください。 両方のティアは英語のカタログをインデックスしているため、他のスクリプトでのクエリは検索可能な用語を生成せず、何も返しません。動きを英語で説明してください。画面上のコピーは、ビデオが必要とする言語のままです。No searchable words in query はまさにこの状態を意味し、コンポーネントの欠落ではありません。カタログのギャップとして報告しないでください。

  • どのティアが応答したかを読み取ってください。結果が表示されたからといって推測しないでください。 --json を使用すると、エンベロープには query、tier (on-device または words)、tier_detail、dropped、unindexed、shown、total、results、および応答ティアが生成する場合は top_score、ティアが要求されたが実行できなかった場合は warnings が含まれます。words での弱い結果は予想通りです。同じ結果が on-device で出た場合はバグです。top_score は on-device のみであり、その背後にしきい値はありません。ランカーはすべてのクエリに対してカタログ全体を何らかの順序で返すため、それを合格または不合格としてではなく、証拠として読んでください。

  • dropped と unindexed は、レジストリとオンデバイスインデックス間の逆の偏りであり、クエリを言い換えてもどちらも修正されません。 dropped は、このレジストリがインストールできないランク付けされた名前をカウントするため、最も強い一致が失われています。unindexed は、インデックスがまったく認識できないレジストリの動きをカウントし、どのクエリでも返すことはできません。どちらに対しても、レジストリのリフレッシュは解決策ではありません。そのマニフェストには24時間のTTLがあり、自己修復します。ベクトルは別途公開されたアーティファクトであり、~/.hyperframes/catalog/ にフェッチされます。unindexed がゼロより大きい場合、--on-device を再実行するとそのインデックスが再フェッチされるため、それがユーザーに提供する救済策です。純粋な過カバレッジの偏り(dropped がゼロより大きく、unindexed がゼロ)は再フェッチをトリガーしません。その場合は ~/.hyperframes/catalog/ をクリアするしかありません。両方のカウントは結果ではなく名前のカウントであるため、どちらも total を超える可能性があります。

  • 検索でインストールする価値のあるものが何も返ってこなかった場合は、その旨を伝えてください。 npx hyperframes feedback --search-miss "<実行したクエリ>" --wanted "<必要だった動き>" --tier <応答したティア>。この行を自分で組み立てる必要はありません。catalog --query は事前に入力された状態でこれを出力し、すべての --json 検索エンベロープは report_gap としてクエリとティアがすでに正しい状態でそれを保持しています。--wanted を入力して送信してください。これがクエリをどこかに送信する唯一のパスであり、単純な catalog --query が何も送信しないという約束を守るために、これは別個の意図的なコマンドです。いずれかのティアで報告してください。 結果が目的の動作をしないときはいつでも、です。オンデバイスティアを待つ必要はありません。オンデバイスティアは同意が必要な33 MBのダウンロードを必要とし、そのためほとんどのエージェント実行ではオフになっています。それを待つことは、決して報告しないことを意味します。ティアはレポートに含まれるため、語彙のミスと意味のミスは、どちらに該当するかをユーザーが判断しなくても区別可能です。返ってくるのは、カタログにまだない動きのリストであり、インストール数から推測されるのではなく直接読み取られるため、重要なのは、あなたが想像したアイテム名ではなく、必要だったエフェクトの表現です。評価は含まれず、評価指標に届くこともありません。

  • オフラインティアを提供してください。静かに有効にしないでください。 約33 MBの1回限りのダウンロード(bge-small-en-v1.5 の量子化ONNXビルドとそのトークナイザー、固定リビジョンにピン留め)とレジストリからのカタログベクトル。どちらも ~/.hyperframes/ の下にキャッシュされ、プロジェクトやパッケージには追加されません。一度キャッシュされると、何も送信せずに意味でランク付けされます。サイズを声に出してユーザーに決定させ、同意が得られたら --on-device(プロンプトをスキップするために -y を付けて)を渡してください。インタラクティブなオファーはTTYでのみ発動し、--json の下では何も印刷されないため、エージェント実行ではユーザー自身に提起する必要があります。

  • エージェントおよびCI呼び出しには --json を優先してください。サーバーモードの render、preview、play は通常のJSON出力を提供しません。preview --selection --json および preview --context --json はクエリモードの例外です。

  • doctor --json は常にゼロで終了します。そのペイロードでゲートしてください:

    npx hyperframes doctor --json | jq -e '.ok' >/dev/null
    
  • 非TTYモードは自動です。init ではそこで --example が必要です。TTYで決定論的な動作を強制するには --non-interactive を使用してください。

  • 同じ検証ループ内のすべてのコマンドに1つの HYPERFRAMES_RUN_ID を使用してください。

  • 対応する警告、変数、またはCI条件がレンダリングをゲートする必要がある場合は、--strict、--strict-all、--strict-variables を使用してください。

  • JSONパスはホームディレクトリを $HOME として難読化します。難読化を元に戻そうとしないでください。

  • ホステッドクラウドプロジェクトが200 MBのアップロード制限に近づいているか超えている場合は、cloud render --dry-run --json を使用し、references/cloud.md の .hyperframesignore 調査に従ってください。アセットが大きいという理由だけで無視しないでください。

  • チェックが成功したからといってレンダリングしないでください。最終プレビューで一時停止し、承認を待ってください。

Studio による編集

ユーザーが「この要素」や現在の選択について言及した場合、推測する代わりに Studio にクエリを実行してください:

npx hyperframes preview --context --json --context-fields selection

selection.target.hfId が利用可能な場合はそれを使用し、それ以外の場合はそのセレクタとソースファイルを使用します。結果が no-selection を報告した場合、ユーザーに要素をクリックして再実行するように依頼してください。必要なコンテキストスライスのみを要求してください。計算されたスタイルや編集可能なテキストメタデータには --context-detail full のみを使用してください。完全な動作と障害コードは references/preview-render.md にあります。

レンダリングの選択肢

ニーズコマンド
高速ローカルイテレーションnpx hyperframes render --quality draft
最終ローカル納品npx hyperframes render --quality high --output out.mp4
再現可能なコンテナレンダリングnpx hyperframes render --docker --strict --output out.mp4
ローカル変数駆動バッチレンダリングnpx hyperframes render --batch rows.json --output "renders/{name}.mp4"
HeyGen ホステッドゼロインフラレンダリングnpx hyperframes cloud render
自己管理分散 AWS レンダリングnpx hyperframes lambda render <project> --width 1920 --height 1080 --wait
自己管理分散 GCP レンダリングnpx hyperframes cloudrun render <project> --width 1920 --height 1080 --wait

スキル属性は自動的に行われます。上記の例では --skill は必要ありません。ワークフローによってスキャフォールドされたプロジェクト (hyperframes init --skill=<workflow>) は、その所有スキルを hyperframes.json に記録し、その後のすべてのレンダリングは匿名テレメトリでそれを継承します: 再レンダリング、npm run render、--batch も同様です。ワークフローを通じて作成されなかったプロジェクトにスタンプする場合にのみ、明示的に --skill=<slug> を渡してください(最初のレンダリングでそれが永続化されます)。

ユーザーがローカルの Chrome、FFmpeg、AWS なしでホステッドレンダリングを希望する場合は、クラウドレンダリングを使用してください。AWS の所有権が要件である場合にのみ Lambda を使用してください。GCP の所有権が要件である場合にのみ Cloud Run を使用してください。クラウドパスを実行する前に、対応するリファレンスを読んでください。

レンダリングの成功を確認した後、テレメトリが無効になっているかユーザーがオプトアウトしていない限り、1つのフィードバックレポートを送信してください:

npx hyperframes feedback --rating <0-10> --comment "<具体的な結果または摩擦>"

クリーンランは簡潔にフィードバックしてください。バグや摩擦については、症状の要約のみを送信せず、提出前に再現パケットをキャプチャしてください。これには、再実行可能なコマンド(プロジェクトディレクトリからの相対パス — フィードバックは公開チャネルに送信されるため、絶対パス、ホームディレクトリのプレフィックス、ユーザー/マシン識別子は貼り付けないでください)、期待される動作と実際の動作、正確なエラー(スタックトレースからも絶対パスを取り除いてください — ベース名 + 行番号を保持し、先頭のディレクトリを削除)、出力が完了したか/フォールバックしたか/失敗したか、回避策、再現プロジェクトのステータスを含めてください。レーティング ≤ 7 で視覚的な欠陥(黒フレーム、フリッカー、破損した出力、間違ったフレーム、空白の出力、その他の視覚的な異常)を説明する場合は、COMPOSITION_STRUCTURE: ブロックも含めてください。これはプライバシーを保護する構造的な解剖(要素の構成 + 属性の存在 + タイムラインの形状)であり、メンテナがコンポジションZIPなしで既知のバグファミリーとパターンマッチングできるようにします。エージェントは composition-census ヘルパーを介してこれを自動入力します。人間のユーザーは手動で入力しません。問題が再現しなかった場合は、その旨を述べ、それでも最後に失敗したコマンドとログを含めてください。同意がある場合にのみ --file-issue を使用してください。これは最小限の再現を公開URLに公開します。必要なパケット形式とプライバシー警告は references/preview-render.md にあります。

コマンドを実行する前に対応するリファレンスを読んでください

...

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

embedded-captions

>

faceless-explainer

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

figma

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

general-video

>

hyperframes

>

hyperframes-animation

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition

hyperframes-audio

>

hyperframes-core

The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class=

hyperframes-creative

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.

hyperframes-keyframes

>

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

jasonfast123/hyperframes-skills

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

media-use

Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog misses; produce voiceover, transcription, captions, and background removal through one shared audio engine; operate on media (cut / reframe / transform); and reuse assets across projects. Also use for vague feedback that real footage looks dark, flat, boring, should feel retro/camcorder/print/ASCII, needs privacy, or needs a media reveal.

motion-graphics

>

music-to-video

Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat grid, and a complete video needs zero assets. Narrated pieces → the input-matched workflow (see /hyperframes). Unclear → /hyperframes.

pr-to-video

Turn a GitHub pull request (a PR URL, owner/repo#N, or

remotion-to-hyperframes

Port an existing Remotion (React) composition

slideshow

>

talking-head-recut

Package an existing talking-head / interview / podcast video with timed, designed GRAPHIC OVERLAY cards — kinetic titles, lower-thirds, data callouts, quotes, side panels, picture-in-picture — synced to the transcript, on a 16:9 / 9:16 / 4:5 canvas of your choice; the clip plays untouched underneath. Trigger on

関連スキル