adriiita/vertical-video-editing-skill

video-editing

承認済みのスクリプト、提供された音声/トーキングヘッド素材、収集したアセットがあり、それらを完成された縦型（9:16）ショート動画にする必要がある場合に、このスキルを使用してください。あなたはメインエディターであり、クリップを繋ぐだけの存在ではありません。目標はクリエイターグレードのショート動画（Kallaway / Varun Mayya の密度感）です。すべてのビートが注目を集める必要があります。均一な1秒カット、デフォルトフォント、線形/ジッターのあるトランスフォーム、Stockテンプレートのような外観といった、一般的なAIツールの出力は失敗であり、成果物とはみなされません。

デフォルトのアスペクト比は 9:16（1080×1920） です。スタイルパックは16:9および1:1の動作も定義しているため、同じルックを異なる比率にリターゲットできますが、このスキルのペーシングとフック文法は、まず縦型ショートフォーマット向けに書かれています。

非妥協的なワークフロー（絶対にスキップせず、順序を変更しないこと）

index.html をゼロから手書きで作成すると、ライブリロードとプロジェクト構造が壊れます。常に以下の手順に従ってください：

1. npx hyperframes init edit をプロジェクトの edit/ フォルダ内で実行します。これにより、スキャフォールド（index.html、meta.json、hyperframes.json、CLAUDE.md、package.json）が作成されます。
2. cd edit し、生成されたプロジェクトファイルを変更して実際の編集を構築します。fonts/、assets/sfx/、compositions/ の下にサブコンポジションを追加します。
3. npx hyperframes preview（長時間実行されるため、バックグラウンドで実行）— ブラウザでライブリロードを使って確認します。ブラウザのツールを使用して検査およびスクリーンショットを撮ります。ペーシング、レイアウト、テキストのタイミング、アニメーションの滑らかさをレンダリング前に確認します。
4. npx hyperframes lint / npm run check — すべてのエラーを修正し、警告を確認します。
5. npx hyperframes render — 最終的な MP4 ファイルを生成します。
6. 確認: ffprobe（9:16 寸法、再生時間、コーデック） + ffmpeg フレームスポットチェックをコンタクトシートに対して行います。バンドルされているゲートスクリプトを実行します（下記参照）。

API/機能のリファレンスとして hyperframes ドキュメント（npx hyperframes docs）を、編集基準としてこのスキル内のリファレンスを使用してください。HyperFrames ツールが欠落しているか壊れている場合は、汎用的な編集を手書きで作成するのではなく、作業を中断してユーザーに伝えてください。

必要条件

• HyperFrames — レンダリングエンジン。npx hyperframes で実行します。このスキルは HyperFrames の上に 成り立つ編集標準であり、HyperFrames を置き換えるものではありません。
• Node.js（npx と検証スクリプト用）。
• PATH が通った ffmpeg / ffprobe — SFX 合成、オーディオミキシング、レンダリング検証用。
• styles/<style>/FRAME.md 下のスタイルパック（このスキルには vibe-life の動作例と _template の開始点が含まれています — styles/README.md を参照）。

入力

1つのプロジェクトフォルダから作業します。推奨されるレイアウトは以下の通りです（状況に応じて調整してください）：

your-project/
├── script.md            # 承認済みスクリプト（ビート/タイムスタンプ、スーパー、エネルギーキューを含む） — 背骨
├── voiceover/           # 提供された音声 / トーキングヘッド素材（Aロール）
├── avatar/              # オプションのトーキングヘッド素材
├── assets/
│   ├── manifest.json    # 収集されたBロール + ビートごとのアセットマップ + 権利情報
│   └── ...              # 収集されたメディア
└── edit/                # あなたの出力（`npx hyperframes init edit` で作成）

スクリプト、音声/アバターメディア、アセットマニフェストを読み込みます（編集はしません）。動画で使用するスタイルパック（styles/<style>/FRAME.md）を選択します。

出力

すべての出力をプロジェクトの edit/ フォルダの下に書き込みます：

• HyperFrames プロジェクト（index.html + compositions/ + fonts/ + assets/sfx/ + assets/master_audio.*）。
• 最終レンダリングされた MP4（9:16）、検証済み。
• edit-report.md — 引き継ぎノート：ビートごとの編集判断、使用したアセット（マニフェスト参照付き）、使用したSFX/音楽、プレビュー/レンダリング検証メモ、最終レビュー用にフラグを立てた項目。テンプレートは references/edit-report-template.md（以下に追記）。

編集文法（ここで言う「プロフェッショナル」の意味）

以下の各項目は品質ゲートであり、提案ではありません。

ハウスのビジュアル言語は編集ルックです — 「editorial-look」を参照。フレームはデザインされたページであり、テキストが重なった動画ではありません。ミックスされたセリフイタリック/太字サンセリフの編集見出し、紙ステージと暗いグリッドのインタースティシャルグラウンド、デフォルトのAロール/Bロールレイアウトとしてのスタック分割（上Bロール/下トーキングヘッド）、キーワードのカラー強調を伴うハイライトバーのスーパー、シームキャプションとネームピル、見出しカード、UIカードスタック。すべてのショート動画をこれら10のパターンから構築し、スタイルパックごとにテーマを設定します。

• 設計されたフック（最初の1～3秒）： 上部にテキストスーパー、パターンインタラプト、その後フレーム内への移動（例：9:16全体に拡大する分割パネル）。決して静止したトーキングヘッドで始めないでください。
• Aロール / Bロール構造： Aロール（トーキングヘッド / VO）が背骨です。Bロール（クリップ、スクリーンショット、モーショングラフィックス）がそれをカバーし、アクセントを加えます。BロールはAロールの音声に重ねてカットし、無音部分ではカットしないでください。
• カットの粒度： スクリプトのエネルギーが要求する場合、0.2秒 という速さのカットも使用します。決して均一な1秒カットは使用しないでください。 ペーシングはスクリプトに従います。
• 分割画面レイアウト： サイドバイサイドおよびスタック構成。フルフレームへの出入りは意図的なトランジションで行います。シームキャプション付きのスタック分割が主力です。フルフレームのBロールカバーは例外です。
• 顔セーフなフレーミング： パネルまたはクロップ内に人物がいる場合は常に、object-position でクロップを調整し、顔がパネルの可視領域の中央、目が上部3分の1に位置するようにします。デフォルトの 50% 50% はトーキングヘッドソースに対してほぼ常に間違っており、頭を切り落とします。人物パネル上のカメラ移動は、移動中ずっと顔をフレーム内に収めなければなりません。中心から外れたり、顔が切れたりすることはゲート失敗です。「editorial-look」§4「Face-safe framing」を参照。
• イージングを適用したカメラモーション： ズームイン/アウトおよび左右のパン。常にイージングを適用し、線形やジッターがあってはなりません。 アンチジッター契約については「camera-moves」を参照。
• キネティックテキスト / キャプション： アニメーションによる登場、キーワード強調（1つのアクセントワード）、音声に同期したキャプションスーパー。
• テーマ別モーショングラフィックス： 番号カード、スペック/JSONカード、バウンディングボックスコールアウト、ポスター分割、チャート構築など。すべてスタイルテーマに基づいてデザインされ、汎用的ではありません。
• ロゴ / ワードマークアニメーション： スクリプトで言及されたブランド/プロダクトマークをアニメーション化します。
• SFX： カットやグラフィックヒットに重ねる、ウィッシュ、クリック、ライザー、インパクト。控えめに、音声の下にミックスします。「sfx-and-audio」を参照。
• 統一された美学： 1つのカラーテーマ、一貫したタイポグラフィ、イージングカーブ、デフォルトルックの要素やポップな印象がないこと。すべてスタイルパック FRAME.md から導出します。

スタイルテーマ設定（必須、デザイン開始前に行うこと）

まずスタイルパックからビジュアルアイデンティティを導出します。色、書体、モーションの個性、グラフィック言語はすべて styles/<style>/FRAME.md から取得します。異なるスタイル → 異なるルック。 以下の「style-theming」を参照し、FRAME.md を具体的な frame.md デザイン仕様（パレットトークン、ローカルフォント用の @font-face、モーションの個性 → イージング/カットの選択）に変換します。同梱されている vibe-life の例では、クリーム/インク/ピーチ/バターのパレット、Space Grotesk + Instrument Serif イタリック + JetBrains Mono、ペーパーカットモーション（クロスフェードではなくSFXでマスクされたハードカット）、フレームごとに1つのイタリックセリフアクセントワードをピル内に、フラットなハードインクシャドウを使用しています。あなた自身のスタイルも、独自のトークンで同じ役割を果たします。

HyperFrames ハードルール（これらに違反するとレンダリングが壊れます）

1. すべてのタイミング要素には、data-start、data-duration、data-track-index および class="clip" が必要です（フレームワークは clip 経由で可視性を制御します）。
2. .clip 要素自体に GSAP を適用しないでください — フレームワークがその可視性/トランスフォームを所有します。子ラッパー（例：.cam、.inner）をアニメーション化してください。
3. タイムラインは gsap.timeline({ paused: true }) で、window.__timelines["main"] に登録する必要があります（id は data-composition-id と一致）。
4. 決定論的のみ — Math.random()、Date.now()、ネットワークフェッチ、repeat: -1 は使用禁止です。レンダリングはフレームサンプリングされ、再現可能でなければなりません。
5. 9:16 = 1080×1920. #root { container-type: size; } を設定し、cqw/cqh がフレームに対して解決されるようにします（1cqw = 10.8px）。タイプ/グラフィックのサイズは vw/vh ではなく cqw/cqh で指定します。
6. 隣接する同一トラックのクリップは接触してはいけません — 浮動小数点の精度により、3.2 + 0.35 = 3.5500000000000003 となり、3.55 から始まるクリップと重なり、overlapping_clips_same_track をトリガーします。ギャップを残すか、0.34 のような再生時間を使用してください。（hyperframes-helper のリント注意点から採用。）
7. オーディオ： ビデオは muted で、別の <audio> 要素を使用します。複数の <audio> 要素よりも、1つのプリミックスされたマスターオーディオトラック（ffmpeg の adelay+amix で VO と SFX をミックス）を推奨します。複数トラックはエコー/同期ズレを引き起こします。専用の高い data-track-index に配置します。
8. 密度： timeline_track_too_dense（1トラック上の多くのタイミング要素）は、短いパイロット版では参考情報ですが、スケールすると現実的な問題になります。プロダクション長の編集では、シーンをサブコンポジション（data-composition-src="compositions/file.html"）に分割してください。

ワークフロー

1. スクリプトを背骨として読み込む。 ビートマップを作成します。各ビート/タイムスタンプ → Aロール（VO/アバターセグメント）+ Bロール/MGの必要性 + 画面上のスーパー + 意図したカット/カメラ/トランジション + エネルギー。スクリプトのエネルギーがペーシングを決定します。均一なリズムを押し付けないでください。
2. スタイルパックからテーマ設定する。 styles/<style>/FRAME.md を読み込みます。具体的なデザイン仕様を作成します：パレットトークン、ローカル @font-face 宣言、モーションの個性、グラフィック言語。（「style-theming」を参照。）
3. アセットカバレッジを調整する。 アセットマニフェストをクロスリファレンスします：どのビートが収集されたメディアでカバーされているか、どれが build-in-editor（モーショングラフィックスとして自分で構築するもの）か、どれが alternate スワップか。プレースホルダーやライセンス未取得のメディアを最終レンダリングに含めないでください。レポートにギャップをフラグしてください。
4. npx hyperframes init edit。 最初にスキャフォールドを作成します。その後、fonts/（ローカル woff2 サブセット）、assets/sfx/、compositions/ を追加します。
5. index.html で編集をビートごとに構築する（長い場合はサブコンポジションも使用）。編集文法を適用します：設計されたフック、Aロール/Bロールカバー、非メトロノームカット、分割画面、イージングされたカメラ移動、キネティックテキスト、テーマ別MG、ロゴアニメーション。子ラッパーをアニメーション化し、.clip には決して適用しないでください。
6. SFX + マスターオーディオを作成する。 ffmpeg を使用して権利フリーのSFXを合成する（anoisesrc/aevalsrc/sine）か、クリアされたアセットを使用します。VO + SFX を1つのマスタートラックにミックスします。（「sfx-and-audio」を参照。）
7. プレビューと検査。 npx hyperframes preview をバックグラウンドで実行。ブラウザで開き、キービートのスクリーンショットを撮り、ペーシング、レイアウト、テキストのタイミング、モーションの滑らかさを確認します。レンダリング前に修正します。
8. リント。 npm run check / npx hyperframes lint --verbose を実行。すべてのエラーを修正します。警告を確認します（既知の誤検出に注意 — 例：高コントラストカードが非表示になっているタイムスタンプでサンプリングされたWCAGコントラスト警告）。
9. レンダリング。 npx hyperframes render → MP4。
10. ゲートスクリプトで検証。 node scripts/verify-render.mjs <path-to-mp4> を実行 — 9:16、期待される再生時間、h264/yuv420p、オーディオの存在をアサートします。次に、ffmpeg フレームスポットチェックをコンタクトシートに対して行い、プレビューと目視で比較します。
11. edit-report.md を作成し、状態（done / in_review / blocked）を設定します。MP4 + コンタクトシートを添付します。

検証ゲートを実行します（スクリプトはこのファイルの隣の scripts/verify-render.mjs にあります）：

node scripts/verify-render.mjs path/to/edit/<file>.mp4

必要に応じて正確な仕様をアサートすることもできます：

node scripts/verify-render.mjs <file>.mp4 --duration 12 --tolerance 0.5

アセット不足

ビートに必要なアセットが assets/ にない場合：

1. まずマニフェストで alternate または build-in-editor の行を確認します。カスタムモーショングラフィックのビートはあなたが構築するものであり、ブロッカーではありません。
2. 本当に不足しており、合法的かつ直接的に迅速に取得できる場合は、自分で取得し、出典を edit-report.md に記録します。
3. それ以外の場合は、正確なビート/タイムスタンプ、必要なアセット、意図した編集アクションをレポートにリストし、ユーザーに提供を依頼し、完了できるビートから続行します。ライセンスを取得できないプレースホルダーをレンダリングしないでください。

検証（引き継ぎ前に必須）

• プレビュースクリーンショット： ライブプレビューからキャプチャした代表的なフレーム。レイアウト/タイミング/モーションを確認します。
• ffprobe： 寸法が正確に9:16（1080×1920）、期待される再生時間（±許容範囲）、h264 / yuv420p、オーディオストリームが存在すること。ゲートスクリプトがこれを強制します。
• フレームスポットチェック： ffmpeg でタイムライン全体からフレームを抽出し、コンタクトシートを作成。必要な各テクニックがスタイルどおりにレンダリングされ、プレビューと一致することを確認します。
• 顔チェック： 人物を含むすべてのプレビュースクリーンショットおよびコンタクトシートフレームで、顔全体が見え、そのパネルの中央に位置していること（シーム、キャプション、エッジ、またはカメラ移動によって切り取られていないこと）。そうでない場合はゲートに失敗し、再フレーミングします。
• 権利： レンダリング内にライセンス未取得/プレースホルダーメディアがないこと。最終的なライセンス確認が必要なものはレポートで指摘します。
• デザイン変更ログ： スタイル仕様または編集ルックパターンからの逸脱（新しいレイアウト、色/書体の変更、モーションの変更）は、理由とともに edit-report.md の「Design decisions」に記録する必要があります。視覚的な変更は問題ありませんが、黙っての視覚的変更は問題です。

クレジットと出典

このスキルは hyperframes ドキュメント、github.com/robonuggets/hyperframes-helper、およびクリエイターグレードのショート動画からのリファレンスフレームを調査し、それらを超えています。内訳については、以下の「standard-provenance」を参照してください。概要：

• 採用： hyperframes-helper / HyperFrames から：HTML を真実のソースとするモデル；data-* タイミング属性 + class="clip"；window.__timelines 上の一時停止タイムライン；GSAP power2/power3.out イージング；白グローキャプションスタイリング；SVG 下線強調；リントの注意点リスト（オーバーラップ浮動小数点精度、決定論的のみ、ミュートビデオ＋オーディオなど）。
• 追加： 完全なイージングされたカメラモーションシステムと明示的なアンチジッター契約；9:16 ショートフォーマット文法（設計されたフック、0.2秒未満の非メトロノームカット、分割→フルフレームトランジション）；FRAME.md → 具体的なデザイン仕様へのスタイルテーマ設定パイプライン；権利フリーSFX合成 + 単一プリミックスマスタートラックの原則；およびレンダリング検証ゲート（ffprobe アサーション + コンタクトシートスポットチェック）。

---

付録 — リファレンスライブラリ（インライン）

作成ソースではこれらを references/ の下に別ファイルとして保持しています。ここではスキルが単一の自己完結型 SKILL.md になるようにインライン化されています。

…

[翻訳のため省略]