Communityコーディング&開発github.com

GenVid Promo

Remotion を使った動画生成スキル。ナレーション、ビジュアル、製品クレーム、タイミングを検証しながら、最終的な動画を生成します。

GenVid Promo とは?

GenVid Promo は、AIエージェント(Claude Code、Cursor、Codex など)向けに設計された、決定論的で検証可能な動画生成スキルです。スクリプトや絵コンテだけで終わらせず、実際の動画ファイル(MP4)を生成することを目標とします。 このスキルは、TTS(テキスト読み上げ)プロバイダー(OpenAI、Gemini など)を必須とし、APIキーは環境変数で安全に管理します。ワークフローは、プロダクトの実体をリポジトリや実際のアプリから検証し、UIコンポーネントを Remotion 内で忠実に再現またはインポートします。 ストーリーボードは `storyboard.json` に構造化し、各シーンのナレーション、ビジュアル、トランジションを定義。Remotion の `useCurrentFrame()` と `interpolate()` を用いてアニメーションを構築し、CSSアニメーションは使いません。ナレーションはシーンごとに音声ファイルを生成し、実際の音声長に基づいてシーン長を決定します。 最終的には、H.264/AAC の MP4 をレンダリングし、全編を視聴確認して完了とします。製品クレームは必ず実際の動作やUIから検証し、架空の情報を生成しないことが強く求められます。

対応~Claude Code✓Codex CLI✓Cursor✓Gemini CLI
npx skills add abdurshd/skills

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

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

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

ドキュメント

GenVid Promo は何をしますか?

スクリプトや絵コンテだけで終わらせず、最終的な動画を生成します。ナレーション、ビジュアル、製品クレーム、タイミングが検証された、決定論的な Remotion コンポジションを構築します。

必須の開始手順

  1. 呼び出し時に、TTSプロバイダーとAPIキーの値、または明示的な環境変数/シークレットの参照の両方を確認します。
  2. どちらかが欠けている場合は、停止して質問します:どのTTSプロバイダーを使用すればよいですか?また、そのAPIキーにどのようにアクセスすればよいですか?秘密の環境変数(例: OPENAI_API_KEY や GEMINI_API_KEY)を推奨します。キーをコミットしたり表示したりしません。
  3. プロバイダーを黙って選択したり、既存のキーを想定したり、プレースホルダーの音声を合成したり、このゲートを通過して処理を続行したりしないでください。
  4. インストールされている remotion-best-practices スキルをすぐに完全に読み込みます。デザインの前に video-layout ルールを読み込みます。オーディオ、トランジション、キャプション、FFmpeg、メタデータのルールは、それらの機能を使用するときに読み込みます。この依存関係を使用していることを明示的に伝えます。利用できない場合は、その旨を伝え、最低限のフォールバックとして references/production-pipeline.md を使用します。
  5. シンセサイズを実装する前に references/tts-providers.md を読んでください。現在のプロバイダーのモデルとSDK/API形式は頻繁に変更されるため、公式ドキュメントと照らし合わせて確認します。

ワークフロー

1. ブリーフの確立

製品、オーディエンス、ローンチ目標、プラットフォーム、アスペクト比、目標尺、トーン、CTA、ロケール、必要なクレームを決定します。不足している場合は、可逆的なクリエイティブ上の選択を推測します。結果を大きく変える可能性のある選択についてのみ質問します。

デフォルトは、1920x1080、30 FPS、35~75秒、ナレーター1名、キャプション付き、明確なCTAとします。要求されたチャンネルが必要とする場合は、縦型または正方形のコンポジションを追加します。

2. 実際の製品の検証

リポジトリを調査し、利用可能な場合は実際のアプリを実行します。実際のルート、コンポーネント、データ状態、デザイントークン、フォント、アイコン、コピー、プラン名、価格、機能の動作をトレースします。ライブ製品の場合は、ブラウザ自動化を使用して実際のレンダリングされたエクスペリエンスを検査します。画面、機能、メトリクス、テスティモニアル、価格、インタラクションを決してでっち上げないでください。

製品ビジュアルは以下の優先順位で使用します:

  1. 実際のコンポーネントを、決定論的なモックデータを使用した制御されたRemotion/デモハーネスにインポートします。
  2. 実際のDOM、トークン、コピー、状態を保持しながら、アニメーションセーフな表示コンポーネントを抽出します。
  3. 実際のコンポーネントをアプリ外でレンダリングできない場合にのみ、ソースから派生したレプリカを構築します。実際のスクリーンショットと比較し、このフォールバックを使用したことを開示します。
  4. アニメーションセーフなコンポーネントが実用的でない場合にのみ、スクリーンショットまたは画面録画を使用します。

単に状態を撮影するために、本番環境のシークレットを公開したり、ライブデータを変更したりしないでください。

3. ストーリーとストーリーボードの作成

コンパクトなアークを使用します:フック -> 問題 -> 啓示 -> 実際の使用による証明 -> 最も強力なベネフィット -> CTA。各シーンに1つのメッセージと1つの焦点となるビジュアルを与えます。最終的なタイミングの前に、シーンのナレーションを書き込みます。

references/storyboard-schema.md を使用して storyboard.json を作成します。すべてのシーンについて、正確なUI状態、コンポーネント/ソースの来歴、アクション、ナレーション、クレーム、トランジションの意図を含めます。

4. Remotionシステムの構築

製品トークン、タイポグラフィ、セーフエリア、ブラウザ/デバイスフレーム、カーソル、ハイライト、タイプライター風テキスト、カメラ移動、トランジションのための再利用可能なビジュアルシステムを作成します。useCurrentFrame() と interpolate() または適切な spring() 呼び出しを使用します。CSSアニメーションやトランジションは使用しないでください。

計画されたモーションを優先します:カメラフォーカス、マスクによるリビール、共有軸の移動、上品なクロスフェード、オブジェクトの連続性、時間的な段取り。ランダムなモーション、一般的なカードグリッド、小さなUI、同時に競合する焦点は避けてください。

5. ナレーションの生成と同期

シーンごとに1つのオーディオファイルを生成します。トランスクリプトを信頼できる情報源として保持します。実際のオーディオ長を測定し、voiceover-manifest.json を作成します。オーディオにリードインと間を加えてシーン長を導出します。ビジュアルが確立された後にナレーションを開始し、表示されるアクションを説明する正確な文にスケジュールします。

固定されたシーンに合わせてオーディオを引き延ばさないでください。配信とビジュアルに乖離が生じた場合は、再生成するかタイミングを再調整します。既知のトランスクリプトからキャプションを追加します。STTは、音声出力が単語レベルのタイムスタンプを必要とするほど異なる場合にのみ使用します。

レンダリング前に node <skill-dir>/scripts/validate-genvid.mjs <storyboard> <manifest> [project-root] を実行します。

6. レンダリングと検査

各シーンの開始、中間点、キーインタラクション、終了付近で代表的な静止画をレンダリングします。通常の表示サイズで検査します。クリッピング、読めないテキスト、意図しない重なり、カーソルのずれ、不正確なUI、無駄な時間、不自然なカット、ナレーションの不一致を修正します。

宛先で別のフォーマットが必要でない限り、H.264、BT.709、高品質AACオーディオで最終的なMP4をレンダリングします。音声付きで結果全体を視聴します。ランタイム、寸法、コーデック、オーディオの有無、最終CTA、成果物パスを確認します。

完了基準

MP4が存在し、タイムライン全体にわたって視聴またはサンプリングされた場合にのみ完了となります。レンダリングされたパス、寸法、FPS、長さ、TTSプロバイダー/モデル/音声、製品ビジュアルのソース、検証されたクレーム、実行されたテスト、および意図的なレプリカ/キャプチャのフォールバックを報告します。

関連スキル