Remotion のベストプラクティス - React で動画を作成する。3D、アニメーション、音声、字幕、チャート、トランジションなどをカバーするドメイン固有の29のルール。
Install
npx skills add https://github.com/affaan-m/ecc --skill remotion-video-creationSKILL.md
使用場面
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 への動画埋め込み——トリミング、音量、速度、ループ、ピッチ
Related skills
video-editgenmedia-labs715KEdit existing video on RunComfy — this skill is a smart router that matches the user's intent to the right edit model in the RunComfy catalog. Picks Wan 2.7 Edit-Video (general restyle / background swap / packaging swap, identity + motion preservation), Kling 2.6 Pro Motion Control (transfer precise motion from a reference video to a target character), or Lucy Edit Restyle (lightweight identity-stable restyle / outfit swap). Bundles each model's documented prompting patterns so the skill gets shai-video-generationgenmedia-labs714KGenerate AI videos on RunComfy via the `runcomfy` CLI — a smart router across the full video-model catalog: HappyHorse 1.0 (Arena #1, native in-pass audio), Wan-AI Wan 2-7 (open weights, audio-driven lip-sync), ByteDance Seedance v2 / 1-5 / 1-0 (multi-modal cinematic), Kling 3.0 / 2-6, Google Veo 3-1, MiniMax Hailuo 2-3, ByteDance Dreamina 3-0. Covers text-to-video (t2v), image-to-video (i2v), and Veo's video-extend endpoint. The skill picks the right model for the user's intent (Arena-#1 qualitai-musicgenmedia-labs714KGenerate AI music on RunComfy via the `runcomfy` CLI — a smart router across the music-model catalog. Routes to ElevenLabs AI Music Generation (premium 44.1 kHz stereo vocal tracks, 5 s–5 min, $0.0083/s) and ACE Step / ACE Step 1.5 (StepFun-AI open-weights, tag-driven composition, multilingual lyrics, $0.0002–0.0003/s, ~27× cheaper), plus ACE Step audio-inpaint (regenerate a time range inside an existing track) and ACE Step audio-outpaint (extend a track before or after). Picks the right model fimage-to-videogenmedia-labs713KAnimate any still image on RunComfy — this skill is a smart router that matches the user's intent to the right i2v model in the RunComfy catalog. Picks HappyHorse 1.0 I2V (Arena #1, native audio, identity preservation) for general animations, Wan 2.7 with `audio_url` for custom-voiceover lip-sync, or Seedance 2.0 Pro for multi-modal animation from image + reference video + reference audio. Bundles each model's documented prompting patterns so the caller gets sharper output without burning iterat
