Remotion プロモーションビデオファクトリー

Remotion プロモーションビデオファクトリー は何をしますか？

このスキルを使用すると、Remotion で繰り返し可能な高品質なアプリ紹介ビデオを生成できます。 このスキルは意図的にアプリに依存せず、UI 中心のプロダクトから非 UI プロダクトまで幅広く動作します。

コアルール

1. 公式の Remotion スキルルールを最優先の権威とします。
2. すべてのモーションは useCurrentFrame() と interpolate()、spring() で駆動します。
3. 時間は秒単位で設計し、sec() で変換します。
4. 最初にアプリタイプのブループリントを選択します。UI のみのデモにデフォルト設定しないでください。
5. 一度限りの録画映像よりも、再利用可能なビジュアルプリミティブを優先します。
6. アニメーションの調整前にタイポグラフィのサイズルールを適用します。
7. すべての主要な編集はフレームキャプチャで検証し、その後型チェックとレンダリングを実行します。
8. フレーム単位のエビデンスなしに品質の成功を主張しないでください。
9. 明示的なユーザー承認なしにコミット、プッシュ、タスク完了をマークしないでください。

公式スキル連携

最初に references/official-skill-integration.md を必ず読んでください。

ステージごとに必要な公式ルールグループ：

1. コンポジションステージ：compositions、parameters、calculate-metadata
2. モーションステージ：animations、timing、sequencing、transitions
3. アセットステージ：assets、images、fonts
4. オプションステージ：audio、videos、subtitles、text-animations

リファレンス

• アプリタイプの選択とシーンテンプレート：references/app-type-blueprints.md
• 公式 Remotion ルールマッピング：references/official-skill-integration.md
• タイムラインとモーションパターン：references/timeline-and-motion.md
• タイミング予算とデバッグループ：references/timing-and-debug-loop.md
• タイポグラフィと可読性ルール：references/typography-and-readability.md
• 再利用可能なビジュアルビルディングブロック：references/visual-primitives.md
• QA チェックリスト：references/qa-checklist.md
• トラブルシューティングガイド：references/troubleshooting.md

ワークフロー

ステップ 1: 入力を収集する

ローカルプロジェクトのコンテキスト（README、ドキュメント、ランディングページ、既存の UI、CLI/API の例）から以下を収集します：

1. ターゲットオーディエンス
2. 一行で表すコアプロミス
3. 利用可能な証明アセット（UI、コード、ログ、メトリクス、お客様の声）
4. 利用可能なメディアアセット（ロゴ、スクリーンショット、クリップ、オーディオ）

ステップ 2: アプリタイプのブループリントを選択する

references/app-type-blueprints.md を読み、以下から 1 つを選択します：

1. UI 中心のアプリ
2. API/SDK アプリ
3. 開発者ツール / インフラアプリ
4. AI/自動化アプリ

選択したブループリントに基づいてショットリストを作成します。

ステップ 3: ナラティブと尺

1. ストーリーアークを定義します：フック -> 問題 -> 仕組み -> 証明 -> CTA
2. 目標尺を選択します：15s、30s、45s、または 60s
3. 実装前にシーンの尺を割り当てます

ステップ 4: コンポジションのセットアップ

1. src/Root.tsx で Composition を定義します
2. schema と defaultProps を追加します
3. calculateMetadata で尺を計算します
4. TransitionSeries を使用して src/Video.tsx でシーンを接続します

ステップ 5: シーン構築

1. まず src/components に再利用可能なコンポーネントを構築します
2. それらのコンポーネントを使用して src/scenes にシーンを組み立てます
3. レイアウトとタイミングには定数を使った絶対配置を使用します
4. シーンファイルはオーケストレーションに集中させ、低レベルの UI 詳細は避けます

ステップ 6: タイポグラフィパス

references/typography-and-readability.md を読み、最初にすべての主要なテキストサイズを設定します。

1. 1920x1080 に推奨されるサイズ範囲を適用します
2. 明示的に正当化されない限り、ハード最小値を尊重します
3. アニメーションの調整前にモバイル/iOS の可読性を確認します

ステップ 7: モーションパス

1. 可読性のために台形フェードを使用します
2. エントランスやカーソルのような動きにはスプリングを使用します
3. トランジション中にオーバーラップのアーティファクトを避けるために、シーンごとに exitOpacity を追加します
4. フェーズの変更を明確にするためにオーバーレイ/キャプションを使用します

ステップ 8: タイミング健全性パス

references/timing-and-debug-loop.md を読み、タイミング予算を検証します：

1. テキストの滞在時間と読み取りウィンドウを確認します
2. 処理と結果の保持時間を確認します
3. トランジションのオーバーラップとハンドオフタイミングを確認します
4. 調整作業の前にタイムライン定数を修正します

ステップ 9: QA ループ（エビデンス必須）

1. 実質的な変更のたびにキーフレームをキャプチャします
2. 視覚的な明瞭さ、タイミング、オーバーラップ、コンポジションのバランスを確認します
3. デバッグログに合格/不合格のエビデンスを記録します
4. すべての重要なチェックポイントが合格するまで反復します

必要に応じて scripts/capture-frames.sh を使用します。

画像読み取りツールが失敗したり有用なコンテンツを返さなかった場合は、再キャプチャして再試行します。検証不可能なチェックを続行しないでください。

ステップ 10: 最終検証

1. npx tsc --noEmit
2. npm run -s build
3. 利用可能な場合 npm run -s build:gif
4. 最終 mp4 をレンダリングし、ランタイムと出力サイズを確認します
5. 意図したシーンの動作に対してキータイムスタンプを再確認します

必要に応じて scripts/verify-build.sh を使用します。

ステップ 11: ハンドオフと承認

1. エビデンスベースの QA サマリーを報告します（何が合格/不合格で、その理由）
2. 既知の妥協点や残留リスクをリストアップします
3. コミット/プッシュ/タスク完了の前に明示的な承認を求めます

出力形式

作業を報告する際は、以下を含めてください：

1. 選択したアプリタイプとブループリント
2. シーン構造と最終尺
3. 実装した主要コンポーネント
4. 主要なアニメーション決定
5. タイミング予算チェックと結果
6. 検証コマンドと結果
7. 残存リスクまたはフォローアップ

ガードレール

1. ローカル画像には Img + staticFile() を使用します。
2. フォントはエフェクト内ではなく、モジュールスコープでロードします。
3. Sequence のレイアウトとプリマウント設定を互換性のある状態に保ちます。
4. references/typography-and-readability.md のタイポグラフィのハード最小値を使用します。
5. 複雑なエフェクトは 1 つの焦点領域に集中させます。
6. 1 つのカットで多くの目標を最適化しようとしないでください。単一の主要メッセージを維持します。
7. 明示的なエビデンスなしに出力を「完璧」と表現しないでください。
8. レンダリングコマンドが成功した場合でも QA エビデンスをスキップしないでください。