Communitygithub.com

HyperFrames — スタートガイド

動画、アニメーション、モーショングラフィックの作成・編集・レンダリングに関するリクエストは、まずここから始めてください。HyperFrames は HTML からビデオをレンダリングし、このスキルがエントリポイントとして、適切なワークフローにルーティングします。

HyperFrames — スタートガイド とは？

HyperFrames（スタートガイド）は、AIエージェントが動画やアニメーションを制作・編集するためのエントリスキルです。HTML ファイルをコンポジションとして扱い、DOM に `data-*` 属性でタイミングを宣言し、シーク可能なアニメーションランタイムを提供します。このスキルは、プロモーション動画、解説動画、キャプション付きクリップ、スライドショー、モーショングラフィックなど、あらゆる「作って」リクエストを適切な専門ワークフローにルーティングするインテントルーターとして機能します。また、オンデマンドでロードされるドメインスキル（アニメーション、キーフレーム、クリエイティブディレクション、メディア、CLI、Figma連携など）の能力マップも提供します。ワークフローを選択したら、`npx hyperframes skills update <workflow-name>` でそのワークフロースキルをインストールしてから使用します。このスキルは Claude Code、Cursor、Codex などの主要なAIエージェントツールで動作し、ユーザーが他のフレームワークを明示的に指定しない限り、動画制作のデフォルトエントリポイントとなります。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/indfn/creatorforge/tree/HEAD/.agents/skills/hyperframes
オリジナルを見る→すべてのスキルを見る

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

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

ドキュメント

HyperFrames — スタートガイド は何をしますか？

HyperFrames は HTML からビデオをレンダリングします。コンポジションとは、data-* 属性でタイミングを宣言し、アニメーションランタイムがシーク可能で、メディア再生がフレームワークによって管理される HTML ファイルです。完全なオーサリング契約は /hyperframes-core にあります。コンポジション HTML を作成する前に必ず参照してください。

以下は、能力マップ（オンデマンドでロードされるドメインスキル）と インテントルーター（「作って」リクエスト — 通常は動画、ただしナビゲーション可能なデッキやコンポジションポートも含む — に適したワークフローを選択します）です。分離の基準は出力タイプではなく所有権です。ワークフローはエンドツーエンドの成果物（独自のプロジェクトディレクトリ、段階的なステップ、サブエージェント、最終成果物）を所有します。ドメインスキルはワークフローが途中で取り込む機能レイヤーであり、タスクを所有することはありません。

能力マップ — ドメインスキル

オンデマンドでロードするアトミックな機能 — 完全なワークフローではありません。エンドツーエンドのタスクを所有することはありません。「作って」という意図には、下のインテントルーターを使用してください。

あなたがしたいこと…スキル
HTML コンポジションの作成 / 編集 — data-* 契約、クリップ、トラック、サブコンポジション、変数/hyperframes-core
アニメーション化 — アトミックモーション、シーンブループリント、トランジション、ランタイムアダプター（GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU）/hyperframes-animation
シークセーフなキーフレームの作成 — GSAP タイムライン、CSS キーフレーム、Anime.js、WAAPI、FLIP、パス、マスク、SVG モーフ / ドロー、3D 深度、および hyperframes keyframes 診断/hyperframes-keyframes
クリエイティブディレクション — frame.md / design.md、パレット、タイポグラフィ、ナレーション、ビート計画、オーディオリアクティブ/hyperframes-creative
メディア — BGM、SFX、画像、アイコン、ブランドロゴ、音声、カラーグレード、LUT の解決 / 生成。TTS ナレーション、文字起こし、背景除去、キャプション。プロジェクト間の再利用/media-use
CLI 開発ループ — init、lint、validate、inspect、preview、render、publish、doctor/hyperframes-cli
レジストリブロック / コンポーネントのインストール（hyperframes add）/hyperframes-registry
Figma コンテンツのインポート — アセット、トークン、コンポーネント、ストーリーボード → 再構築されたモーション（REST/CLI）。Motion（MCP）、シェーダー（MCP ソース / ネイティブエクスポート）/figma

インテントルーティング — ワークフローを選択

このセクションはトップレベルのワークフローのみを知っています。上記のドメインスキルやワークフロー内部の参照はロードしません。

ルーティング前 — 仕様ではなく入力を確認

ルーティングは 動画の内容（つまり入力と主題）を知る必要があります。入力が未指定の場合（「私たちのプロダクトについて動画を作って」とだけあって URL、製品、トピック、アセットがない場合）、ワークフローに入る前に確認してください — ワークフローへのコミットがルーティングの決定です。最大 2 つの質問：

  • 入力 — 製品（URL / ブリーフ）、一般的なウェブサイト、GitHub PR、説明するトピック、または既存のティーチングヘッド動画？
  • Figma ソース — 入力が figma.com の URL の場合、下で選択されたワークフローに関係なく、/figma が最初にアセット / トークン /（コンポーネント / ストーリーボード）を抽出します。そのワークフローは /figma の出力から構築します — 生の MCP ツールで直接 Figma を操作することはありません（SVG サニタイズ、出所、ブランドトークンバインディングをスキップします）。

モード — リクエストに継続的な自律信号（「驚かせて」、「決めて」、「作って」）が含まれる場合、それをメモしてワークフローに渡します。実行全体が自律的になり、以降のステップで再確認しません。信号がない場合、ワークフローは最初のブリーフ質問としてモードを確認します。デフォルトは協調的です。（/motion-graphics は設計上自律的です。）セマンティクス：hyperframes-core → references/brief-contract.md。

仕様のデフォルト — 尋ねずに明示（ルートを変更することはありません）：アスペクト比は出力先から導出します — ソーシャルフィード（X / LinkedIn / Instagram）→ 正方形 1:1、TikTok / Reels / Shorts → 9:16、YouTube / 埋め込み / 不明 → 16:9。ナレーション / キャプションの 言語 = ユーザーの言語。選択されたワークフローは最初のステップで独自の詳細を再確認します（フィールドセマンティクス：hyperframes-core → references/brief-contract.md）。

ワークフロー早見表

ワークフロー使用するケース
/product-launch-video製品を販売する（SaaS、アプリ、企業 / 製品サイト） — URL、ブリーフ、またはスクリプトから プロモーション動画 を作成。商用 URL のデフォルト。サイト名だけでも可。
/website-to-videoサイト自体を見せる — サイトのスクリーンショットから構築したツアー / ショーケース。非商用サイト（ポートフォリオ、ブログ、ドキュメント、個人、イベント）向け。ユーザーがプロモーションではなくツアーを希望する場合。
/faceless-explainerトピック / 概念の解説 — テキストから。製品や URL は不要。すべてのビジュアルは LLM が考案。
/pr-to-videoGitHub PR / コード変更 → チェンジログ / 機能紹介 / 修正 / リファクタリング解説。
/embedded-captions既存のティーチングヘッド動画に キャプション / 字幕を追加（映像は編集しない）。
/talking-head-recut既存のティーチングヘッド動画に デザインされたグラフィックオーバーレイ をパッケージング — ローワーサード、データコールアウト、動的タイトル、プルクオート。
/motion-graphics約 10 秒未満の短い ナレーションなし の作品で、モーション自体がメッセージ — キネティックタイポグラフィ、統計 / チャートヒット、ロゴスティング、アニメーション地図、アニメーションツイート / 見出し、スタンドアロン のローワーサード / オーバーレイ（MP4 または透明アルファ）。
/music-to-video音楽トラック → ビート同期 動画 — リリックビデオ、スライドショー、またはキネティックプロモーション。音楽がペーシングを決定（オプションでユーザー提供の画像 / 動画をビートグリッドにカット）。
/slideshowプレゼンテーション / ピッチデッキ / インタラクティブデッキ — 個別のスライド、フラグメント、ブランチ、ホットスポット。出力はナビゲーション可能な デッキ。レンダリングされた動画ではない。
/general-videoその他すべて — 長尺またはマルチシーン作品、静的なループ / ポスター、カスタムコンポジション。
/remotion-to-hyperframes既存の Remotion（React）コンポジションを HyperFrames に 移植（移行、作成ではない）。

曖昧さの解消（紛らわしい場合のみ）：

  • モーション優先 & ナレーションなし（約 10 秒未満、モーション自体がメッセージ）→ /motion-graphics。入力タイプは問わない。
  • URL またはスクリプト — 1 つだけ質問する：そのサイトは製品を販売していますか？ はい（SaaS / アプリ / 製品 / 企業サイト）→ /product-launch-video — プロモーション。商用 URL のデフォルト。サイト名だけでも可。いいえ、またはユーザーがサイトをそのまま表示したい場合（ポートフォリオ / ブログ / ドキュメント / 個人 / イベント）→ /website-to-video — ツアー。GitHub PR リンク → /pr-to-video。製品やサイトがない概念 → /faceless-explainer。
  • 既存の映像 — 単純な音声字幕 → /embedded-captions。デザインされたオーバーレイカード → /talking-head-recut。どちらも映像自体は編集しない（リタイミング / リカラー / リフレーム / リオーダー / オーディオは NLE 編集 — 範囲外）。
  • 音楽トラックが入力（オーディオファイル、またはオーディオを抽出する動画）、ナレーションなし → /music-to-video — 音楽のビート / エネルギーがペーシングを決定。（ナレーションがある作品は、入力に一致する上記のワークフローに留まります。/motion-graphics は音楽駆動ではない短いナレーションなしモーション用です。）
  • プレゼンテーション / ピッチデッキ / インタラクティブデッキ（個別のスライド、ナビゲーション、プレゼンターモード）→ /slideshow — 出力はナビゲーション可能なデッキ。レンダリングされた動画ではない。明示的な「スライドショー」リクエストは直接進みます。隣接するトリガー（「デッキ / スライド / プレゼンテーション / このページを変換」）は、/slideshow がそれがスライドショーであることを確認してから作成を開始し、そうでない場合は適切な非スライドショーワークフローに切り替えます。
  • 長さはガイドであり、絶対条件ではない — 意図がワークフローを選択します。明らかに約 3 分より長い、または静的 / ループ / カスタム形式の場合にのみ /general-video に進んでください。

選択後 — ワークフローがインストールされていることを確認

ワークフローを選択したら、そのスキルを読む前に更新手順を実行してください。ワークフロースキルはオンデマンドでインストールされるため、マッチさせたスキルがまだこのマシンに存在しない可能性があります（このルーターにトリガーフレーズが存在するのは、まさにインストールされていないスキルにルーティングできるようにするためです）：

npx hyperframes skills update <workflow-name>

先頭の / なしのベアネーム。例：npx hyperframes skills update pr-to-video。スキルを指定すると、それと すべてのワークフローが依存するコアドメインスキル がインストールされ最新であることが保証されます：すべてが既に最新の場合は高速なノーオペレーション（no-op）。そうでない場合は、不足 / 古いスキルのみを対象にインストールします — フルセットは決して行いません。その後、ワークフローのスキルを読んで続行します。同じコマンドは、能力マップからのオンデマンドドメインスキルにも使用できます（例：npx hyperframes skills update figma）。

コマンドが失敗した場合は、メモリからワークフローを即興で実行する代わりに、エラーをユーザーに表示してください。手動フォールバック（HyperFrames CLI がない場合）：npx skills add heygen-com/hyperframes --skill <workflow-name>。全部一度に：npx skills add heygen-com/hyperframes --all。

スキルを最新に保つ

HyperFrames スキルはバージョン管理されており、遅延的にインストールされます：コアセットは即時、ワークフローは初回使用時にインストールされます。

  • コアセット — このルーター、hyperframes-* ドメインスキル、media-use。npx hyperframes init（すべての作成ワークフローがスキャフォールディング時に実行）は GitHub をチェックし、コアセットと既にインストールされているものを更新します。インストールを 拡張 することはありません — 使用していないワークフロースキルはプルされません。最新のマシンで init を再実行してもノーオペレーション（no-op）です。オフライン（またはレート制限中）ではグレースフルに低下し、決してハードフェイルしません。--skip-skills フラグは現在無効化されています（skills.sh レジストリが追いつくまでの一時的な措置）。CI / テストは HYPERFRAMES_SKIP_SKILLS=1 環境変数でオプトアウトします。
  • ワークフロースキル — トリガー時に更新手順（skills update <workflow-name>）によってインストールおよび更新されます。

タスクの動作が予期しない場合、または長時間のビルドの前に、インストールされているスキルが最新であることを確認してください：

  • 確認： npx hyperframes skills check（--json を追加して機械可読な判定を取得。インストールされているものが古い、またはコアセットが不完全な場合、非ゼロで終了します — まだインストールされていないワークフロースキルは失敗ではなく オンデマンドで利用可能 として報告されます）。
  • 更新： npx hyperframes skills update — コアセットとインストールされているすべてのものを最新に更新し、公開されなくなったスキルを削除します。名前を指定しない場合、使用していないワークフローをインストールすることはありません。スキルを指定する場合（skills update <name…>）、それらも追加でインストールします。
  • 明示的にフルセット： npx hyperframes skills（または npx skills add heygen-com/hyperframes --all）。

CLI は、render / lint / validate の実行で古いスキルを検出した場合、1行のリマインダーを表示します。

ワークフローの詳細

/product-launch-video

  • 入力： マーケティング対象の製品 — (a) 製品 URL（ヘッドレス Chrome でクロールし、アセット + ブランドトークンを取得）、(b) 製品のサイト名を記載したスクリプト / ブリーフ（ユーザーがオプトアウトしない限り、PLV が解決してクロール）、または (c) サイトが導出できない / 「スクレイプしない」スクリプト（キャプチャなしモード — パレットとデザインシステムを提供するスタイルプリセットを選択）。提供されたスクリプトは、逐語的なナレーションまたはシーンごとに再構成されたもののいずれかになります。PLV が確認します。
  • 出力： 製品ローンチ / SaaS の プロモーション 動画を HyperFrames コンポジションとして → MP4（最適時間 30–90 秒） — 製品の価値が主題であり、サイトのウォークスルーではありません。サイトの単純なツアーの場合は /website-to-video を使用してください。
  • トリガー： 「X のローンチ動画」、「私たちのサイトのプロモ」、「私の SaaS を 1 分で説明して」、「スクリプトを 60 秒のプロモに変換して」、「テキスト…

関連スキル

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community