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

Sunwood-ai-labs/remotion-skill

Codexスキル:remotion(動画生成)

remotion-skill とは?

このスキルは、コードベースの動画生成フレームワーク「Remotion」を操作するためのCodexスキルです。Reactコンポーネントを使って動画をプログラムで作成・編集できるため、テンプレート動画の生成や自動化に非常に有用です。主にCodex(GitHub Copilotのエージェントモード)での使用を想定しており、ユーザーは自然言語で動画の内容や編集を指示できます。スキルはRemotionのプロジェクト構成、設定ファイル(`remotion.config.ts`)、コマンドラインインターフェース(`npx remotion`)に関する知識をエージェントに提供し、動画のレンダリング、プレビュー、構成管理を効率的に行えるようにします。これにより、動画制作のワークフローをコードで完全に管理・自動化できます。

対応~Claude Code✓Codex CLI~Cursor
npx skills add Sunwood-ai-labs/remotion-skill

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

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

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

ドキュメント

remotion-skill は何をしますか?

Codexスキル:remotion(動画生成)

概要

このスキルは、Remotionを使用してコードベースで動画を生成・編集するためのCodexスキルです。Reactのコンポーネントモデルを活用し、動画の各フレームをプログラムで制御できます。

主な機能

  • 動画のレンダリング: npx remotion render コマンドを使用して動画を出力します。
  • プレビュー: npx remotion preview コマンドでブラウザ上で動画を確認できます。
  • 設定管理: remotion.config.ts ファイルで動画の解像度、フレームレート、出力形式などを設定します。
  • コンポーネントベース: Reactコンポーネントとして動画の各シーンを記述し、組み合わせて一つの動画にします。

使用方法

  1. プロジェクトのルートで remotion.config.ts を確認します。
  2. src/ ディレクトリ内のReactコンポーネントを編集して動画の内容を変更します。
  3. 以下のコマンドで動画をレンダリングします:
npx remotion render src/index.ts <composition-id> out/video.mp4

設定例

// remotion.config.ts
import { Config } from "@remotion/cli/config";

Config.setVideoImageFormat("jpeg");
Config.setOverwriteOutput(true);

対応プラットフォーム

  • Codex (GitHub Copilot エージェントモード)
  • その他、Remotion CLI が実行可能な環境

関連スキル