Remotion Video Director

Un skill interactif qui guide les utilisateurs de « J'ai besoin d'une vidéo » à un fichier MP4 rendu avec musique, grâce à une délibération experte, une conception de scénario et des motifs Remotion éprouvés.

Quand l'utiliser

Déclenchez ce skill lorsque l'utilisateur :

Souhaite créer une vidéo avec Remotion
A besoin d'une démo produit, d'une vidéo de lancement, d'un modèle de contenu récurrent, d'une vidéo marketing ou d'une introduction narrative
Dit « J'ai besoin d'une vidéo », « fais une vidéo pour... », « crée une vidéo Remotion », « vidéo en tant que code »
A besoin d'aide pour réfléchir au type de vidéo à créer ou à sa structuration
Dispose d'un projet Remotion et souhaite une relecture experte

Relation avec le skill officiel Remotion

Le package officiel remotion-dev/skills apprend à Claude l'API Remotion (37 fichiers de règles couvrant les animations, l'audio, les sous-titres, les transitions, etc.). Ce skill gère la couche créative et stratégique par-dessus :

Skill officiel : « Comment utiliser interpolate() ? » (référence technique)
Video Director : « Quelle vidéo dois-je créer et comment doit-elle se dérouler ? » (processus créatif)

Si le skill officiel Remotion est installé, exploitez-le pour les détails spécifiques à l'API. Sinon, les fichiers references/remotion-patterns.md et references/component-library.md de ce skill fournissent des connaissances suffisantes sur Remotion pour créer des vidéos de production.

Workflow en quatre phases

Phase 1 : Cadrage stratégique

Objectif : Comprendre ce dont l'utilisateur a besoin grâce à une conversation, puis rassembler les perspectives d'experts.

CRITIQUE : Cette phase est INTERACTIVE. Posez les questions une par une et ATTENDEZ les réponses. Ne déversez pas toutes les questions d'un coup et ne passez pas automatiquement à l'étape suivante sans l'avis de l'utilisateur.

Étape 1 - Découverte (Conversationnel)

Commencez par une question ouverte :

« À quoi sert cette vidéo ? Parlez-moi de l'idée, de qui la regardera et de ce que vous voulez qu'ils fassent après. »

ATTENDEZ la réponse de l'utilisateur. Posez ensuite des questions de suivi ciblées en fonction de ce qui manque :

Si le public n'est pas clair : « Qui regardera spécifiquement cette vidéo ? (clients, équipe, investisseurs, réseaux sociaux ?) »
Si l'action souhaitée n'est pas claire : « Après avoir regardé, que devraient FAIRE les spectateurs ? (s'inscrire, comprendre quelque chose, partager ?) »
Si aucune contrainte n'est mentionnée : « Y a-t-il des contraintes que je devrais connaître ? Durée, couleurs de marque, ressources existantes, délai ? »
S'ils mentionnent un produit : « Pouvez-vous partager des captures d'écran du produit/de l'interface ? »

Ne continuez PAS tant que vous n'avez pas compris : le but, le public, l'action souhaitée et les contraintes.

Étape 2 - Direction créative

Présentez les options de direction créative et demandez à l'utilisateur de choisir :

Style	Ambiance	Idéal pour
Minimal/Jobs	Fond noir, pauses dramatiques, une idée par image, police Impact	Lancements de produits, grandes idées, discours clés
Data-Rich/Bloomberg	Fond bleu marine foncé, graphiques animés, dense mais organisé	Résumés de réunions, rapports, tableaux de bord
Warm/Narrative	Tons chauds, citations personnelles, accents serif	Introductions de cours, histoires d'équipe, communauté
Terminal/Hacker	Thème de code sombre, machine à écrire, espacement monospace partout	Démonstrations techniques, outils de développement, ingénierie
Personnalisé	L'utilisateur décrit ou fournit des captures d'écran/vidéos de référence	Tout ce qui est spécifique

« Quelle direction stylistique correspond à votre vidéo ? Ou partagez des captures d'écran de vidéos que vous avez vues et qui vous ont plu. »

ATTENDEZ la réponse.

Consultez references/video-archetypes.md pour les spécifications complètes de la direction choisie (couleurs, polices, style d'animation, règles de minutage).

Étape 3 - Référence visuelle (Optionnel)

« Avez-vous des vidéos de référence, des captures d'écran ou des styles visuels que vous aimeriez que j'imite ? (Passez si aucun) »

Si l'utilisateur fournit des références, analysez-les pour : la palette de couleurs, la typographie, la vitesse d'animation, la densité de mise en page, l'ambiance générale. Incorporez-les dans le brief créatif.

ATTENDEZ la réponse ou la confirmation de passer.

Étape 4 - Réunion d'experts

Sur la base de l'archétype sélectionné (du fichier references/video-archetypes.md) et de la direction créative, réunissez un panel de 3 à 4 experts à partir de references/expert-definitions.md.

Générez des perspectives d'experts - pour chaque expert, générez 2 à 3 phrases :

Une recommandation spécifique
Un risque à surveiller

Restez concis. Présentez comme une brève table ronde. Mettez en évidence uniquement les points sur lesquels les experts sont en désaccord (cela signale une décision que l'utilisateur doit prendre).

Étape 5 - Brief créatif

Synthétisez en un brief structuré :

## Brief créatif

**Objectif** : [une phrase]
**Public** : [qui, ce qui les intéresse]
**Message clé** : [la SEULE chose que les spectateurs doivent retenir]
**Action souhaitée** : [ce que les spectateurs doivent faire ensuite]
**Durée** : [secondes] ([images] images à 30 ips)
**Direction créative** : [style sélectionné - Minimal/Jobs, Bloomberg, etc.]
**Arc émotionnel** : [par exemple, curiosité -> preuve -> confiance -> action]

## Stratégie audio
- Musique : [ambiant/entraînant/dramatique/clairsemé] de Pixabay
- Voix off : [oui/non]
- Ambiance musicale : [description correspondant à la direction créative]

## Séquence des scènes
| # | Scène | Durée | Objectif |
|---|-------|-------|----------|
| 1 | ...   | Xs    | ...      |

## Modèle de données (le cas échéant)
[Ce qui est paramétré vs codé en dur - la structure du modèle réutilisable]

## Style visuel
- Thème : [nom de la direction créative]
- Arrière-plan : [couleur]
- Couleurs : [primaire, accent, secondaire]
- Typographie : [police de titre, police de corps, police monospace]
- Sensation d'animation : [rapide/doux/dramatique/machine à écrire]

« Voici le brief créatif. Souhaitez-vous ajuster quelque chose avant que nous concevions les scènes ? »

ATTENDEZ la confirmation ou les ajustements.

Phase 2 : Design du scénario

Objectif : Transformer le brief en un scénario détaillé scène par scène.

Étape 6 - Conception des scènes

Pour chaque scène de la séquence, spécifiez :

Contenu : Texte exact, données, visuels
Composants : Quels composants réutilisables utiliser (depuis references/component-library.md)
Animation : Animations d'entrée/sortie, minutage en images
Transitions : Fondu enchaîné entre toutes les scènes (8 à 12 images)

Consultez references/remotion-patterns.md pour les contraintes critiques de Remotion et les modèles de style premium.

Règle de concentration des scènes : Chaque scène doit servir UNE idée qui se connecte au message clé. Si une scène est tangentielle au message clé, SUPPRIMEZ-LA. Moins de scènes concentrées sont toujours meilleures que beaucoup de scènes dispersées.

Budget d'images : Cartographiez toute la timeline :

const TIMING = {
  scene1: { start: 0, dur: 6 },   // Accroche
  scene2: { start: 6, dur: 10 },  // ...
  // Le total doit correspondre à composition durationInFrames / fps
};

Étape 7 - Architecture des données

Si la vidéo est pilotée par les données (rapport récurrent, marketing multi-variantes) :

Concevez l'objet de configuration qui change entre les rendus
Identifiez ce qui reste constant (modèle visuel) par rapport à ce qui varie (contenu)
Montrez à l'utilisateur la forme de la configuration et confirmez

Exemple de modèle (d'après WeeklyIntro) :

const weekData = {
  weekLabel: "Mar 3 - Mar 9",
  heroNumber: 312,
  heroLabel: "new signups",
  // ... champs qui changent chaque semaine
};

Étape 8 - Confirmation de l'utilisateur

Présentez le scénario complet.

« Prêt à construire, ou souhaitez-vous ajuster quelque chose ? »

ATTENDEZ la confirmation.

Phase 3 : Construction

Objectif : Créer le projet Remotion et effectuer le rendu de la première version.

CRITIQUE : N'exécutez jamais une commande qui lance un assistant CLI interactif ou demande une entrée. Cela inclut npx create-video, npx remotion init, npm init, ou npx remotion render nu sans arguments. Créez toujours les fichiers manuellement et transmettez tous les arguments de manière explicite aux commandes CLI.

Étape 9 - Créer la structure du projet

Créez la structure du projet Remotion manuellement (n'utilisez PAS les assistants de création - voir l'en-tête de la Phase 3) :

<projet>/
├── src/
│   ├── Root.tsx
│   ├── Video.tsx           # ou <NomVideo>.tsx
│   ├── theme/
│   │   ├── colors.ts
│   │   ├── fonts.ts
│   │   └── springs.ts
│   ├── scenes/
│   │   ├── Scene1Hook.tsx
│   │   └── ...
│   ├── components/
│   │   ├── FadeIn.tsx
│   │   └── ...
│   └── data/
│       └── config.ts       # si piloté par les données
├── public/
│   ├── music.mp3           # musique de fond
│   └── illustrations/      # si utilisation d'images de fond
├── package.json
├── tsconfig.json
└── remotion.config.ts

Installez les dépendances : pnpm install

Étape 10 - Construire les scènes

Construisez chaque composant de scène en suivant le scénario de la Phase 2. Utilisez les composants de references/component-library.md.

Règles de construction critiques (depuis references/remotion-patterns.md) :

Toute animation via useCurrentFrame() + interpolate()/spring() - JAMAIS de transitions CSS
Toujours limiter l'interpolation : { extrapolateLeft: "clamp", extrapolateRight: "clamp" }
useCurrentFrame() est relatif au <Sequence> le plus proche, pas à la timeline globale
Fondu enchaîné entre chaque scène (enveloppe de 8 à 12 images ; exception : style Terminal/Hacker où les coupures nettes conviennent)
Chaque élément doit animer son entrée - ne jamais apparaître statique sur une coupure

Règles de style premium (depuis references/remotion-patterns.md) :

Variété de polices : mélangez police de titre + police de corps + police monospace (pas Inter partout)
Contraste de taille extrême : titres 72-96pt, corps 20-24pt
Centrez verticalement les questions/titres importants
Maximum 15-20 mots par diapositive de corps, 7 mots pour les diapositives de titre (style Jobs)
Gardez le texte dans les 85% supérieurs du cadre
Taille de police minimale de 24pt pour la lisibilité
Rembourrage de 80 à 120 px depuis les bords

Étape 11 - Intégration audio

Consultez references/music-and-audio.md pour le guide audio complet.

« Souhaitez-vous ajouter de la musique de fond ? Je recommande de parcourir pixabay.com/music/ pour un morceau libre de droits qui correspond au style [direction créative sélectionnée]. Partagez le lien de téléchargement ou le fichier et je l'intégrerai avec des courbes de volume appropriées. »

ATTENDEZ la réponse de l'utilisateur.

Si l'utilisateur fournit de la musique :

Téléchargez/enregistrez dans public/music.mp3
Ajoutez le composant <Audio> avec une courbe de volume fondu entrant/sortant
Abaissez le volume de la musique pendant les scènes riches en données (0,30 -> 0,15)
Si le morceau est plus long que la vidéo, utilisez startFrom pour jouer la section de fin

Si l'utilisateur souhaite une voix off :

Générez un script de narration à partir du contenu de la scène (~3 mots/seconde)
L'utilisateur enregistre ou utilise ElevenLabs
Intégrez avec une réduction de la musique (la musique descend à 0,10-0,12 pendant la narration)

Si l'utilisateur ignore l'audio : effectuez le rendu avec l'option --muted.

Étape 12 - Rendu et aperçu

CRITIQUE : Transmettez toujours le fichier d'entrée pour éviter les invites interactives. N'exécutez jamais npx remotion render nu - cela pourrait lancer un sélecteur de composition interactif. Spécifiez toujours le fichier d'entrée et l'ID de composition de manière explicite :

# Rendu du MP4 final - toujours spécifier le point d'entrée + ID de composition
npx remotion render src/Root.tsx <CompositionId> out/<nom>.mp4 --codec=h264 --crf=18

# Si pas d'audio :
npx remotion render src/Root.tsx <CompositionId> out/<nom>.mp4 --codec=h264 --crf=18 --muted

Ouvrez la vidéo pour que l'utilisateur la révise.

Phase 4 : Révision

Objectif : Affiner la vidéo grâce à une révision experte et aux commentaires de l'utilisateur jusqu'à ce qu'elle soit prête à être diffusée.

Étape 13 - Révision multi-experts

Une fois que l'utilisateur a vu la vidéo, exécutez le protocole de révision à partir de references/expert-definitions.md.

Générez une fiche d'évaluation (voir references/expert-definitions.md pour le modèle complet) :

| Dimension              | Priorité | Note |
|------------------------|----------|------|
| Clarté de l'accroche (3-5 premières s) | Critique | ?/5  |
| Message clé transmis   | Critique | ?/5  |
| Rythme / dynamisme     | Élevée   | ?/5  |
| Lisibilité visuelle    | Élevée   | ?/5  |
| Action cible claire    | Élevée   | ?/5  |
| Adéquation au public   | Moyenne  | ?/5  |

Ajoutez 2 à 3 dimensions spécifiques au type (par exemple, « Sensation visuelle premium » pour Minimal/Jobs, « Harmonie audio-visuelle » si de la musique a été ajoutée, « Réutilisabilité de la configuration » pour les rapports de données).

Chaque expert examine sous son angle, y compris le Directeur de la photographie sur la composition visuelle et le Directeur musical sur l'audio (si de la musique a été ajoutée). Synthétisez en :

Points forts - ce qui fonctionne bien
Améliorations - changements spécifiques et exploitables
Verdict - publier tel quel, nécessite une nouvelle passe, ou nécessite une refonte importante

Demandez à l'utilisateur quelles améliorations appliquer.

Étape 14 - Révision utilisateur et itération

La révision experte détecte les problèmes techniques, mais seul l'utilisateur sait si la vidéo semble juste.

« Maintenant que vous avez vu la vidéo et la révision experte - quel est votre avis ?

Quelles scènes fonctionnent bien ?

Quelles scènes ont besoin de changements ? (capture d'écran d'images spécifiques si possible)

Y a-t-il des problèmes de texte, de minutage ou visuels ?

Quelque chose manque-t-il ou devrait-il être supprimé ? »

ATTENDEZ les commentaires de l'utilisateur.

Lorsque l'utilisateur fournit des commentaires :

Reconnaissez ce qu'il a aimé (renforce la direction)
Listez les modifications spécifiques que vous apportez en fonction de ses notes
Effectuez les modifications - modifiez les composants de scène, ajustez le minutage, corrigez le texte
Refaites le rendu et présentez la vidéo mise à jour
Redemandez : « Mieux ? Quelque chose d'autre à ajuster ? »

Répétez cette boucle jusqu'à ce que l'utilisateur soit satisfait. Les vidéos typiques nécessitent 1 à 3 tours de raffinement.

Modèles de commentaires courants et comment les gérer :

« Trop rapide » → Augmentez les durées de scène de 30 à 50 %, ajoutez des pauses plus dramatiques
« Trop de texte » → Divisez les scènes, réduisez à 7 mots par image (style Jobs)
« Ne semble pas premium » → Passez à la direction Minimal/Jobs, ajoutez de l'espace négatif
« La musique ne correspond pas » → Essayez un autre morceau Pixabay, ajustez la courbe de volume
« Ton incorrect » → Revenez sur la direction créative, ajustez la palette de couleurs et la vitesse d'animation
« La scène X est confuse » → Simplifiez à UNE idée, ajoutez une hiérarchie visuelle

Directives d'adaptation

Lorsque l'utilisateur a déjà un projet Remotion

Sautez la Phase 1-2 de création de structure. Concentrez-vous sur la révision du code existant, la suggestion d'améliorations ou l'ajout de nouvelles scènes/compositions.

Lorsque l'utilisateur souhaite une vidéo rapide (sans délibération)

Compressez la Phase 1 en : demandez le type de vidéo + la direction créative en une seule question. Choisissez les 2 meilleurs experts, générez un scénario bref. Passez rapidement à la construction. Demandez toujours pour la musique.

Lorsque l'utilisateur souhaite uniquement le concept (pas de code)

Exécutez la Phase 1-2 complètement. Produisez le brief créatif et le scénario sous forme de document. Sautez la Phase 3.

Lorsque l'utilisateur souhaite des vidéos multi-variantes

Utilisez l'archétype Growth Marketing. Concevez la matrice de variantes (ce qui change par variante). Construisez une vidéo de base, puis montrez comment paramétrer le modèle pour générer plusieurs versions.

BayramAnnakov/remotion-video-director

Qu'est-ce que remotion-video-director ?

Demander à votre IA préférée

Documentation