remotion-best-practices

使用するタイミング

Remotion のコードを扱う際は、ドメイン固有の知識を得るために、このスキルを使用してください。

使用方法

詳しい説明やコード例については、個別のルールファイルを参照してください。

• 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/display-captions.md - TikTok スタイルのページと単語のハイライトを使った、Remotion でのキャプション表示
• 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/import-srt-captions.md - @remotion/captions を使用した .srt 字幕ファイルの Remotion へのインポート
• 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/transcribe-captions.md - Remotion で音声を書き起こしてキャプションを生成
• rules/transitions.md - シーンのトランジションパターン
• rules/trimming.md - Remotion のトリミングパターン：アニメーションの開始または終了をカット
• rules/videos.md - Remotion への動画の埋め込み：トリミング、音量、速度、ループ、ピッチ

制限事項

• 上記の説明にある範囲とタスクが明確に一致する場合にのみ、このスキルを使用してください。
• 出力を、環境固有の検証、テスト、専門家によるレビューの代わりとして扱わないでください。
• 必要な入力、権限、安全上の境界、成功基準が不足している場合は、作業を止めて確認してください。

ランタイムとデータ境界

インストール済みのプロジェクトツールとロックファイルに記載されたバージョンを使用してください。パッケージランナーを使うコマンドは、CLI がない場合にコードをダウンロードすることがあります。合意したタスクに必要な依存関係のみをインストールし、すべての Remotion パッケージを同じバージョンに揃えてください。リモートメディア、フォント、文字起こしのリクエストでは、プロバイダーにデータが開示されます。許可されたアセットを使用し、有料またはクラウドでの文字起こしの対象範囲を確認してください。エクスポートされていない限り、例は部分的なコンポーネントのスニペットです。フックはモジュールスコープではなく、React コンポーネント内に配置してください。using の例には、TypeScript の明示的なリソース管理への対応が必要です。対象のランタイムで、レンダリングされたフレームと音声を検証してください。