Communitygithub.com

RemotionドットファイルOpenCode

Remotion(Reactで動画作成)のドキュメントです。Remotionコード、動画合成、Reactベースの動画生成を扱う際、またはユーザーが「remotion」「動画合成」「アニメーション作成」「動画作成」に言及したときに利用します。

RemotionドットファイルOpenCode とは?

このスキルは、Remotion(Reactを使用してプログラムで動画を作成するためのライブラリ)に特化した包括的な知識ベースを提供します。Remotion関連のコードを記述したり、動画合成、アニメーション、音声処理などのタスクを実行する際に、ドメイン固有のガイダンスとルールファイルを活用できます。主な機能として、キャプションや字幕(rules/subtitles.md)、FFmpegを使用した動画のトリミングや無音検出(rules/ffmpeg.md)、オーディオの可視化(rules/audio-visualization.md)、効果音(rules/sound-effects.md)などが含まれます。さらに、3D(Three.js)、アニメーション、アセット管理、チャート、フォント、トランジション、地図(Mapbox)、音声合成(ElevenLabs TTS)など、20以上の専門ルールファイルが用意されています。このスキルは、Remotionを利用するすべての開発者(Claude Code、Cursor、CodexなどのAIエージェントを含む)を対象としており、効率的で正確な動画生成ワークフローを支援します。

対応~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/archibate/dotfiles-opencode/tree/HEAD/skills/remotion

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

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

ドキュメント

使用するタイミング

このスキルは、Remotionコードを扱っているときにドメイン固有の知識を得るために使用します。

キャプション

キャプションや字幕を扱う場合は、./rules/subtitles.mdファイルを読み込んで詳細情報を取得してください。

FFmpegの使用

動画のトリミングや無音検出などの一部の動画操作では、FFmpegを使用する必要があります。./rules/ffmpeg.mdファイルを読み込んで詳細情報を取得してください。

オーディオの可視化

オーディオ(スペクトラムバー、波形、ベースリアクティブエフェクト)を可視化する必要がある場合は、./rules/audio-visualization.mdファイルを読み込んで詳細情報を取得してください。

効果音

効果音を使用する必要がある場合は、./rules/sound-effects.mdファイルを読み込んで詳細情報を取得してください。

使用方法

個々のルールファイルを読み込んで、詳細な説明とコード例を参照してください:

  • rules/3d.md - Three.jsとReact Three Fiberを使用したRemotionの3Dコンテンツ
  • rules/animations.md - Remotionの基本的なアニメーションスキル
  • rules/assets.md - Remotionへの画像、動画、音声、フォントのインポート
  • rules/audio.md - Remotionでのオーディオとサウンドの使用 - インポート、トリミング、音量、速度、ピッチ
  • rules/calculate-metadata.md - コンポジションの長さ、寸法、プロパティを動的に設定
  • rules/can-decode.md - Mediabunnyを使用してブラウザで動画がデコード可能かどうかを確認
  • rules/charts.md - Remotionのチャートとデータ可視化パターン(棒、円、折れ線、株価チャート)
  • rules/compositions.md - コンポジション、スチル、フォルダ、デフォルトプロパティ、動的メタデータの定義
  • rules/extract-frames.md - Mediabunnyを使用して特定のタイムスタンプから動画フレームを抽出
  • rules/fonts.md - RemotionでのGoogle Fontsとローカルフォントの読み込み
  • rules/get-audio-duration.md - Mediabunnyでオーディオファイルの長さ(秒)を取得
  • rules/get-video-dimensions.md - Mediabunnyで動画ファイルの幅と高さを取得
  • rules/get-video-duration.md - Mediabunnyで動画ファイルの長さ(秒)を取得
  • rules/gifs.md - Remotionのタイムラインに同期したGIFの表示
  • rules/images.md - Imgコンポーネントを使用したRemotionへの画像埋め込み
  • rules/light-leaks.md - @remotion/light-leaksを使用したライトリークオーバーレイエフェクト
  • rules/lottie.md - RemotionへのLottieアニメーションの埋め込み
  • rules/measuring-dom-nodes.md - RemotionでのDOM要素の寸法測定
  • rules/measuring-text.md - テキストの寸法測定、コンテナへのテキストのフィッティング、オーバーフローの確認
  • rules/sequencing.md - Remotionのシーケンスパターン - 遅延、トリミング、アイテムの長さ制限
  • rules/tailwind.md - RemotionでのTailwindCSSの使用
  • rules/text-animations.md - Remotionのタイポグラフィとテキストアニメーションパターン
  • rules/timing.md - Remotionの補間カーブ - リニア、イージング、スプリングアニメーション
  • rules/transitions.md - Remotionのシーントランジションパターン
  • rules/transparent-videos.md - 透明度のある動画のレンダリング
  • rules/trimming.md - Remotionのトリミングパターン - アニメーションの先頭または末尾をカット
  • rules/videos.md - Remotionへの動画埋め込み - トリミング、音量、速度、ループ、ピッチ
  • rules/parameters.md - Zodスキーマを追加して動画をパラメータ化可能にする
  • rules/maps.md - Mapboxを使用した地図の追加とアニメーション
  • rules/voiceover.md - ElevenLabs TTSを使用したAI生成ナレーションのRemotionコンポジションへの追加

関連スキル