Name: Remotion Video Creation
Author: affaan-m

name	remotion-video-creation
description	Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
metadata	{"tags":"remotion, video, react, animation, composition, three.js, lottie"}

使用場面

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 フォントとローカルフォントを読み込む
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 - Remotion のシーントランジションパターン
rules/trimming.md - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
rules/videos.md - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

name	remotion-video-creation
description	Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
metadata	{"tags":"remotion, video, react, animation, composition, three.js, lottie"}

使用場面

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 フォントとローカルフォントを読み込む
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 - Remotion のシーントランジションパターン
rules/trimming.md - Remotion のトリミングパターン——アニメーションの最初または最後をトリミングする
rules/videos.md - Remotion への動画埋め込み——トリミング、音量、速度、ループ、ピッチ

remotion-video-creation

使用場面

使い方

使用場面

使い方