remotion について
Remotionのコードを扱う開発者向けのリファレンススキルです。アニメーション、メディア、コンポジション、タイミングなど、動画制作のルールをファイル別にまとめています。
主な機能
- 01Remotionコードのガイダンス
- 02アニメーションとタイミングのルール
- 03画像、動画、音声の扱い
- 04コンポジションとメタデータのパターン
- 05キャプションと字幕のガイダンス
活用シーン
- 01Remotionのアニメーションコンポジション制作
- 02字幕の追加
- 03メディア素材やフォントの扱い
- 04動画内のデータ可視化
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ thebeardedbearsas/ claude-craft --skill remotionインストール後、Claude Code で/remotionを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
rules/3d.mdanimations.mdassets.mdaudio.mdcalculate-metadata.mdcan-decode.mdcharts.mdcompositions.mddisplay-captions.mdextract-frames.mdfonts.mdget-audio-duration.mdget-video-dimensions.mdget-video-duration.mdgifs.mdimages.mdimport-srt-captions.mdlottie.mdmaps.mdmeasuring-dom-nodes.mdmeasuring-text.mdparameters.mdsequencing.mdsubtitles.mdtailwind.mdtext-animations.mdtiming.mdtranscribe-captions.mdtransitions.mdtransparent-videos.md詳細
使用する場面
Remotion のコードを扱う際はいつでも、このスキルを使用してドメイン固有の知識を得てください。
キャプション
キャプションや字幕を扱う場合は、詳細について./rules/subtitles.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/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 を使用した地図の追加とアニメーション
コメント
Markdown 対応