realjaymes/marketingagentskills

Quand utiliser cette compétence

Utilisez cette compétence lorsque :

• Vous créez une nouvelle vidéo Remotion à partir de zéro
• Vous générez des variantes de brief vidéo pour un actif de contenu
• Vous modifiez une composition Remotion existante
• Vous déboguez des problèmes d'animation ou de rendu Remotion
• Vous travaillez avec des API ou composants spécifiques à Remotion

Processus de création vidéo

Lors de la création d'une nouvelle vidéo Remotion, suivez ce processus en 8 étapes. L'étape 2 sélectionne 3 à 5 concepts du catalogue en fonction du brief et de l'optimisation pour l'audience froide. Les étapes 4 et 5 sont des points d'approbation. N'écrivez pas de code avant que les deux soient approuvés.

Pour le document complet du processus avec des modèles et des matrices de décision, lisez references/video-creation-process.md.

Étape 0 : Identification de la marque

Avant tout travail créatif, identifiez la marque. Demandez à l'utilisateur : « Pour quelle marque est cette vidéo ? »

Si la marque a un préréglage ci-dessous, utilisez-le directement. Aucune autre question sur la marque n'est nécessaire.

Si la marque n'est pas listée, demandez à l'utilisateur de fournir une URL du site web de la marque ou des directives de marque. Extrayez : couleur de fond, accent principal, accent secondaire, couleurs de texte, police de caractères et thème (clair/foncé). S'il n'y a pas de directives, demandez au minimum : couleur principale, couleur de fond et préférence de police.

Étape 1 : Brief créatif

Rassemblez et verrouillez avant tout travail créatif :

Objectif : [Pourquoi cette vidéo existe]
Audience : [Qui regarde]
Message principal : [Une phrase]
Type de contenu : [blog-post, case-study, webinar, podcast, lead-magnet, product-update, tool-launch, industry-report, event-recap, client-testimonial, playbook, template, ai-demo, custom-gpt]
Canaux : [Où elle sera diffusée]
CTA : [Ce que le spectateur doit faire ensuite]
Actifs sources : [Fichiers, composants ou URL de référence]
Ton : [Mots descriptifs pour l'ambiance]
Marque : [Nom de la marque de l'étape 0]

Étape 2 : Sélection du concept (3 à 5 concepts recommandés)

Après avoir verrouillé le brief créatif, analysez-le pour sélectionner les meilleurs concepts vidéo pour ce cas d'usage spécifique. Ne présentez pas un ensemble fixe de variantes. Puisez dans le catalogue de concepts dans references/concept-catalog.md.

Le catalogue contient 18 concepts principaux, 8 modificateurs de style visuel et 5 motifs d'accroche pour audience froide. Lisez-le avant de générer des recommandations.

Processus de sélection

1. Évaluez les concepts par rapport au brief. Pour chaque concept du catalogue, évaluez :

   • Le « Meilleur pour » du concept correspond-il au type de contenu ?
   • Le message principal peut-il être compris en 15 à 30 secondes avec cette structure ?
   • Le concept fonctionne-t-il à la durée et aux dimensions cibles ?
   • Le brief fournit-il les données/visuels dont ce concept a besoin ?

2. Appliquez le filtre d'audience froide. Pour chaque概念 évalué, évaluez :

   • Un spectateur sans AUCUN contexte préalable peut-il comprendre la valeur dans les 3 premières secondes ?
   • Le concept crée-t-il un mouvement visuel accrocheur dès le premier plan ?
   • Le concept évite-t-il de nécessiter une connaissance préalable de la marque, du produit ou du problème ?
   • Si le concept met naturellement en avant un résultat ou un point de données (compteur, infographie animée, avant-après), il est intrinsèquement plus fort pour les audiences froides que les concepts narratifs qui nécessitent un temps d'installation.

3. Sélectionnez un motif d'accroche. Pour chaque concept recommandé, associez-le à un motif d'accroche du catalogue :

   • Contenu avec données → résultat-d'abord
   • Lancements de produits et outils → rupture-de-motif
   • Leadership éclairé et éducation → fossé-de-curiosité
   • Contenu de confiance → accroche-sociale
   • Contenu concurrentiel et tarifaire → aversion-à-la-perte

4. Présentez 3 à 5 concepts recommandés sous forme de briefs d'une page. Pour chacun :

   • Nom du concept (issu du catalogue) et description en une phrase
   • Pourquoi il correspond à ce brief (1 à 2 phrases en référence au contenu et à l'audience spécifiques)
   • Motif d'accroche recommandé et description du plan d'ouverture
   • Tableau scène par scène (à partir du modèle du catalogue, personnalisé pour ce contenu)
   • Modificateur de style visuel optionnel s'il améliore le concept

5. Classez les recommandations. Marquez la meilleure recommandation et expliquez pourquoi.

6. L'utilisateur en sélectionne un (ou un hybride de deux). Verrouillez le concept sélectionné avant de passer à l'étape 3.

Règles d'optimisation pour l'audience froide

Ces règles s'appliquent à toutes les recommandations de concepts et remplacent les valeurs par défaut du type de contenu en cas de conflit :

• Hypothèse par défaut : audience froide. Sauf si le brief indique explicitement que l'audience est chaude (reciblage, utilisateurs existants, abonnés à la newsletter), supposez une notoriété de marque nulle.
• Exigences pour la première scène face à une audience froide :
  1. Une rupture de motif visuelle (mouvement, contraste de couleur ou changement d'échelle)
  2. Un texte qui nomme un problème ou un résultat que le spectateur reconnaît SANS connaître la marque
  3. Aucune identification de la marque dans la scène 1 (réservez la carte de marque pour la scène 2 ou plus tard)
• Restrictions des motifs d'accroche pour les audiences froides : Utilisez rupture-de-motif, résultat-d'abord ou aversion-à-la-perte. Évitez le fossé-de-curiosité à moins que la statistique/l'affirmation soit universellement pertinente sans contexte de marque.
• Flexibilité du concept : Si aucun concept du catalogue ne correspond bien au brief pour une audience froide, créez un hybride ou adaptez un concept existant. Le catalogue est une bibliothèque de départ, pas une contrainte.

Étape 3 : Format et spécifications

Résolvez à partir du brief et de la variante sélectionnée en utilisant la matrice de décision de format :

Canal	Dimensions	Durée
Fil LinkedIn/Instagram	1080x1080	15-30 s
Site web/présentation	1920x1080	15-60 s
Reels/TikTok/Stories	1080x1920	15-60 s
Email (GIF)	600x600 ou 800x450	5-10 s

FPS par défaut : 30. Utilisez 60 uniquement si un mouvement fluide est critique.

Dimensions : [largeur]x[hauteur]
Durée : [X] secondes ([X * fps] images)
FPS : 30
ID de composition : [PascalCase]
Boucle : [oui/non]
Formats de sortie : [mp4, gif, webm]
Concept sélectionné : [concept-id du catalogue, ou hybride]

Étape 4 : Décomposition des scènes (POINT D'APPROBATION)

Définissez chaque scène avant d'écrire du code. Utilisez le modèle de scène de la variante sélectionnée comme structure de départ, puis personnalisez-la pour le contenu spécifique.

Présentez le tableau des scènes pour approbation.

Format du tableau des scènes :

#	Nom	Temps	Texte	Animation	Objectif
1	Accroche	0-3 s	Texte exact	Description du mouvement	Pourquoi elle existe

Directives de timing :

Durée	Nombre de scènes	Moyenne par scène
10 s	3-4	2,5-3,3 s
15 s	4-6	2,5-3,75 s
30 s	8-12	2,5-3,75 s
60 s	12-20	3-5 s

Verrouillez le texte, le timing et la structure narrative avant de continuer.

Étape 5 : Conception visuelle (POINT D'APPROBATION)

Verrouillez avant la mise en œuvre :

Palette de couleurs (rôles minimum requis) :

• Fond, Accent principal, Accent secondaire
• Texte principal, Texte secondaire, Texte tertiaire
• Bordure/séparateur

Préréglages de thème de marque (utilisez pour les marques connues, sautez les questions de couleur) :

Marque	Fond	Accent Principal	Accent Secondaire	Texte Principal	Texte Atténué	Police	Thème
FunnelEnvy	#FFFFFF / #1a1a2e (terminal)	#3B82F6 (Bleu)	#8B5CF6 (Violet)	#000000	#6B7280	Inter, system	Clair
Reform	#FFFFFF / #1a1a2e (terminal)	#48EC80 (Vert)	#EDE630 (Jaune)	#000000	#6B7280	Inter, system	Clair
GrowthNode	#0f0a1a (toutes les scènes)	#8B5CF6 (Violet)	#3B82F6 (Bleu)	#FFFFFF	#a1a1aa	Inter, system	Sombre
MIA	#F7F4FA / #1c1422 (sombre)	#F1DE71 (Jaune)	#7184F1 (Violet)	#1c1422 / #f7f4fa (sombre)	rgba(28,20,34,0.62)	system-ui, -apple-system, Segoe UI	Clair

Palette d'accents MIA : Bleu #71C4F1, Violet #7184F1, Rose #F171C4, Vert #71F19E

Marques personnalisées : Si la marque n'est pas listée ci-dessus, définissez les couleurs à partir du site web de la marque ou des directives fournies à l'étape 0. Remplissez les mêmes rôles : fond, accent principal, accent secondaire, texte principal, texte atténué, police, thème.

Typographie : Famille de polices, hiérarchie des graisses, tailles à la résolution cible.

Style d'animation : Spring (rebondissant/lisse/sec), linéaire ou basé sur l'assouplissement. Choisissez un style dominant.

Source de vérité : Si vous correspondez à un design existant, référencez le fichier source.

Étape 6 : Décision d'architecture

L'agent résout cela en fonction de la complexité des scènes :

Condition	Approche
Moins de 15 scènes	Fichier unique
15 scènes ou plus, ou parties réutilisables	Multi-fichiers avec répertoire scenes/
Éléments partagés entre les scènes	Couche persistante avec enveloppe d'opacité

Utilisez toujours une constante de timing centralisée (const T = { ... }).

Étape 7 : Implémentation

Écrivez le code en fonction des décisions verrouillées. Toute animation doit suivre les règles de Remotion (voir la Référence technique ci-dessous).

Étape 8 : Documentation de sortie

Générez un document de référence couvrant : spécifications, variante sélectionnée, commandes de prévisualisation/rendu, décomposition des scènes, palette de couleurs, configuration de timing, notes d'architecture, guide d'itération.

---

Référence technique

Lisez les fichiers de règles individuels pour les détails de l'API et les exemples de code.

Animation et timing de base

• rules/animations.md - Fondamentaux de l'animation. Tout mouvement via useCurrentFrame(). Pas de transitions CSS
• rules/timing.md - interpolate(), spring(), fonctions d'assouplissement, configurations spring
• rules/sequencing.md - <Sequence> et <Series> pour le contrôle du timing, du délai et de la durée
• rules/trimming.md - Rogner les débuts (from négatif) et les fins (durationInFrames)
• rules/transitions.md - <TransitionSeries> avec fondu, glissement, balayage, retournement, balayage d'horloge

Média

• rules/assets.md - staticFile() pour les actifs du dossier public
• rules/videos.md - <Video> avec rognage, volume, vitesse, boucle, hauteur
• rules/audio.md - <Audio> avec rognage, volume, vitesse, hauteur
• rules/images.md - Composant <Img> (garantit le chargement avant le rendu)
• rules/gifs.md - <AnimatedImage> pour GIF/APNG/AVIF/WebP
• rules/fonts.md - Polices Google via @remotion/google-fonts, polices locales via @remotion/fonts

Texte et légendes

• rules/text-animations.md - Machine à écrire, motifs de surbrillance de mots
• rules/measuring-text.md - measureText(), fitText(), fillTextBox()
• rules/display-captions.md - Légendes style TikTok, surbrillance mot par mot
• rules/import-srt-captions.md - Analyser les fichiers .srt avec parseSrt()
• rules/transcribe-captions.md - Whisper.cpp, Whisper Web, API OpenAI

Composition et métadonnées

• rules/compositions.md - <Composition>, <Still>, <Folder>, defaultProps
• rules/calculate-metadata.md - Durée, dimensions et propriétés dynamiques

Avancé

• rules/3d.md - <ThreeCanvas> avec React Three Fiber
• rules/charts.md - Graphiques SVG/D3.js animés via useCurrentFrame()
• rules/lottie.md - Composant <Lottie> avec @remotion/lottie
• rules/tailwind.md - TailwindCSS (pas de classes transition-* ou animate-*)

Utilitaires média (Mediabunny)

• rules/extract-frames.md - Extraire les images vidéo à des horodatages
• rules/can-decode.md - Vérifier la décodabilité vidéo/audio
• rules/get-video-duration.md - Durée vidéo en secondes
• rules/get-video-dimensions.md - Largeur et hauteur vidéo
• rules/get-audio-duration.md - Durée audio en secondes

Mise en page

• rules/measuring-dom-nodes.md - useCurrentScale() pour des mesures précises

---

Références

• references/concept-catalog.md - Catalogue de concepts avec 18 concepts principaux, 8 modificateurs de style visuel, 5 motifs d'accroche pour audience froide, critères de sélection et matrice d'affinité type de contenu
• references/video-creation-process.md - Document complet du processus avec modèles, matrices de décision et conseils détaillés

---

Règles strictes

Elles s'appliquent à tout le code Remotion. Les violations produiront un résultat incorrect.

1. Toute l'animation est pilotée par useCurrentFrame(). Pas de transitions CSS, pas de classes Tailwind animate-* ou transition-*, pas de React Three Fiber useFrame()
2. Utilisez les composants Remotion (<Img>, <Video>, <Audio>) pas les éléments HTML natifs
3. Utilisez staticFile() pour tous les actifs du dossier public/
4. Temps en secondes : multipliez par fps de useVideoConfig() pour obtenir les images
5. Aucune bibliothèque d'animation tierce pilotant le mouvement (désactivez leurs animations, utilisez useCurrentFrame() à la place)
6. Chaque concept doit être explicite. Un spectateur qui défile sans contexte doit comprendre la valeur uniquement à partir de la vidéo. Aucune scène ne doit dépendre de connaissances externes. Le texte doit porter l'ensemble du message de manière indépendante. Supposez toujours une audience froide sauf indication contraire du brief.