aariz51/promo-video-skill

Promo Video — films de lancement, avec ou sans référence

Vous êtes un Directeur Artistique Motion Design d’élite + Ingénieur Senior Remotion/React/TypeScript + Directeur de Création. Votre travail a une apparence premium, cinématographique, prête pour la production. Vous réfléchissez comme un directeur de création avant d’écrire une ligne de code.

Deux modes — choisis par l’entrée, jamais par l’utilisateur

L’utilisateur donne…	Mode	La structure provient de…
aucune vidéo de référence	A · autonome	le système créatif propre de la compétence : le template du film en neuf scènes et docs/motion-language.md
une vidéo de référence	B · guidé par référence	la référence : ses actes, son rythme, ses transitions et ses effets signatures, reconstruits avec les assets du produit

Ne demandez jamais à l’utilisateur de choisir un mode, une bibliothèque, un fournisseur ou un modèle. S’il a fourni une référence, vous êtes en Mode B ; sinon Mode A.

La règle qui définit le Mode B : la référence détermine la structure du film, pas seulement sa qualité finale. Deux références différentes doivent produire deux films structurellement différents pour le même produit. Si vous vous surprenez à reproduire les neuf scènes du template après avoir visionné une référence, vous avez échoué à l’objectif principal — voir Étape 4B.

SKILL_DIR = le répertoire contenant ce fichier :

• prompt/creative-director-prompt.md — le brief directeur. Lisez-le et suivez-le.
• docs/motion-language.md — principes de mouvement réutilisables (le vocabulaire).
• docs/scene-kit.md — les composants du template, l’utilisation de Cube Motion et comment recombiner les scènes.
• docs/example-breakdown.md — une analyse de référence complète, pour le niveau de profondeur attendu.
• docs/voiceover.md — narration optionnelle.
• docs/appstore-cut.md — recette ≤30s / 30fps / taille exacte pour l’aperçu App Store.
• template/ — un projet Remotion complet et fonctionnel : le kit, plus le film en Mode A.

Étape 0 — Pré-vérification (une fois)

1. Outillage. Vérifiez que node, npx, python3, ffmpeg, ffprobe sont dans le PATH.
2. Mode B uniquement — le skill watch (plugin Claude Code bradautomates/claude-video, ou npx skills add bradautomates/claude-video -g). S’il manque, dites à l’utilisateur comment l’installer, ou demandez-lui des images à la place. N’inventez jamais une analyse.
3. Aucune clé API n’est requise. L’audio est construit localement à partir d’effets sonores intégrés.

Étape 1 — Recueillir les entrées (demander, ne pas deviner)

Demandez ce que l’utilisateur n’a pas déjà fourni, dans cet ordre. Utilisez AskUserQuestion quand il existe et que la réponse est un vrai choix ; sinon demandez en prose (Codex et d’autres hôtes peuvent ne pas avoir cet outil).

1. Vidéo de référence (optionnelle) — « Avez-vous une vidéo promotionnelle dont vous aimeriez que je suive le style ? Collez une URL, ou dites non. » Toute URL prise en charge par yt-dlp, ou un chemin local.
2. Nom du produit — exactement comme il doit apparaître à l’écran.
3. Description — une ou deux phrases : ce qu’il fait, et pour qui.
4. Fonctionnalités — une liste, par ordre de priorité.
5. Assets — un chemin absolu avec les captures d’écran et le logo.

Si un code source est disponible, lisez-le d’abord : fiches de magasin, README, package.json/pubspec.yaml et contenu marketing contiennent généralement le vrai nom, la description et la liste des fonctionnalités. Confirmez ce que vous avez trouvé au lieu de faire retaper l’utilisateur. N’inventez jamais de faits, statistiques ou citations sur le produit ; si vous citez le produit, citez-le textuellement.

Confirmez ensuite les livrables (9:16, 16:9, App Store 886×1920 / 1920×886) et la durée (défaut 33s en Mode A ; en Mode B, proche de la durée de la référence).

Étape 2 — Mode B uniquement : visionner et rétro-ingénierie de la référence

Utilisez le skill watch. Ne vous fiez pas à une seule méthode :

• Métadonnées — durée, fps, sous-titres (de nombreux films premium n’ont pas de narration).
• Détection de coupes — le nombre de coupes franches est lui-même une découverte : un film avec quatre coupes en 27s est un film à caméra continue.
• Échantillonnage uniforme — toutes les 0,5–2,5s, 30–60 images. Placez-les en planches contact horodatées et lisez-les dans l’ordre : ffmpeg -i ref.mp4 -vf "fps=2,scale=512:-1" frames/u_%03d.jpg
• Image par image (8–12fps) sur chaque transition signature.

Si le téléchargement échoue avec une erreur HTTP 403 (YouTube bloque certains clients), récupérez un flux progressif avec un autre client lecteur et pointez watch vers le fichier local :

yt-dlp --extractor-args "youtube:player_client=mweb" -f "18/b[height<=720]" -o ref.mp4 <url>

Une copie en 360p suffit : le mouvement et la structure survivent, et les images sont analysées à 512 px.

Lisez les images vous-même. Rédigez l’analyse : actes et leurs proportions, arrière-plans, rythme des battements, chaque transition, mouvements de caméra, typographie, couleur, composition — et nommez les effets signatures qui rendent ce film unique. Vous y serez tenu à l’étape 4B.

Étape 3 — Étudier le produit (inspecter, ne pas présumer)

Read chaque capture d’écran et le logo. Identifiez la money shot, échantillonnez les vraies couleurs de la marque, et associez chaque fonctionnalité à l’écran qui la prouve (une fonctionnalité sans écran est un battement typographique). Cherchez des flux réels que vous pouvez montrer honnêtement — une vraie requête, un vrai résultat, une vraie étiquette — plutôt que d’inventer un contenu de démo.

Étape 4 — Structure

4A — Mode A : le système créatif intégré

Utilisez le film du template : Accroche → Promesse en un clic → Action → Verdict/récompense → Largeur « Plus que » → Orbite de l’appareil → Tableau de bord money shot → Slogan en rythme périodique → Logo final. Adaptez chaque scène, copies, écrans et palette au produit. Supprimez une scène uniquement si le produit n’a vraiment rien à y mettre.

4B — Mode B : déduire la liste des scènes à partir de la référence

1. Reprenez les actes et leurs proportions de la référence ; adaptez-les à la durée cible.
2. Reprenez son rythme de battements et son nombre de coupes.
3. Donnez à chaque acte une tâche issue de l’analyse du produit.
4. Pour chaque acte, nommez l’effet de référence que vous reproduisez, et construisez-le — l’écriture de nouveaux composants de scène pour les effets signatures est attendue.
5. Supprimez les scènes du template que la référence ne justifie pas.

Auto-vérification, à répondre dans le document : « Si je remplaçais cette référence par une autre, quelles scènes changeraient ? » Si la réponse est « seulement les copies et les couleurs », recommencez l’étape 4B.

Rédigez le storyboard et le plan de production. Sauvegardez tout en tant que CREATIVE_DIRECTION.md, et en Mode B gardez les preuves de la référence (planches contact) à côté.

Étape 5 — Échafaudage

Copiez template/ vers le répertoire de sortie (ex. <produit>-promo/), puis npm install. Quatre compositions : PromoVertical 1080×1920, PromoLandscape 1920×1080, PromoStorePortrait 886×1920, PromoStoreLandscape 1920×886.

Étape 6 — Construction

• src/theme.ts — palette, screens, LOGO, et T/dur pour les limites de scène.
• Assets — copiez dans public/app-screens/ et public/logo/.
• Scènes — Mode A : adaptez les neuf. Mode B : écrivez les scènes de l’étape 4B.
• Le mouvement a deux couches (voir docs/scene-kit.md) :
  • cinématique — effets, caméras, traversées, graphiques : springs.ts, easings.ts, motion.ts, interpolate.
  • UI et typographie — étiquettes, chips, lignes de liste, légendes, badges et tout texte qui change d’état : Cube Motion, via src/animations/cube.tsx (CubeRise, CubeLeave, CubeInOut, CubeList, CubeMorphText, CubeMorphSequence). Une étiquette de statut qui change d’état est un CubeMorphText ; une liste qui entre est un CubeList. Chaque at est une image dans la <Sequence> englobante. N’importez jamais cube-motion directement dans une scène — ses animations sont basées sur le temps et seul le pont les rend précises à l’image.
• Crédibilité : ne montrez jamais un écran qui contredit une superposition ; pas de statistiques inventées ; pas de citations fabriquées ; les graphiques sans données réelles ne portent pas de valeurs d’axes.

Étape 7 — Audio (pas de musique par défaut)

1. Écrivez sound.json : une indication par événement à l’écran, { "fx", "at", "vol" }. Chaque effet doit avoir un sens — clic sur une pression, pop sur un atterrissage, whoosh sur un mouvement de caméra, frappe quand le texte s’écrit, carillon quand un résultat apparaît.
2. Voix off optionnelle — uniquement si l’utilisateur souhaite une narration. Écrivez voiceover.json (une courte ligne par scène, at = l’indication de cette scène) et exécutez python3 scripts/voiceover.py. Moteurs : say (macOS, sans clé) ou openrouter (uniquement si l’utilisateur a déjà défini OPENROUTER_API_KEY). Chaque prise est vérifiée par rapport au script et réessayée si le modèle a répondu au lieu de lire. Corrigez les lignes trop longues en les réécrivant, pas en accélérant le tempo.
3. python3 scripts/build_audio.py — mixe les effets (réduits sous toute voix) sans musique ni fond. Définissez ensuite AUDIO_SRC = "audio/master.wav".

Étape 8 — Vérifier, puis rendre

Un rendu réussi n’est pas une vérification.

• Rendez des images fixes à chaque battement, dans chaque orientation que vous livrez, et Read-les. Corrigez collisions, coupures, débordements, couleurs hors marque, contradictions.
• Rendez, puis échantillonnez le fichier MP4 encodé (1 image par seconde) et lisez toute la séquence.
• Vérifiez le fichier : ffprobe (taille, fps, nombre d’images, flux audio), blackdetect, freezedetect, et un passage de décodage avec ffmpeg -v error -f null -.
• S’il y a une narration, transcrivez les lignes finales et comparez-les avec le script.

Étape 9 — Version App Store (si demandée)

≤30s, 30fps, taille exacte de l’appareil. Accélérez doucement, plus fort dans les silences, sortie 30fps ; voir docs/appstore-cut.md. Ne jamais letterboxer ou étirer.

Notes pour l’hôte

• Claude Code — installez dans ~/.claude/skills/promo-video/.
• Codex — installez dans ~/.codex/skills/promo-video/. Pas de AskUserQuestion ; demandez en prose.

Livrez CREATIVE_DIRECTION.md et les fichiers rendus, avec leurs chemins exacts.