mcpField
R
Remotion

Remotion

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

Remotion について

Remotionは、Reactで動画を作成・レンダリングするスキルです。解説動画やモーショングラフィックスの制作向けに、フレーム駆動のアニメーションとLIFEOSテーマ連携を提供します。

主な機能

  1. 01Reactで動画コンポジションを定義
  2. 02フレーム単位でアニメーション
  3. 03MP4動画をレンダリング
  4. 04LIFEOSテーマとの連携
  5. 05アニメーションと動画のワークフロー

活用シーン

  1. 01コンテンツのアニメーション化
  2. 02解説動画の作成
  3. 03動画オーバーレイの制作

インストール

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

$npx skills add https://github.com/danielmiessler/lifeos --skill remotion

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

同梱ファイル

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

Patterns.md
CriticalRules.md
ArtIntegration.md
Tools/
Ref-animations.md
Ref-audio.md
Ref-calculate-metadata.md
Ref-3d.md
Ref-assets.md
Ref-ai-pipeline.md
Ref-can-decode.md
Ref-compositions.md
Ref-elevenlabs-captions.md
Ref-get-video-duration.md
Ref-charts.md
Ref-display-captions.md
Ref-get-video-dimensions.md
Ref-fonts.md
Ref-gifs.md
Ref-extract-frames.md
Ref-get-audio-duration.md
Ref-images.md
Ref-lambda.md
Ref-import-srt-captions.md
Ref-lottie.md
Ref-text-animations.md
Ref-tailwind.md
Ref-measuring-dom-nodes.md
Ref-measuring-text.md
Ref-timing.md
Ref-sequencing.md

詳細

🚨 必須：音声通知（実行前に必ず行うこと）

このスキルが呼び出されたら、ほかのことを行う前に必ずこの通知を送信してください。

  1. 音声通知を送信する：

    curl -s -X POST http://localhost:31337/notify \
  -H "Content-Type: application/json" \
  -d '{"message": "Running the WORKFLOWNAME workflow in the Remotion skill to ACTION"}' \
  > /dev/null 2>&1 &

  2. テキスト通知を出力する：

    Running the **WorkflowName** workflow in the **Remotion** skill to ACTION...

これは省略できません。このスキルの呼び出し直後に、この curl コマンドを実行してください。

Remotion

概要

React を使ってプログラムで動画を作成します。コードでコンポジションを記述すると、Remotion が MP4 にレンダリングします。すべてのフレームは CSS アニメーションではなく useCurrentFrame() によって制御されるため、出力は決定的で再現可能です。視覚的な一貫性を保つために LifeOS のテーマ定数と Art スキルの美的要素を取り込み、まずプレビューできるよう、出力を $LIFEOS_DOWNLOADS_DIR（未設定時のデフォルトは ~/Downloads/）に配置します。

課題

通常の方法で短い解説動画やモーショングラフィックスを作るには、動画エディター、タイムライン、そして大量の手動キーフレーム設定が必要です。時間がかかり、バージョン管理が難しく、内容が変わったときに再生成することもできません。台本が変わると、編集を手作業でやり直す必要があります。動画をコードとして構築すれば、この問題を解決できます。コンポジションは React コンポーネントで、アニメーションはフレーム番号の関数となり、編集後の再レンダリングは 1 つのコマンドで実行できます。このスキルは動画のコードパスであり、画像のコードパスである Art スキルに相当します。

仕組み

React でコンポジションを定義し、useCurrentFrame() でアニメーションを付け、bunx remotion render でレンダリングします。レンダリングは CPU 負荷が高いため、バックグラウンドで実行します。レンダリングコマンド、テーマの統合、パターンファイルについては、以下のクイックリファレンスとツールを参照してください。

カスタマイズ

実行前に、次の場所にユーザーによるカスタマイズがないか確認してください： ~/.claude/LIFEOS/USER/CUSTOMIZATIONS/SKILLS/Remotion/

ワークフローの振り分け

ワークフロートリガーファイル
ContentToAnimation「これをアニメーション化して」、「アニメーションを作成して」、「動画オーバーレイ」Workflows/ContentToAnimation.md
GeneratedContentVideo「動画を生成して」、「AI 動画」、「コンテンツを動画に」、「短い動画を作って」Workflows/GeneratedContentVideo.md

クイックリファレンス

  • テーマ： 常に Tools/Theme.ts の LIFEOS_THEME を使用する
  • Art との統合： コンテンツを作成する前に Art の設定を読み込む
  • 重要： CSS アニメーションは禁止。useCurrentFrame() のみを使用する
  • 出力： まず必ず $LIFEOS_DOWNLOADS_DIR（未設定時のデフォルトは ~/Downloads/）に出力する
  • CLI： 常に bunx を使用する（npx は使用しない）

レンダリングコマンド：

bunx remotion render {composition-id} "${LIFEOS_DOWNLOADS_DIR:-$HOME/Downloads}"/{name}.mp4

ドキュメント全文

  • Art との統合： ArtIntegration.md - テーマ定数、色のマッピング
  • 一般的なパターン： Patterns.md - コード例、プリセット
  • 重要なルール： CriticalRules.md - やってはいけないこと
  • 詳細なリファレンス： Tools/Ref-*.md - Remotion のコア機能、Lambda、ElevenLabs の字幕、AI パイプラインを網羅した 31 個のパターンファイル

ツール

ツール用途
Tools/Render.tsレンダリング、コンポジションの一覧表示、プロジェクトの作成
Tools/Theme.tsArt を基にした LifeOS のテーマ定数

リンク

注意点

  • React ベースの動画では、コンポーネントのパターンが Web の React とは異なります。 Remotion には、コンポジション、シーケンス、タイミングに関する専用の API があります。
  • レンダリングは CPU 負荷が高くなります。 レンダリングコマンドでは run_in_background: true を使用してください。
  • プレビュー用の出力は、まず $LIFEOS_DOWNLOADS_DIR（未設定時のデフォルトは ~/Downloads/）に保存されます。 画像と同じです。
  • 静止画像には使用しないでください — イラスト、図、サムネイルには Art スキルを使用してください。

例

例 1：解説動画をアニメーション化する

User: "create a video showing how the Algorithm works"
→ Builds React composition with Remotion
→ Defines sequences, animations, timing
→ Renders to MP4 in background
→ Output to $LIFEOS_DOWNLOADS_DIR (default ~/Downloads/ when unset) for preview

実行ログ

ワークフローの完了後、JSONL エントリーを 1 件追記してください：

echo '{"ts":"'$(date -u +%Y-%m-%dT%H:%M:%SZ)'","skill":"Remotion","workflow":"WORKFLOW_USED","input":"8_WORD_SUMMARY","status":"ok|error","duration_s":SECONDS}' >> ~/.claude/LIFEOS/MEMORY/SKILLS/execution.jsonl

WORKFLOW_USED は実行したワークフローに、8_WORD_SUMMARY は入力内容の簡潔な説明に、SECONDS はおおよその実時間に置き換えてください。ワークフローが失敗した場合は、status: "error" を記録してください。

コメント

Markdown 対応