mcpField
R
remotion

remotion

github.com/thebeardedbearsasクリエイティブ・メディア108113 回インストール1 日前に更新
リポジトリ

remotion について

Remotionのコードを扱う開発者向けのリファレンススキルです。アニメーション、メディア、コンポジション、タイミングなど、動画制作のルールをファイル別にまとめています。

主な機能

  1. 01Remotionコードのガイダンス
  2. 02アニメーションとタイミングのルール
  3. 03画像、動画、音声の扱い
  4. 04コンポジションとメタデータのパターン
  5. 05キャプションと字幕のガイダンス

活用シーン

  1. 01Remotionのアニメーションコンポジション制作
  2. 02字幕の追加
  3. 03メディア素材やフォントの扱い
  4. 04動画内のデータ可視化

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/thebeardedbearsas/claude-craft --skill remotion

インストール後、Claude Code で/remotionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

rules/
3d.md
animations.md
assets.md
audio.md
calculate-metadata.md
can-decode.md
charts.md
compositions.md
display-captions.md
extract-frames.md
fonts.md
get-audio-duration.md
get-video-dimensions.md
get-video-duration.md
gifs.md
images.md
import-srt-captions.md
lottie.md
maps.md
measuring-dom-nodes.md
measuring-text.md
parameters.md
sequencing.md
subtitles.md
tailwind.md
text-animations.md
timing.md
transcribe-captions.md
transitions.md
transparent-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 を使用した地図の追加とアニメーション

コメント