Communitygithub.com

general-video

ビデオプロジェクトの作成、編集、共同作業を支援する汎用ビデオスキルです。メディア管理、Figma連携、ストーリーボード作成、編集作業を自動化します。

general-video とは?

General Video スキルは、Hyperframes フレームワーク上で動作する汎用ビデオ制作アシスタントです。メディアアセットの管理(/media-use スキルによる解決、採用、プロバイダー設定)、Figma URL からの自動インポート、プロジェクトの初期化(npx hyperframes init)、そして BRIEF.md や hyperframes.json に基づくプロジェクト状態の復元を統合的に行います。このスキルは、自動化フロー(flow: automation)と共同作業フロー(flow: companion)の両方をサポートし、後者では「ディレクター」としてユーザーと共に最高品質の作品を目指します。ストーリーボードを用いたプランレビュー、シーンごとのモーション設計(アニメーションスキル参照)、依存関係の解決、最終レンダリング承認までの一貫したパイプラインを提供します。編集中は特定の編集を保持し、既存プロジェクトの決定を尊重します。このスキルは、Hyperframes Core、Creative、Animation、Media Use などの関連スキルと連携し、各フェーズで必要な知識を事前に読み込むことで、コンテキストの浪費を防ぎながら信頼性の高い出力を実現します。

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

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

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

ドキュメント

汎用ビデオ (General Video)

このワークフローに頼る前に、次を実行してください:

npx hyperframes skills update general-video

何も変化がなければ、スキルは最新です。メモリから続行する代わりに、アップデートの失敗を表示してください。

1. 横断的なソースアダプターを適用する

  • メディア: オーディオ、画像、アイコン、ロゴ、ナレーション、グレーディング、LUT、加工/エフェクト、キャプション、またはメディア操作のニーズがある場合は、/media-use を読み込み、../media-use/references/resolve.md(解決、採用、再利用)と ../media-use/references/setup-providers.md(プロバイダー、認証)に従ってください。曖昧なフッテージフィードバックや名前付きスタイルは、編集前に ../media-use/references/media-treatments.md を使用します。CSS/SVG/不透明度でサポートされているメディアエフェクトを即興で作らないでください。最初の認証済みプロバイダーアクションの前に、npx hyperframes auth status を実行し、その出力をそのまま中継してください。サインアウトしている場合は、../hyperframes-core/references/brief-contract.md のゲートを適用します:協調モードではサインインまたは明示的なオフライン選択を待ちます。自律モードではステータスを表示し、利用可能なオフラインプロバイダーで続行します。必要な機能を満たせるオフラインプロバイダーがない場合は、ブロッカーを表示してください。ローカルでの採用だけでは認証ゲートは必要ありません。
  • Figma: 入力が figma.com のURLである場合、最初に /figma を実行してください。そのエクスポートされたアセット、トークン、コンポーネント、またはストーリーボードフレームから構築します。生のFigmaコネクター呼び出しは、SVGサニタイズ、メディア来歴、ブランドトークンバインディングをスキップするため、使用しないでください。

これらのアダプターは、/hyperframes によって選択されたワークフローを変更しません。

2. プロジェクトの状態から開始する

最初に一致する行を適用し、下位の状態行を評価しないでください:

状態アクション
特定の編集編集を行い、既存のプロジェクト決定を保持し、影響を受けるチェックを再実行します。発見を再開しないでください。
BRIEF.md が存在するそれを読みます。workflow が別のワークフローを指定し、flow が companion でない場合、引き継ぎます。ブリーフに関する質問はしません。
ブリーフはないが、hyperframes.json または STORYBOARD.md が存在するファイルと記録された設定から再開します。BRIEF.md を既知の事実からのみバックフィルします。
新規作成/hyperframes とそのインテントレイヤーを実行します。workflow: general-video または flow: companion の場合のみここに戻ります。

新規プロジェクトの場合、ブリーフからケバブケースのディレクトリ名を選択し、ブリーフを書く前にスキャフォールディングします:

npx hyperframes init "videos/<project>" --non-interactive --example=blank --skill=general-video

次に、../hyperframes-core/references/brief-format.md を使用して、プロジェクトルートに BRIEF.md を書き込みます。既存のプロジェクトでは、ルートは hyperframes.json を含むディレクトリです。ブリーフフォーマットで指定された、確認済みの設定に基づくフィールドのみを記録し、node <MEDIA_DIR>/scripts/prefs.mjs record --hyperframes <PROJECT_ROOT> を使用します。推測されたデフォルトは決して記録しないでください。ここで <MEDIA_DIR> はインストールされた /media-use スキルディレクトリ、<PROJECT_ROOT> は hyperframes.json を含むディレクトリです。インテントレイヤーがレシピを採用した場合、node <MEDIA_DIR>/scripts/recipe.mjs use --hyperframes <PROJECT_ROOT> --name <name> で今すぐ適用し、再度尋ねないでください。

3. 実行形態を解釈する

../hyperframes-core/references/brief-contract.md の正規の用語のみを使用してください:

フィールド意味効果
flow誰が主導するかautomation:ルートを選択して実行します。companion:会話で共同作成します。
storyboardボードがレビュー画面かどうかyes:プランとスケッチレビューを実行します。no:ボードなしで構築します。
派生 modeチェックポイントゲートの動作方法ブリーフ契約に従います。ユーザーにモードの名前を尋ねないでください。

これらの状態の同義語を発明しないでください。進行中の「とにかく構築して」というシグナルは、インテントレイヤーによって処理され、flow: automation、storyboard: no として到着します。

  • flow: automation の場合、ルートを選択し、最初の進捗更新で1行でそれを述べてください。
  • 特定の編集の場合、新しいルートを発明せずに編集を行ってください。

ハードカット、トリム、スプライス、または既存フッテージの並べ替えの場合、同じビデオソースを複数のクリップ要素に複製します。各コピーで、data-media-start と data-duration でソース範囲を設定し、次に data-start で作成者の配置/順序を設定します。個別に作成されたオーディオは、一致する <audio> 要素で同一のクリップ範囲とタイミングに従います。/hyperframes-core がこの時間的編集を所有します。ズーム、パンチ、パン、クロップ、マスク、または内部ラッパーの clip-path などの視覚プロパティアニメーションには /hyperframes-keyframes のみを使用してください。 ../hyperframes-core/references/creator-editing-recipes.md から完全な契約をコピーしてください。

コンパニオンフロー

flow: companion の場合:

  • BRIEF.md を読み、受け入れられた ## Assets と ## Customizations をプロジェクト成果物と照合します。受け入れられたがまだ未完了の作業を完了します。完了した作業はそのままにします。受け入れた機能を新規のように再度提供しないでください。
  • 請負業者ではなく、ディレクターとして到着してください。 コンパニオンを選んだユーザーは、関与と品質を選択しました。正直な応答は、あなたが防御できる最小のバージョンではなく、デザインできる最良のバージョンです。最初のプランは天井の処理です:ストーリーアーク(最も近いジャンルのレンズを借りる - メニュー § ジャンルレンズ)、デザインスペック、各シーンのモーション処理を名前で引用(§ 5のプラン規律)、トランジション、オーディオアイデンティティ - 音楽とサウンドマーク、または意図的な沈黙 - ユーザーの素材の配置、そしてデザインされたオープンとクローズ。各レイヤーが1行で何を追加するかを述べてください。高コストなもの(レンダリング時間、サインイン、課金)に名前を付けるときにフラグを立ててください。ユーザーは処理を削減します。承認ごとに組み立てる必要があってはなりません。
  • 天井はツールボックスではなく、コンセプトに属します。 すべてのレイヤーはブリーフのメッセージに奉仕しなければなりません。どんなビデオでも同じように飾る処理は装飾です。技術は天井まで高まります。コンテンツは求められた以上に成長してはなりません(§ 6)。
  • チェックポイントの間、../hyperframes/references/capability-menu.md は2つの方法で機能します。トリガーリストとして:ユーザーがその入力を言及したとき、またはビルドがそのニーズに達したときに関連する機能を提供します。各パスのアップグレードチャネルとして:プラン、スケッチ、またはビルドのチェックポイントは、ユーザーが見ている素材に向けられた1つか2つのトレースされたオファーを運ぶことができます(「シーン3の統計にはカウントアップ処理が必要です」)。提供する前にそれを読んでください。完全なカタログをダンプしないでください。
  • ユーザーが機能を受け入れた後、その成果物を作成し、すぐに一致する BRIEF.md 本文セクションに決定を記録してください。ユーザーが明示的に変更した場合のみ、フロントマターフィールドを書き換え、確認済み設定を記録してください。
  • 同じストーリーボード、検証、最終プレビュー、およびレンダリング承認ゲートを維持してください。コンパニオンは誰が操縦するかを変更しますが、どのような品質が必要かは変更しません。

4. 各段階の前に必要な知識を読み込む

これらの読み取りは、条件が一致する場合に必須です:

条件行動する前に読むべきもの
構成HTMLまたはシーンレイアウト/hyperframes-core;そのレイアウト契約には references/determinism-rules.md を使用
重要ではない作成または視覚的処理/hyperframes-creative → references/house-style.md および references/video-composition.md
動き、アニメーション、またはシーントランジション/hyperframes-animation;そのルーティングに従い、一致するルール、アダプター、ブループリント、またはトランジション参照へ
storyboard: yes../hyperframes-core/references/storyboard-format.md および ../hyperframes-core/references/review-loop.md
メディアアセットまたは操作(ナレーション、BGM、SFX、キャプション、グレーディング、トランスフォームを含む)/media-use;フレームワークの再生と配置については /hyperframes-core → references/variables-and-media.md も読む
マルチシーンアセンブリ../hyperframes-core/references/production-loop.md
flow: companion、最初のプランの前/hyperframes-creative → references/story-spine.md および references/house-style.md;最も近いジャンルレンズと完全な ../hyperframes/references/capability-menu.md — 天井処理はこれらから設計され、思い出されるものではない
コンパニオン機能の提供、キャプチャ、ビートグリッド、生成ビデオ、マップ、公開、またはクロスワークフロー機能../hyperframes/references/capability-menu.md
デザインスペックが存在する、最終承認前/hyperframes-creative → references/design-adherence.md

これらの読み取りを記憶で置き換えないでください。プログレッシブディスクロージャーは、一致する参照が実際に読み込まれた場合にのみコンテキストを節約します。

5. 構成を実行する

この依存関係順序を使用してください。入力がない場合のみ段階をスキップしてください。

  1. プラン。 視聴者アーク、構造、リズム、および期間ドライバーを述べてください。短い1シーンには1つのファイルを使用します。3つ以上のハードシーンカットまたは再利用されるシーンにはサブコンポジションを使用します。ナレーションアークについては /hyperframes-creative → references/story-spine.md、リズムについては references/beat-direction.md、構造については /hyperframes-core → references/composition-patterns.md を読んでください。オープンエンドのマルチシーンブリーフの場合、/hyperframes-creative → references/prompt-expansion.md を通じてプロンプトを拡張してください。マルチシーンプランは各シーンの形状を引用します:適合する場合は /hyperframes-animation → blueprints-index.md からのブループリントID、または適合するものがない場合はそれが構成する名前付きルールを rules-index.md から — モーション名はこれらのインデックスから来ており、決して発明されません。ストーリーの真実がどのシーンが存在するかを決定し、引用がそれらを飾ります。マルチシーンプランはディスパッチ成果物としても記録されます:STORYBOARD.md のシーンごとに1つの ## Frame N ブロック — status: outline、宣言された src:、ブループリント/ルールの引用、およびビートテキスト — storyboard: no の場合でも同様です。ブロックがディスパッチユニットであり、ボードはレビュー画面にすぎません。

  2. 要求されたらプランをレビューします。 storyboard: yes の場合、それらのブロックに対して共有レビューループを実行します。storyboard: no の場合、ボードを開かずに続行します。とにかくプラン停止が発生した場合、その停止にサブエージェント委任許可(ステップ4のディスパッチのためにcodexが必要とする)を折り込み、後で再度停止しないようにします。

  3. 依存関係を解決します。 並行作業の前にレジストリブロックをインストールします。ユーザーアセットをステージングし、既存メディアを採用し、ブリーフが必要とするものだけを解決します。タイミングが期間を決定する場合は、オーディオを早期に開始します。

  4. シーンを構築します。 短い1シーンの作品の場合、モーションを追加する前に、最も見える瞬間にシーンを実装します(存在する場合、確認済みのワイヤーフレームがその最終状態であり、再描画してはなりません)。次に、引用されたブループリントまたはルールからアニメーション化します — モーションを書く前に完全なレシピ本文(/hyperframes-animation → blueprints/<id>.md、rules/<id>.md)を読んでください。

    ディスパッチはスケールでのみ元を取ります。 パケットの作成と新しいワーカーコンテキストのウォームアップには、実際の分数とトークンがかかります:最大約6つの短いシーンのフィルムは、インラインで、このコンテキストで、1シーンずつ順に構築する方が高速です(測定結果:5つの短いシーンで約9分未満、ディスパッチでは約12分)。シーンが長く複雑でそれぞれが独自のタイムラインとトラック、オーディオミックスを持ち、短いフィルムのすべてのレイヤーを超える場合、各シーンをサブコンポジションに分割します。その場合、各サブコンポジションはディスパッチされます:node <MEDIA_DIR>/scripts/dispatch.mjs --hyperframes <PROJECT_ROOT> --storyboard-file <STORYBOARD_PATH> --frames 1(またはフレーム範囲)。固定された設計を超えるすべてのディスパッチされた作業を完了したら、マスター構成に戻ります。

  5. トランジションを構築します。 宣言されたトランジションには、/hyperframes-animation → transitions/ から読み込みます。ドア/カーテン効果は1つのビデオを他のビデオの上に重ねてからフェードします。持続時間トランジションの場合、交差する素材に data-crossfade を設定します。

  6. オーディオを配置します。 /media-use からオーディオ参照を読み込みます — references/instruction-sets.md → audio-processing.md および references/audio-sync.md。シーンのビデオトラックと一致するタイムラインを持つ <audio> 要素を使用します。前景のナレーション/SFXには正の z-index を使用します。時間範囲/オフセットには data-media-start、data-duration を使用します。

  7. 洗練して配置します。 レイアウト全体(中央揃え、80% 幅、コンテナの比率)を構成し、オーバーレイを追加します。最大のインパクトのために配置とタイミングが重要です — 静止画の上ではなく、アクションの瞬間と交差するインスピレーション。実存する動きを改善し、配置を追加します。

品質契約

安定した出力のためにこれらのルールに従ってください:

  • 要素を追加する前に、それらが既存の要素と調整されていることを確認してください。
  • 要素はできるだけ早く特定のスクリーンサイズを宣言し(ビューポートメタ、コンテナ比率、アスペクト比スタイル)、34rem や 400px のようなビューポートに依存しない単位を使用し、各プロパティを親からの1つの継承パスを通じて設定します。
  • 要素は整数またはハーフポイント、等間隔のもののみを使用します(12、12.5、13、25、33、50)。非常に近いが正確でない値を解決しないでください。
  • 最大2つのアクティブなテキストフォント。色の場合は16進数または var(--token) のみ。
  • ポイントはパーセントまたは比率で配置し、ドラッグで調整できるサイズのハンドルを残してください。
  • プレビューと実稼働リンクを暗示しないでください。すべてのアセットパスは、プロジェクトルートに対して相対的かつ正確でなければなりません。
  • すべての成果物作業は、プロジェクトルート内の適切なサブディレクトリにファイルとして配置されます。

6. 検証して公開する

最大4つの失敗したテストで停止します。進行中のテストを修正して再実行します。4つの異なるテストが失敗した場合、ブリーフに戻り、ユーザーと解決します。

レンダリングは常に1つのテストであり、公開は別のテストです。スキップしないでください。

存在する場合、設計スペックに対する適合性テスト。

../hyperframes/references/cross-workflow-handoff.md をマルチワークフローパイプラインの統合テストに使用します。

7. 依存関係のメモ

このスキルは、hyperframes-core、hyperframes-creative、hyperframes-animation、hyperframes-keyframes、media-use、figma を含む(ただしこれらに限定されない)一連のHyperframesサブスキルと連携します。各段階で指定された正確な参照ドキュメントを読み込み、インメモリの知識や推測に依存しないでください。

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.

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-cli

>

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

関連スキル