Remotion Ecosystem — Einheitliche Skill-Architektur
Umfang
Dies ist die Integrationsschicht, die 91 individuelle Skills in eine kohärente Videoproduktions-Pipeline verwandelt. Sie ersetzt keinen Skill – sie stellt die Routing-, Datenfluss- und Orchestrierungsmuster bereit, die sie verbinden.
Jeder der folgenden Skills kann unabhängig verwendet werden. Dieses Ecosystem-Dokument beschreibt, wie sie zusammenwirken, wenn durchgängige Remotion-Videosysteme aufgebaut werden.
Die Zehn Kategorien
remotion-ecosystem/
├── 01-core-video/ ← Rendering-Engine + Videostrategie
│ ├── remotion-video-pro (Scaffolding, Animation, Batch-Render)
│ ├── marketing-video (Auswahl des Produktionsansatzes)
│ ├── video-generation (KI-Videogenerierung)
│ └── video-understand (Videoanalyse)
│
├── 02-data-ingestion/ ← Inhaltsquellen für Videodaten
│ ├── firecrawl-scrape (Extraktion JS-gerenderter Seiten)
│ ├── firecrawl-crawl (Massen-Crawling von Websites)
│ ├── spider (Site-Scanning + Sicherheitsaudit)
│ ├── web-reader (Seiten-Metadaten + Inhalt)
│ ├── web-search (Echtzeitsuche)
│ └── browserbase-fetch (leichtgewichtiges URL-Abrufen)
│
├── 03-browser-automation/ ← Authentifizierung + Interaktion für geschützte Inhalte
│ ├── browser-cdp (Chrome-Sitzungswiederverwendung)
│ ├── agent-browser (Headful-Browser-Automatisierung)
│ └── browserbase-autobrowse (selbstverbessernde Browse-Schleifen)
│
├── 04-ai-intelligence/ ← KI-Schlussfolgerung + Modellorchestrierung
│ ├── think (Multi-Framework-Schlussfolgerung via Gemini)
│ ├── council-of-five (parallele Debatte mit 5 Personas)
│ ├── amazon-bedrock (Aufruf von Claude/Llama/Nova-Modellen)
│ ├── LLM (Chat-Completions)
│ └── VLM (Vision-Language-Verständnis)
│
├── 05-content-design/ ← Visuelle Assets + Bewegungsdesign
│ ├── charts (Datenvisualisierung)
│ ├── image-generation (KI-Bilderstellung)
│ ├── image-edit (KI-Bildbearbeitung)
│ ├── ui-ux-pro-max (Designsystem + UI-Schlussfolgerung)
│ ├── anthropic-frontend-design (originelle Oberflächen)
│ └── web-shader-extractor (Extraktion visueller Effekte)
│
├── 06-monitoring-security/ ← Beobachtbarkeit + Schutz
│ ├── sentry-ai-monitoring (LLM-Aufruf-Tracing + Token-Tracking)
│ ├── sentry-nextjs-sdk (Next.js-Fehler + Performance-Überwachung)
│ ├── audit-analyzer (Systemauditierung)
│ ├── diagnose (Debugging + Diagnose)
│ └── mcp-spy (MCP-Traffic-Debugging)
│
├── 07-marketing-strategy/ ← Wachstum + Experimentierung
│ ├── marketing-ab-testing (Hypothese + Chi-Quadrat-Signifikanz)
│ ├── marketing-launch (5-Phasen-Launch-Framework)
│ ├── marketing-mode (Growth-Marketing-Orchestrierung)
│ └── content-strategy (Content-Planung)
│
├── 08-devops-deploy/ ← Infrastruktur + CI/CD
│ ├── aws-agents-deploy (Bereitstellung auf Railway/Vercel/Lambda)
│ ├── amazon-bedrock (Bereitstellung von AWS-KI-Modellen)
│ ├── vercel (Vercel-Bereitstellung)
│ ├── deployment-manager (Multi-Plattform-Bereitstellung)
│ ├── github (CI/CD + Repository-Verwaltung)
│ └── fullstack-dev (Next.js Full-Stack-Entwicklung)
│
├── 09-document-output/ ← Berichte + Ergebnisse aus Videodaten
│ ├── docx (Word-Dokumente)
│ ├── pdf (PDF-Generierung)
│ ├── ppt / pptx (Präsentationen)
│ ├── xlsx (Tabellenkalkulationen)
│ └── infographic-gen (Infografiken)
│
└── 10-agent-systems/ ← Agenten-Orchestrierung + Gedächtnis
├── agent-roles (spezialisierte Agenten-Personas)
├── superpowers (Spec-First + Unteragenten-Delegation)
├── proactive-agent (autonome Selbstverbesserung)
├── self-improving-agent (Fehlerprotokollierung + Lernen)
├── persistent-memory (Sitzungsübergreifendes Gedächtnis)
└── context-compressor (Optimierung des Kontextfensters)
Pipeline-Architektur
Das Remotion-Ökosystem folgt einer 6-stufigen Pipeline:
[1. ACQUIRE] → [2. THINK] → [3. DESIGN] → [4. RENDER] → [5. TEST] → [6. DEPLOY]
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 1: ACQUIRE — Datenerfassung (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ Wettbewerberseiten scrapen │
│ browser-cdp ──────→ hinter Authentifizierung liegende Inhalte │
│ spider ───────────→ Produktseiten nach Daten durchsuchen │
│ web-search ────────→ Marktinformationen sammeln │
│ web-reader ────────→ Artikelinhalt extrahieren │
│ │
│ Ausgabe: { Produkte, Wettbewerber, Testimonials, Preise } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 2: THINK — KI-Intelligenz (04-ai-intelligence) │
│ │
│ think ─────────────→ First-Principles-Analyse der Daten │
│ council-of-five ───→ 5-Persona-Debatte zum Videoansatz │
│ amazon-bedrock ────→ Skript/Kopie/Storyboard generieren │
│ LLM ────────────────→ Botschaften und CTAs verfeinern │
│ │
│ Ausgabe: { Skript, Storyboard, Kopie-Varianten, Szenenplan } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 3: DESIGN — Content + Visual (05-content-design) │
│ │
│ image-generation ──→ Hero-Bilder, Produktaufnahmen │
│ charts ─────────────→ Datenvisualisierungen für Videos │
│ ui-ux-pro-max ─────→ Layout + Farbe + Typografie-System │
│ web-shader-extractor → visuelle Effekte aus Referenzseiten │
│ │
│ Ausgabe: { Bilder, Diagramme, Farbpaletten, Bewegungsspezifikationen }│
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 4: RENDER — Kern-Video (01-core-video) │
│ │
│ remotion-video-pro → React-Komponenten als Frames zusammensetzen │
│ marketing-video ────→ Produktionsansatz auswählen │
│ video-generation ──→ KI-generiertes B-Roll-Material │
│ video-understand ──→ Referenzvideos analysieren │
│ │
│ Ausgabe: { MP4-Renderings, Variantenkompositionen } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 5: TEST — Monitoring + A/B (06 + 07) │
│ │
│ marketing-ab-testing → Chi-Quadrat-Signifikanz von Varianten │
│ sentry-ai-monitoring → LLM-Aufrufe während der Generierung │
│ audit-analyzer ─────→ Sicherheitsscan gerenderter Assets │
│ diagnose ────────────→ Renderfehler debuggen │
│ │
│ Ausgabe: { Testergebnisse, Signifikanzwerte, Fehlerberichte } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Stufe 6: DEPLOY — DevOps + Marketing (08 + 07) │
│ │
│ aws-agents-deploy ─→ Bereitstellung auf Lambda/Railway │
│ marketing-launch ───→ 5-phasiger Produkt-Launch │
│ vercel ──────────────→ Webhook-Service-Hosting │
│ fullstack-dev ───────→ Next.js-Dashboard für Render-Verwaltung │
│ │
│ Ausgabe: { Live-Renderings, Webhook-Endpunkte, Launch-Kampagne }│
└──────────────────────────────────────────────────────────────────┘
Integrationsrouten
Route A: Wettbewerbsanalyse-Video
spider (Wettbewerberseiten scannen)
→ firecrawl-scrape (Produktseiten extrahieren)
→ amazon-bedrock (Wettbewerbslandschaft analysieren)
→ council-of-five (Video-Winkel debattieren)
→ charts (Vergleichsvisualisierungen erstellen)
→ remotion-video-pro (Wettbewerbsvergleichs-Video rendern)
→ marketing-ab-testing (A/B-Test der Video-Varianten)
→ aws-agents-deploy (auf Lambda bereitstellen)
Route B: Produkt-Launch-Video-Kampagne
marketing-launch (5-phasigen Launch planen)
→ web-search (Marktdaten sammeln)
→ think (First-Principles-Messaging-Strategie)
→ amazon-bedrock (Videoskript generieren)
→ image-generation (Hero-Bilder erstellen)
→ ui-ux-pro-max (visuelles System entwerfen)
→ remotion-video-pro (Launch-Video rendern)
→ video-generation (KI-B-Roll-Material)
→ sentry-ai-monitoring (alle KI-Aufrufe nachverfolgen)
→ aws-agents-deploy (Pipeline bereitstellen)
→ marketing-ab-testing (Hook-Varianten testen)
Route C: Datengetriebene personalisierte Videos
firecrawl-crawl (Kundendatenquellen massenhaft extrahieren)
→ browser-cdp (CRM-Daten hinter Authentifizierung extrahieren)
→ amazon-bedrock (Videokopie pro Empfänger personalisieren)
→ charts (personalisierte Datenvisualisierungen generieren)
→ remotion-video-pro (Batch-Rendering mit Personalisierungs-Props)
→ sentry-ai-monitoring (Batch-LLM-Token-Verbrauch überwachen)
→ aws-agents-deploy (Lambda-Batch-Rendering)
→ docx/xlsx (ROI-Bericht aus der Kampagne generieren)
Route D: Content-Repurposing-Pipeline
video-understand (Quellvideo analysieren)
→ browserbase-autobrowse (Referenzinhalte sammeln)
→ think (Repurposing-Strategie planen)
→ firecrawl-scrape (Blog-Inhalt als Referenz extrahieren)
→ marketing-video (Short-Form vs. Long-Form-Ansatz wählen)
→ image-generation (Thumbnail-Varianten erstellen)
→ remotion-video-pro (Plattformspezifische Versionen rendern)
→ marketing-launch (Multi-Plattform-Verteilung koordinieren)
Route E: A/B-Test von Video-Varianten im großen Maßstab
marketing-ab-testing (Hypothese + Varianten entwerfen)
→ council-of-five (debattieren, welche Varianten zu testen sind)
→ amazon-bedrock (Varianten-Kopien/Skripte generieren)
→ ui-ux-pro-max (visuelle Systeme für Varianten entwerfen)
→ remotion-video-pro (A/B-Kompositionen rendern)
→ sentry-ai-monitoring (Generierungskosten nachverfolgen)
→ marketing-launch (Test für Zielgruppe bereitstellen)
→ charts (Testergebnisse visualisieren)
→ pdf (Testbericht generieren)
Querschnittliche Aspekte
Sicherheit (06-monitoring-security)
Jede Pipeline-Stufe sollte umschlossen sein von:
- sentry-ai-monitoring: Alle LLM-Aufrufe nachverfolgen (Token-Anzahl, Latenz, Kosten)
- sentry-nextjs-sdk: Webhook-Service-Status überwachen
- audit-analyzer: Regelmäßiger Sicherheitsscan der bereitgestellten Infrastruktur
- mcp-spy: MCP-Tool-Integrationen während der Entwicklung debuggen
Gedächtnis (10-agent-systems)
Sitzungsübergreifende Kontinuität für wiederkehrende Videoproduktion:
- persistent-memory: Markenrichtlinien, Farbpaletten, vergangene Kampagnen speichern
- context-compressor: Kontextfenster optimieren, wenn komplexe Pipelines ausgeführt werden
- self-improving-agent: Aus Renderfehlern und A/B-Testergebnissen lernen
Qualität (01-core-video)
Die goldenen Regeln von remotion-video-pro bei jedem Rendering durchsetzen:
- Framebasierte Determiniertheit (kein Math.random)
- Spring-Animationen über lineare
- React.memo auf jeder Szenenkomponente
- Zod-Schema-Validierung aller Props
- Pre-Commit-Validierungs-Hooks
Kurzreferenz — Skill zu Pipeline-Stufe
| Skill | Primäre Stufe | Sekundäre Nutzung |
|---|---|---|
| remotion-video-pro | 4. RENDER | 5. TEST (Validierung) |
| firecrawl-scrape | 1. ACQUIRE | 6. DEPLOY (Seiten überprüfen) |
| firecrawl-crawl | 1. ACQUIRE | 3. DESIGN (Referenzinhalte) |
| spider | 1. ACQUIRE | 6. DEPLOY (Sicherheitsscan) |
| browser-cdp | 1. ACQUIRE | 3. DESIGN (Authentifizierte Inhalte) |
| browserbase-fetch | 1. ACQUIRE | — |
| browserbase-autobrowse | 1. ACQUIRE | 2. THINK (Recherche) |
| think | 2. THINK | 5. TEST (Debug-Analyse) |
| council-of-five | 2. THINK | 7. MARKETING (Strategie) |
| amazon-bedrock | 2. THINK | 4. RENDER (KI-Generierung) |
| LLM | 2. THINK | — |
| VLM | 2. THINK | 4. RENDER (Szenenanalyse) |
| charts | 3. DESIGN | 9. OUTPUT (Berichte) |
| image-generation | 3. DESIGN | 4. RENDER (Assets) |
| ui-ux-pro-max | 3. DESIGN | 2. THINK (Layout-Schlussfolgerung) |
| marketing-ab-testing | 5. TEST | 7. MARKETING (Wachstum) |
| marketing-launch | 6. DEPLOY | 7. MARKETING (Kampagne) |
| sentry-ai-monitoring | 5. TEST | 6. DEPLOY (Produktionsüberwachung) |
| aws-agents-deploy | 6. DEPLOY | — |
| fullstack-dev | 6. DEPLOY | 3. DESIGN (Dashboards) |
| docx/pdf/xlsx | 9. OUTPUT | 7. MARKETING (Berichte) |
| agent-roles | 10. SYSTEMS | 2. THINK (Delegation) |
| superpowers | 10. SYSTEMS | — |