Remotion Ecosystem — 統一スキルアーキテクチャ
スコープ
これは、91の個別スキルをシームレスな動画制作パイプラインに変換する統合レイヤーです。どのスキルも置き換えるものではなく、それらを接続するためのルーティング、データフロー、オーケストレーションパターンを提供します。
以下の各スキルは独立して使用できます。このエコシステム文書は、エンドツーエンドのRemotion動画システムを構築する際に、それらがどのように組み合わされるかを説明します。
10のカテゴリ
remotion-ecosystem/
├── 01-core-video/ ← レンダリングエンジン + 動画戦略
│ ├── remotion-video-pro (スキャフォールディング、アニメーション、バッチレンダー)
│ ├── marketing-video (制作アプローチの選択)
│ ├── video-generation (AI動画作成)
│ └── video-understand (動画分析)
│
├── 02-data-ingestion/ ← 動画データのためのコンテンツソーシング
│ ├── firecrawl-scrape (JSレンダリングページの抽出)
│ ├── firecrawl-crawl (バルクサイトクローリング)
│ ├── spider (サイトスキャン + セキュリティ監査)
│ ├── web-reader (ページメタデータ + コンテンツ)
│ ├── web-search (リアルタイム検索)
│ └── browserbase-fetch (軽量URL取得)
│
├── 03-browser-automation/ ← 保護されたコンテンツのための認証 + インタラクション
│ ├── browser-cdp (Chromeセッション再利用)
│ ├── agent-browser (ヘッドフルブラウザ自動化)
│ └── browserbase-autobrowse (自己改善ブラウズループ)
│
├── 04-ai-intelligence/ ← AI推論 + モデルオーケストレーション
│ ├── think (Geminiによるマルチフレームワーク推論)
│ ├── council-of-five (5ペルソナ並列討論)
│ ├── amazon-bedrock (Claude/Llama/Novaモデル呼び出し)
│ ├── LLM (チャット補完)
│ └── VLM (ビジョン言語理解)
│
├── 05-content-design/ ← ビジュアルアセット + モーションデザイン
│ ├── charts (データ可視化)
│ ├── image-generation (AI画像作成)
│ ├── image-edit (AI画像編集)
│ ├── ui-ux-pro-max (デザインシステム + UI推論)
│ ├── anthropic-frontend-design (特徴的なインターフェース)
│ └── web-shader-extractor (視覚効果抽出)
│
├── 06-monitoring-security/ ← 観測可能性 + 保護
│ ├── sentry-ai-monitoring (LLM呼び出しトレーシング + トークン追跡)
│ ├── sentry-nextjs-sdk (Next.jsエラー + パフォーマンス監視)
│ ├── audit-analyzer (システム監査)
│ ├── diagnose (デバッグ + 診断)
│ └── mcp-spy (MCPトラフィックデバッグ)
│
├── 07-marketing-strategy/ ← 成長 + 実験
│ ├── marketing-ab-testing (仮説 + カイ二乗検定有意性)
│ ├── marketing-launch (5フェーズローンチフレームワーク)
│ ├── marketing-mode (グロースマーケティングオーケストレーション)
│ └── content-strategy (コンテンツ計画)
│
├── 08-devops-deploy/ ← インフラ + CI/CD
│ ├── aws-agents-deploy (Railway/Vercel/Lambdaデプロイ)
│ ├── amazon-bedrock (AWS AIモデルデプロイ)
│ ├── vercel (Vercelデプロイ)
│ ├── deployment-manager (マルチプラットフォームデプロイ)
│ ├── github (CI/CD + リポジトリ管理)
│ └── fullstack-dev (Next.jsフルスタック開発)
│
├── 09-document-output/ ← 動画データからのレポート + 成果物
│ ├── docx (Word文書)
│ ├── pdf (PDF生成)
│ ├── ppt / pptx (プレゼンテーション)
│ ├── xlsx (スプレッドシート)
│ └── infographic-gen (インフォグラフィック)
│
└── 10-agent-systems/ ← エージェントオーケストレーション + メモリ
├── agent-roles (特化型エージェントペルソナ)
├── superpowers (仕様ファースト + サブエージェント委任)
├── proactive-agent (自律的自己改善)
├── self-improving-agent (エラーロギング + 学習)
├── persistent-memory (クロスセッションメモリ)
└── context-compressor (コンテキストウィンドウ最適化)
パイプラインアーキテクチャ
Remotionエコシステムは、6段階のパイプラインに従います：
[1. ACQUIRE] → [2. THINK] → [3. DESIGN] → [4. RENDER] → [5. TEST] → [6. DEPLOY]
┌──────────────────────────────────────────────────────────────────┐
│ ステージ1: ACQUIRE — データ取り込み (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ 競合ページをスクレイピング │
│ browser-cdp ──────→ 認証後コンテンツを抽出 │
│ spider ───────────→ 商品ページをスキャンしてデータ取得 │
│ web-search ────────→ マーケットインテリジェンスを収集 │
│ web-reader ────────→ 記事コンテンツを抽出 │
│ │
│ 出力: { 製品, 競合他社, お客様の声, 価格 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ ステージ2: THINK — AIインテリジェンス (04-ai-intelligence) │
│ │
│ think ─────────────→ データの第一原理分析 │
│ council-of-five ───→ 動画アプローチに関する5ペルソナ討論 │
│ amazon-bedrock ────→ スクリプト / コピー / ストーリーボード生成 │
│ LLM ────────────────→ メッセージとCTAを洗練 │
│ │
│ 出力: { スクリプト, ストーリーボード, コピーバリアント, シーン計画 }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ ステージ3: DESIGN — コンテンツ + ビジュアル (05-content-design) │
│ │
│ image-generation ──→ ヒーロー画像、プロダクトショット │
│ charts ─────────────→ 動画用データ可視化 │
│ ui-ux-pro-max ─────→ レイアウト + カラー + タイポグラフィシステム│
│ web-shader-extractor → 参照サイトからの視覚効果 │
│ │
│ 出力: { 画像, チャート, カラーパレット, モーション仕様 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ ステージ4: RENDER — コア動画 (01-core-video) │
│ │
│ remotion-video-pro → Reactコンポーネントをフレームとして構成 │
│ marketing-video ────→ 制作アプローチの選択 │
│ video-generation ──→ AI生成Bロール映像 │
│ video-understand ──→ 参照動画の分析 │
│ │
│ 出力: { MP4レンダリング, バリアント構成 } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ ステージ5: TEST — 監視 + A/B (06 + 07) │
│ │
│ marketing-ab-testing → バリアントのカイ二乗検定有意性 │
│ sentry-ai-monitoring → 生成中のLLM呼び出しトレース │
│ audit-analyzer ─────→ レンダリングアセットのセキュリティスキャン │
│ diagnose ────────────→ レンダリング障害のデバッグ │
│ │
│ 出力: { テスト結果, 有意性スコア, エラーレポート } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ ステージ6: DEPLOY — DevOps + マーケティング (08 + 07) │
│ │
│ aws-agents-deploy ─→ Lambda/Railwayにデプロイ │
│ marketing-launch ───→ 5フェーズプロダクトローンチ │
│ vercel ──────────────→ webhookサービスのホスティング │
│ fullstack-dev ───────→ レンダー管理用Next.jsダッシュボード │
│ │
│ 出力: { ライブレンダリング, webhookエンドポイント, ローンチキャンペーン }│
└──────────────────────────────────────────────────────────────────┘
統合ルート
ルートA: 競合インテリジェンス動画
spider (競合サイトのスキャン)
→ firecrawl-scrape (製品ページの抽出)
→ amazon-bedrock (競合状況の分析)
→ council-of-five (動画アングルの討論)
→ charts (比較可視化の作成)
→ remotion-video-pro (競合比較動画のレンダリング)
→ marketing-ab-testing (動画バリアントのA/Bテスト)
→ aws-agents-deploy (Lambdaにデプロイ)
ルートB: プロダクトローンチ動画キャンペーン
marketing-launch (5フェーズローンチの計画)
→ web-search (マーケットデータの収集)
→ think (第一原理メッセージ戦略)
→ amazon-bedrock (動画スクリプトの生成)
→ image-generation (ヒーロー画像の作成)
→ ui-ux-pro-max (ビジュアルシステムの設計)
→ remotion-video-pro (ローンチ動画のレンダリング)
→ video-generation (AI Bロール映像)
→ sentry-ai-monitoring (全AI呼び出しのトレース)
→ aws-agents-deploy (パイプラインのデプロイ)
→ marketing-ab-testing (フックバリエーションのテスト)
ルートC: データ駆動型パーソナライズ動画
firecrawl-crawl (顧客データソースの一括抽出)
→ browser-cdp (認証後CRMデータの抽出)
→ amazon-bedrock (受信者ごとに動画コピーをパーソナライズ)
→ charts (パーソナライズされたデータ可視化の生成)
→ remotion-video-pro (パーソナライゼーションプロパティでバッチレンダリング)
→ sentry-ai-monitoring (バッチLLMトークン使用量の監視)
→ aws-agents-deploy (Lambdaバッチレンダリング)
→ docx/xlsx (キャンペーンからROIレポートを生成)
ルートD: コンテンツリパーパスパイプライン
video-understand (ソース動画の分析)
→ browserbase-autobrowse (参照コンテンツの収集)
→ think (リパーパス戦略の計画)
→ firecrawl-scrape (参照用ブログコンテンツの抽出)
→ marketing-video (ショートフォーム vs ロングフォームアプローチの選択)
→ image-generation (サムネイルバリアントの作成)
→ remotion-video-pro (プラットフォーム固有バージョンのレンダリング)
→ marketing-launch (マルチプラットフォーム配信の調整)
ルートE: スケールA/Bテスト動画バリアント
marketing-ab-testing (仮説 + バリアントの設計)
→ council-of-five (テストするバリアントの討論)
→ amazon-bedrock (バリアントコピー/スクリプトの生成)
→ ui-ux-pro-max (バリアントビジュアルシステムの設計)
→ remotion-video-pro (A/B構成のレンダリング)
→ sentry-ai-monitoring (生成コストのトレース)
→ marketing-launch (テストのオーディエンスへの展開)
→ charts (テスト結果の可視化)
→ pdf (テストレポートの生成)
横断的関心事
セキュリティ (06-monitoring-security)
すべてのパイプラインステージは以下でラップされるべきです：
- sentry-ai-monitoring: 全LLM呼び出しのトレース（トークン数、レイテンシ、コスト）
- sentry-nextjs-sdk: webhookサービス健全性の監視
- audit-analyzer: デプロイ済みインフラの定期的セキュリティスキャン
- mcp-spy: 開発におけるMCPツール統合のデバッグ
メモリ (10-agent-systems)
繰り返しの動画制作のためのクロスセッション継続性：
- persistent-memory: ブランドガイドライン、カラーパレット、過去のキャンペーンを保存
- context-compressor: 複雑なパイプライン実行時のコンテキストウィンドウ最適化
- self-improving-agent: レンダリング障害とA/Bテスト結果から学習
品質 (01-core-video)
すべてのレンダリングでremotion-video-proの黄金ルールを適用：
- フレームベースの決定論（Math.random不使用）
- スプリングアニメーションを線形アニメーションより優先
- すべてのシーンコンポーネントにReact.memo
- すべてのプロパティにZodスキーマバリデーション
- コミット前バリデーションフック
クイックリファレンス — スキルとパイプラインステージ
| スキル | プライマリステージ | セカンダリ用途 |
|---|---|---|
| remotion-video-pro | 4. RENDER | 5. TEST (バリデーション) |
| firecrawl-scrape | 1. ACQUIRE | 6. DEPLOY (ページ検証) |
| firecrawl-crawl | 1. ACQUIRE | 3. DESIGN (参照コンテンツ) |
| spider | 1. ACQUIRE | 6. DEPLOY (セキュリティスキャン) |
| browser-cdp | 1. ACQUIRE | 3. DESIGN (認証コンテンツ) |
| browserbase-fetch | 1. ACQUIRE | — |
| browserbase-autobrowse | 1. ACQUIRE | 2. THINK (リサーチ) |
| think | 2. THINK | 5. TEST (デバッグ分析) |
| council-of-five | 2. THINK | 7. MARKETING (戦略) |
| amazon-bedrock | 2. THINK | 4. RENDER (AI生成) |
| LLM | 2. THINK | — |
| VLM | 2. THINK | 4. RENDER (シーン分析) |
| charts | 3. DESIGN | 9. OUTPUT (レポート) |
| image-generation | 3. DESIGN | 4. RENDER (アセット) |
| ui-ux-pro-max | 3. DESIGN | 2. THINK (レイアウト推論) |
| marketing-ab-testing | 5. TEST | 7. MARKETING (グロース) |
| marketing-launch | 6. DEPLOY | 7. MARKETING (キャンペーン) |
| sentry-ai-monitoring | 5. TEST | 6. DEPLOY (本番監視) |
| aws-agents-deploy | 6. DEPLOY | — |
| fullstack-dev | 6. DEPLOY | 3. DESIGN (ダッシュボード) |
| docx/pdf/xlsx | 9. OUTPUT | 7. MARKETING (レポート) |
| agent-roles | 10. SYSTEMS | 2. THINK (委任) |
| superpowers | 10. SYSTEMS | — |