Communitygithub.com

studio1111/remotion-video-production

ReactとRemotionを使用して、フレーム単位で正確で再現可能な動画を作成します。コンポジション、トランジション、アニメーションテキスト、メディア、オーディオ、キャプション、レンダリング検証を含みます。

remotion-video-production とは?

このスキルは、Remotion(Reactベースの動画作成フレームワーク)を使用して、プログラム的に動画を生成するためのワークフローと品質ルールを定義します。開発者は、`useCurrentFrame()` や `useVideoConfig()` などのフレーム/時間ベースのAPIを利用し、CSSアニメーションのような壁時計時刻に依存しない方法で、正確なフレームレンダリングを実現できます。複数のシーンやトランジションをシーケンス化し、フレームカウントとオーバーラップを制御することで意図した総再生時間を達成します。Studioプレビューによる確認、レンダリング後のファイル検証(解像度、FPS、オーディオ、各フレームの整合性)も推奨しています。このスキルは、Claude Code、Cursor、CodexなどのAIエージェントで動作し、`npx skills add remotion-dev/skills` で公式スキルセットとルールファイルをインストールすることで利用可能です。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/skills/remotion-video-production

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

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

ドキュメント

Remotion Video Production

上流

公式Remotionエージェントスキル: https://github.com/remotion-dev/skills 公式ドキュメント: https://www.remotion.dev/docs/ai/skills

完全な公式スキルセットと参照ルールファイルを利用するには、npx skills add remotion-dev/skills を使用してコンシューミングワークスペースにインストールしてください。このローカルスキルはワークフローガイドであり、上流配布物のバイト単位のコピーではありません。

ワークフロー

  1. 既存のプロジェクトを検査し、ユーザーの変更を保持します。
  2. プロジェクトが存在しない場合は、公式の作成ワークフローを使用し、パッケージの互換性を確認します。
  3. コンポジションID、寸法、FPS、再生時間、プロップ、アセットの場所を明示的に定義します。
  4. useCurrentFrame() や useVideoConfig() などのフレーム/時間ベースのAPIを使用します。レンダリングタイミングに壁時計のCSSアニメーションを使用しないでください。
  5. 補間/スプリングヘルパーを適切なイージングとクランプ範囲で使用します。
  6. シーンとトランジションをシーケンス化し、フレームカウントとオーバーラップが意図した総再生時間を生成するようにします。
  7. サポートされているメディアコンポーネントと静的アセットヘルパーを使用します。レンダリング前に非同期アセットが完了するのを待ちます。
  8. 環境が許可する場合、Studioプレビューを起動し、編集またはレンダリングの前に検査します。
  9. リクエストがあった場合のみレンダリングし、その後エクスポートされたファイルを検査し、再生時間、寸法、FPS、オーディオ、代表的なフレームを確認します。

品質ルール

  • 不要なフレーム単位のReact処理や高コストなエフェクトを避けます。
  • フォント、画像、オーディオ、動画のパスを再現可能に保ちます。
  • 無効なフレーム計算、負の時間、アセットの欠落、境界外の補間を避けます。
  • テキストの収まり、RTL整形、キャプションのタイミング、視覚的な連続性を確認します。
  • デプロイ前に現在のRemotionライセンスと商用利用条件を確認します。

関連スキル