Écosystème Remotion — Architecture de compétences unifiée
Périmètre
Ceci est la couche d'intégration qui transforme 91 compétences individuelles en un pipeline cohérent de production vidéo. Elle ne remplace aucune compétence — elle fournit les patrons de routage, de flux de données et d'orchestration qui les connectent.
Chaque compétence ci-dessous peut être utilisée indépendamment. Ce document d'écosystème décrit comment elles se composent ensemble lors de la construction de systèmes vidéo Remotion de bout en bout.
Les Dix Catégories
remotion-ecosystem/
├── 01-core-video/ ← Moteur de rendu + stratégie vidéo
│ ├── remotion-video-pro (scaffolding, animation, rendu par lots)
│ ├── marketing-video (sélection d'approche de production)
│ ├── video-generation (création vidéo IA)
│ └── video-understand (analyse vidéo)
│
├── 02-data-ingestion/ ← Sourcing de contenu pour données vidéo
│ ├── firecrawl-scrape (extraction de pages rendues JS)
│ ├── firecrawl-crawl (exploration de sites en masse)
│ ├── spider (analyse de site + audit de sécurité)
│ ├── web-reader (métadonnées + contenu de page)
│ ├── web-search (recherche en temps réel)
│ └── browserbase-fetch (récupération d'URL légère)
│
├── 03-browser-automation/ ← Authentification + interaction pour contenu protégé
│ ├── browser-cdp (réutilisation de session Chrome)
│ ├── agent-browser (automatisation navigateur avec tête)
│ └── browserbase-autobrowse (boucles de navigation auto-améliorantes)
│
├── 04-ai-intelligence/ ← Raisonnement IA + orchestration de modèles
│ ├── think (raisonnement multi-framework via Gemini)
│ ├── council-of-five (débat parallèle à 5 personas)
│ ├── amazon-bedrock (invocation de modèles Claude/Llama/Nova)
│ ├── LLM (complétions de chat)
│ └── VLM (compréhension vision-langage)
│
├── 05-content-design/ ← Actifs visuels + conception de mouvement
│ ├── charts (visualisation de données)
│ ├── image-generation (création d'images IA)
│ ├── image-edit (édition d'images IA)
│ ├── ui-ux-pro-max (système de design + raisonnement UI)
│ ├── anthropic-frontend-design (interfaces distinctives)
│ └── web-shader-extractor (extraction d'effets visuels)
│
├── 06-monitoring-security/ ← Observabilité + protection
│ ├── sentry-ai-monitoring (traçage des appels LLM + suivi des tokens)
│ ├── sentry-nextjs-sdk (monitoring des erreurs + performances Next.js)
│ ├── audit-analyzer (audit système)
│ ├── diagnose (débogage + diagnostic)
│ └── mcp-spy (débogage du trafic MCP)
│
├── 07-marketing-strategy/ ← Croissance + expérimentation
│ ├── marketing-ab-testing (hypothèse + significativité du khi-carré)
│ ├── marketing-launch (cadre de lancement en 5 phases)
│ ├── marketing-mode (orchestration marketing de croissance)
│ └── content-strategy (planification de contenu)
│
├── 08-devops-deploy/ ← Infrastructure + CI/CD
│ ├── aws-agents-deploy (déploiement Railway/Vercel/Lambda)
│ ├── amazon-bedrock (déploiement de modèles IA AWS)
│ ├── vercel (déploiement Vercel)
│ ├── deployment-manager (déploiement multi-plateforme)
│ ├── github (CI/CD + gestion de dépôt)
│ └── fullstack-dev (développement full-stack Next.js)
│
├── 09-document-output/ ← Rapports + livrables à partir de données vidéo
│ ├── docx (documents Word)
│ ├── pdf (génération PDF)
│ ├── ppt / pptx (présentations)
│ ├── xlsx (feuilles de calcul)
│ └── infographic-gen (infographies)
│
└── 10-agent-systems/ ← Orchestration d'agents + mémoire
├── agent-roles (personas d'agents spécialisés)
├── superpowers (spécification d'abord + délégation sous-agent)
├── proactive-agent (auto-amélioration autonome)
├── self-improving-agent (journalisation d'erreurs + apprentissage)
├── persistent-memory (mémoire inter-sessions)
└── context-compressor (optimisation de la fenêtre de contexte)
Architecture du Pipeline
L'écosystème Remotion suit un pipeline en 6 étapes :
[1. ACQUÉRIR] → [2. RÉFLÉCHIR] → [3. CONCEVOIR] → [4. RENDRE] → [5. TESTER] → [6. DÉPLOYER]
┌──────────────────────────────────────────────────────────────────┐
│ Étape 1 : ACQUÉRIR — Ingestion de données (02-data-ingestion) │
│ │
│ firecrawl-scrape ──→ extraire les pages concurrentes │
│ browser-cdp ──────→ extraire le contenu derrière authentification │
│ spider ───────────→ analyser les pages produits pour données │
│ web-search ────────→ collecter des informations marché │
│ web-reader ────────→ extraire le contenu d'articles │
│ │
│ Sortie : { products, competitors, testimonials, pricing } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Étape 2 : RÉFLÉCHIR — Intelligence IA (04-ai-intelligence) │
│ │
│ think ─────────────→ analyse par principes premiers des données │
│ council-of-five ───→ débat à 5 personas sur l'approche vidéo │
│ amazon-bedrock ────→ générer script / copie / storyboard │
│ LLM ────────────────→ affiner le message et les CTA │
│ │
│ Sortie : { script, storyboard, copy variants, scene plan } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Étape 3 : CONCEVOIR — Contenu + Visuel (05-content-design) │
│ │
│ image-generation ──→ images hero, plans produits │
│ charts ─────────────→ visualisations de données pour la vidéo │
│ ui-ux-pro-max ─────→ système de mise en page + couleur + typo │
│ web-shader-extractor → effets visuels depuis sites de référence │
│ │
│ Sortie : { images, charts, color palettes, motion specs } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Étape 4 : RENDRE — Vidéo de base (01-core-video) │
│ │
│ remotion-video-pro → composer des composants React en images │
│ marketing-video ────→ sélectionner l'approche de production │
│ video-generation ──→ séquences B-roll générées par IA │
│ video-understand ──→ analyser des vidéos de référence │
│ │
│ Sortie : { MP4 renders, variant compositions } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Étape 5 : TESTER — Monitoring + A/B (06 + 07) │
│ │
│ marketing-ab-testing → significativité du khi-carré sur variantes│
│ sentry-ai-monitoring → tracer les appels LLM durant la génération│
│ audit-analyzer ─────→ scan de sécurité des actifs rendus │
│ diagnose ────────────→ déboguer les échecs de rendu │
│ │
│ Sortie : { test results, significance scores, error reports } │
└────────────────────────────┬─────────────────────────────────────┘
▼
┌──────────────────────────────────────────────────────────────────┐
│ Étape 6 : DÉPLOYER — DevOps + Marketing (08 + 07) │
│ │
│ aws-agents-deploy ─→ déployer sur Lambda/Railway │
│ marketing-launch ───→ lancement produit en 5 phases │
│ vercel ──────────────→ hébergement de service webhook │
│ fullstack-dev ───────→ tableau de bord Next.js pour gestion rendu│
│ │
│ Sortie : { live renders, webhook endpoints, launch campaign } │
└──────────────────────────────────────────────────────────────────┘
Routes d'Intégration
Route A : Vidéo de Veille Concurrentielle
spider (analyser les sites concurrents)
→ firecrawl-scrape (extraire les pages produits)
→ amazon-bedrock (analyser le paysage concurrentiel)
→ council-of-five (débattre de l'angle vidéo)
→ charts (créer des visualisations comparatives)
→ remotion-video-pro (rendre la vidéo de comparaison concurrentielle)
→ marketing-ab-testing (tester A/B les variantes vidéo)
→ aws-agents-deploy (déployer sur Lambda)
Route B : Campagne Vidéo de Lancement Produit
marketing-launch (planifier le lancement en 5 phases)
→ web-search (collecter des données marché)
→ think (stratégie de message par principes premiers)
→ amazon-bedrock (générer le script vidéo)
→ image-generation (créer des images hero)
→ ui-ux-pro-max (concevoir le système visuel)
→ remotion-video-pro (rendre la vidéo de lancement)
→ video-generation (séquences B-roll IA)
→ sentry-ai-monitoring (tracer tous les appels IA)
→ aws-agents-deploy (déployer le pipeline)
→ marketing-ab-testing (tester les variations d'accroche)
Route C : Vidéos Personnalisées Basées sur les Données
firecrawl-crawl (extraire en masse les sources de données clients)
→ browser-cdp (extraire les données CRM derrière authentification)
→ amazon-bedrock (personnaliser le texte vidéo par destinataire)
→ charts (générer des visualisations de données personnalisées)
→ remotion-video-pro (rendre par lots avec des props de personnalisation)
→ sentry-ai-monitoring (surveiller l'utilisation des tokens LLM par lot)
→ aws-agents-deploy (rendu par lots Lambda)
→ docx/xlsx (générer un rapport ROI à partir de la campagne)
Route D : Pipeline de Réutilisation de Contenu
video-understand (analyser la vidéo source)
→ browserbase-autobrowse (collecter du contenu de référence)
→ think (planifier la stratégie de réutilisation)
→ firecrawl-scrape (extraire le contenu du blog pour référence)
→ marketing-video (sélectionner l'approche court format vs long format)
→ image-generation (créer des variantes de vignettes)
→ remotion-video-pro (rendre des versions spécifiques à chaque plateforme)
→ marketing-launch (coordonner la distribution multi-plateforme)
Route E : Tests A/B de Variantes Vidéo à Grande Échelle
marketing-ab-testing (concevoir hypothèse + variantes)
→ council-of-five (débattre des variantes à tester)
→ amazon-bedrock (générer le texte/scripts des variantes)
→ ui-ux-pro-max (concevoir les systèmes visuels des variantes)
→ remotion-video-pro (rendre les compositions A/B)
→ sentry-ai-monitoring (tracer les coûts de génération)
→ marketing-launch (déployer le test auprès de l'audience)
→ charts (visualiser les résultats du test)
→ pdf (générer le rapport de test)
Préoccupations Transversales
Sécurité (06-monitoring-security)
Chaque étape du pipeline doit être enveloppée avec :
- sentry-ai-monitoring : Tracer tous les appels LLM (nombre de tokens, latence, coût)
- sentry-nextjs-sdk : Surveiller la santé du service webhook
- audit-analyzer : Scan de sécurité périodique de l'infrastructure déployée
- mcp-spy : Déboguer les intégrations d'outils MCP en développement
Mémoire (10-agent-systems)
Continuité inter-sessions pour la production vidéo récurrente :
- persistent-memory : Stocker les directives de marque, les palettes de couleurs, les campagnes passées
- context-compressor : Optimiser la fenêtre de contexte lors de l'exécution de pipelines complexes
- self-improving-agent : Apprendre des échecs de rendu et des résultats de tests A/B
Qualité (01-core-video)
Appliquer les règles d'or de remotion-video-pro à chaque rendu :
- Déterminisme basé sur les images (pas de Math.random)
- Animations Spring plutôt que linéaires
- React.memo sur chaque composant de scène
- Validation de schéma Zod sur toutes les props
- Hooks de validation pré-commit
Référence Rapide — Compétence vers Étape du Pipeline
| Compétence | Étape Principale | Utilisation Secondaire |
|---|---|---|
| remotion-video-pro | 4. RENDRE | 5. TESTER (validation) |
| firecrawl-scrape | 1. ACQUÉRIR | 6. DÉPLOYER (vérifier pages) |
| firecrawl-crawl | 1. ACQUÉRIR | 3. CONCEVOIR (contenu de référence) |
| spider | 1. ACQUÉRIR | 6. DÉPLOYER (scan de sécurité) |
| browser-cdp | 1. ACQUÉRIR | 3. CONCEVOIR (contenu auth) |
| browserbase-fetch | 1. ACQUÉRIR | — |
| browserbase-autobrowse | 1. ACQUÉRIR | 2. RÉFLÉCHIR (recherche) |
| think | 2. RÉFLÉCHIR | 5. TESTER (analyse de débogage) |
| council-of-five | 2. RÉFLÉCHIR | 7. MARKETING (stratégie) |
| amazon-bedrock | 2. RÉFLÉCHIR | 4. RENDRE (génération IA) |
| LLM | 2. RÉFLÉCHIR | — |
| VLM | 2. RÉFLÉCHIR | 4. RENDRE (analyse de scène) |
| charts | 3. CONCEVOIR | 9. SORTIE (rapports) |
| image-generation | 3. CONCEVOIR | 4. RENDRE (actifs) |
| ui-ux-pro-max | 3. CONCEVOIR | 2. RÉFLÉCHIR (raisonnement mise en page) |
| marketing-ab-testing | 5. TESTER | 7. MARKETING (croissance) |
| marketing-launch | 6. DÉPLOYER | 7. MARKETING (campagne) |
| sentry-ai-monitoring | 5. TESTER | 6. DÉPLOYER (monitoring production) |
| aws-agents-deploy | 6. DÉPLOYER | — |
| fullstack-dev | 6. DÉPLOYER | 3. CONCEVOIR (tableaux de bord) |
| docx/pdf/xlsx | 9. SORTIE | 7. MARKETING (rapports) |
| agent-roles | 10. SYSTÈMES | 2. RÉFLÉCHIR (délégation) |
| superpowers | 10. SYSTÈMES | — |