mcpField
R
remotion

remotion

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

remotion について

Reactでプログラムから動画を作成する開発者向けの、Remotion公式スキルパッケージです。12のスキルで、プロジェクト作成、プレビュー、レンダリング、字幕、メディア、地図、インタラクション、ドキュメント、アップグレードを扱います。

主な機能

  1. 01Reactコンポーネントによる動画作成
  2. 02プロジェクトのひな形作成とマークアップの指針
  3. 03Remotion Studioでのプレビューと動画レンダリング
  4. 04字幕とマルチメディア処理
  5. 05地図アニメーションとインタラクティブ効果
  6. 06ドキュメント検索とバージョンアップグレード

活用シーン

  1. 01プロダクトデモや解説アニメーションの制作
  2. 02データに基づく可視化動画の生成
  3. 03動画のMP4、WebM、GIFへのレンダリング

インストール

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

$npx skills add https://github.com/podo/design-agent-skills --skill remotion

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

同梱ファイルstub.yaml

詳細

remotion

カタログ用スタブ — 完全なパッケージはこちらです：remotion-dev/skills

判断ツリー

  1. 完全版のスキルはすでにインストールされていますか？ このパッケージは12個のスキル（remotion-best-practices、remotion-captions、remotion-create、remotion-docs、remotion-interactivity、remotion-maps、remotion-markup、remotion-multimedia、remotion-render、remotion-saas、remotion-studio、remotion-upgrade）をインストールします。まず最初のスキルを確認します。

    • グローバル：f=~/.agents/skills/remotion-best-practices/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • プロジェクト：f=.agents/skills/remotion-best-practices/SKILL.md; [ -f "$f" ] && ! grep -q "^das:" "$f" && echo "installed" || echo "pointer"
    • installed → スキルはremotion-best-practicesとしてインストールされています。これを呼び出して続行します
    • pointer → ステップ2に進みます

  2. スコープを検出してから、インストールします：

    [ -e ~/.agents/skills/remotion ] && echo "global" || echo "project"

    グローバル：

    npx skills add remotion-dev/skills --skill remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade -g -y

    プロジェクト：

    npx skills add remotion-dev/skills --skill remotion-best-practices remotion-captions remotion-create remotion-docs remotion-interactivity remotion-maps remotion-markup remotion-multimedia remotion-render remotion-saas remotion-studio remotion-upgrade -y

    Claude Code： 会話から離れずにコマンドを実行するには、チャットメッセージの先頭に!を付けて送信します。

ご注意

  • 必要なもの： Node.jsとRemotionプロジェクト（remotion-createでひな形を作成できます）
  • ライセンス： スキルのリポジトリにはLICENSEファイルがありません。Remotion自体は個人、非営利団体、従業員3人以下の営利チームは無料で利用できます。それ以外の場合は会社ライセンスが必要です（remotion.dev/license）
  • 名前の衝突： remotionはgoogle-stitch-skills（そのインストールまたはカタログ用ポインター）によっても書き込まれます。両方をインストールすると、先にインストールした方が上書きされます。

インストール後の呼び出し

  • スキル名：remotion-best-practices、remotion-create、remotion-markup、remotion-studio、remotion-render、remotion-captions、remotion-multimedia、remotion-maps、remotion-interactivity、remotion-saas、remotion-docs、remotion-upgrade
  • どれを使えばよいかわからない場合は、ほかのスキルに案内するremotion-best-practicesから始めてください
  • 起動フレーズ：「remotion」、「プログラムによる動画」、「React動画」、「アニメーション動画」、「動画をレンダリング」

概要

Reactを使ってプログラムで動画を作成するための、Remotion公式スキルパッケージです。Reactコンポーネントとして動画シーケンスを構成し、ばねの物理演算や補間を使ってアニメーションを付け、MP4、WebM、GIFにレンダリングできます。サブスキルでは、新しいプロジェクトのひな形作成（remotion-create）、マークアップのベストプラクティス（remotion-markup）、Remotion Studioでのプレビュー（remotion-studio）、レンダリング（remotion-render）、字幕、Mediabunnyによるメディア処理（remotion-multimedia）、地図のアニメーション（remotion-maps）、インタラクティブ機能、Remotionを利用したSaaSアプリの構築、ドキュメントの検索、バージョンアップグレードを扱います。コードで精密に制御する必要がある製品デモ、データ駆動型のビジュアライゼーション、解説アニメーションに最適です。

Remotion自体のライセンスは組織の規模に応じて異なります。個人とごく小規模な企業は無料で利用できますが、規模の大きい営利チームには会社ライセンスが必要です。

使用しない場合

  • 動画への書き出しを伴わないシンプルなCSS/JSアニメーション（gsap-skillsまたはframer-motion-skillsを使用してください）
  • React以外を使った動画処理パイプライン（HTMLから動画を生成する場合はhyperframesを使用してください）

コメント

Markdown 対応