Communitygithub.com

making-promo-videos

À utiliser lors de la création, planification, montage, ré-étalonnage ou rendu d'une bande-annonce, d'un film de lancement, d'une mise à jour produit ou d'une vidéo sociale en code (Remotion), avec mouvements de caméra, synchronisation musicale, voix off, effets sonores et rendus verticaux plus horizontaux.

Qu'est-ce que making-promo-videos ?

Cette compétence permet de réaliser des vidéos promotionnelles en code avec Remotion, en suivant un workflow structuré. Elle repose sur une carte de synchronisation unique qui coordonne l'image, la caméra, la musique et les effets sonores : un ajustement de timing répercute tous les éléments. Le processus inclut l'édition d'un 'casting board' avant toute modification finale, afin que le directeur entende et voie les options (voix, pistes musicales, looks). Les rendus s'effectuent d'abord en 720p pour validation, puis en version finale complète en formats horizontal (1920x1080) et vertical (1080x1920). Des règles audio strictes garantissent une qualité professionnelle : musique sous licence, voix via TTS commercial, effets sonores déterministes, et mixage WAV séparé pour éviter les latences. Cette compétence est principalement conçue pour les outils d'agents comme Claude Code, Cursor, ou Codex, et nécessite un dépôt dédié à la vidéo.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/HenryCh-hong/making-promo-videos/tree/main/skills/making-promo-videos

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Création de vidéos promotionnelles en code

Aperçu

Un film promotionnel réalisé en code (Remotion : composants React rendus image par image). Il fonctionne selon quatre principes :

  1. Une carte de synchronisation unique coordonne tout. L'image, la caméra, la musique et les effets sonores lisent tous des repères nommés, de sorte que modifier le timing d'un élément les modifie tous.
  2. Choisir avant de monter. Le directeur entend et voit les options avant que le film ne change.
  3. Les prévisualisations avant les versions finales.
  4. Chaque affirmation est fidèle au produit.

Règles maison d'abord : lisez les propres règles du dépôt vidéo avant toute chose : son README, son CLAUDE.md ou un fichier house-rules.md à la racine du dépôt. Elles remplacent les valeurs par défaut ci-dessous. Le fichier house-rules.example.md dans ce dossier est un modèle pour en rédiger une.

Configuration d'un nouveau film

  • Un film par branche ou répertoire de travail, dans un dépôt dédié aux vidéos, jamais dans l'application produit. Chaque film possède son propre dossier : src/videos/<nom>/.
  • Copiez le dossier templates/ de cette compétence dans ce dossier :
    • sections.ts : la carte de synchronisation, HITS, TRACK_BPM
    • film-camera.tsx : la caméra 2.5D
    • shots.ts : la liste des plans
    • Film.tsx : le squelette de la composition, avec l'enregistrement Root.tsx dans son en-tête
  • Copiez templates/render.sh et scripts/*.py dans le dossier scripts/ du dépôt.
  • Dépendances, épinglées à une version exacte ensemble : remotion, @remotion/cli, @remotion/motion-blur. Pour les scripts audio : ffmpeg, plus numpy et soundfile.
  • Une composition génère les deux formats à partir d'une propriété format (horizontal 1920x1080, vertical 1080x1920). Chaque format est mis en page indépendamment et n'est jamais letterboxé.

Flux de travail

  1. Cahier des charges du storyboard (utilisez la compétence superpowers:brainstorming si elle est installée). Écrivez-le dans docs/.../YYYY-MM-JJ-<nom>-design.md. Vérifiez chaque affirmation à l'écran par rapport au code produit et aux fonctionnalités en direct, et formulez-la comme le produit le fait.
  2. Casting board avant toute édition du film. Présentez les voix (avec les lignes lues à voix haute), les sons de frappe, plusieurs options musicales, et les brouillons d'apparence ou de personnage, chacun avec un code (A1, B4, M1…). Rendez les brouillons visuels sous forme de petites compositions de board, publiez la page en privé, et attendez les choix du directeur. Ne choisissez jamais une voix, une piste ou une apparence en silence.
  3. Construction.
    • La copie et le timing résident dans la configuration.
    • Les scènes, plans et sons référencent des noms HITS, jamais des nombres bruts.
    • Travail de caméra : lisez camera.md.
  4. Prévisualisation en 720p (scripts/render.sh <Comp> <format> preview <nom>-preview-vN-720p). Rapportez ce que vous avez vérifié, ce que vous n'avez pas pu tester, et tout ce que vous avez modifié au-delà de la demande.
  5. Versions finales uniquement après approbation : taille réelle, les deux formats. Les longs rendus échouent si la machine se met en veille, vérifiez donc l'alimentation d'abord.
  6. Commitez sur la branche du film. Fusionnez ou poussez uniquement sur demande. Les films antérieurs doivent rester inchangés.

Règles audio

RèglePourquoi
Rendre l'image muette, puis un fichier WAV séparé --codec=wav, puis scripts/mux.py (-15 LUFS avec un limiteur).L'AAC intégré de Remotion retarde toute la bande sonore de 43 ms.
La musique est sous licence commerciale ou générée, et chaque fichier est enregistré dans un CREDITS.md.Certains packs d'effets sonores "gratuits" ne sont pas sous licence pour un usage commercial.
Pour ajuster une piste choisie : scripts/beatgrid.py track [bars] [arc] donne le BPM et le temps fort. Définissez TRACK_BPM, puis coupez la piste avec music-edit.py (mesures entières, fondu enchaîné sur le temps fort) ou fit-track.py (une fenêtre droite).Le film s'adapte à la piste, pas l'inverse.
Les voix proviennent uniquement d'un TTS avec une licence commerciale (Kokoro-82M est sous licence Apache-2.0). N'utilisez jamais macOS say.La licence de say est personnelle et non commerciale.
Les effets sonores sont générés de manière déterministe. Ajoutez chaque nouveau son à la fin avec son propre PRNG.Sinon, chaque fichier ultérieur change.
N'appelez jamais Math.random() dans un rendu. Utilisez hash() de film-camera.tsx.Une image doit être rendue de manière identique à chaque fois.

Assurance qualité avant toute remise

  • Vérification de type.
  • Niveau de bruit environ -15 LUFS et pic réel sous -1 dBTP (ffmpeg -af ebur128). Le pic du WAV brut reste sous 0,99, donc rien n'écrête.
  • Les effets sonores arrivent sur leurs images repères.
  • Tout code QR se décode à la fois en 1080p et en 720p.
  • Rendez des images fixes de chaque section modifiée dans les deux formats (Remotion renderStill) et regardez-les vous-même. Les agents de révision ratent les bords coupés, et une révision par un petit modèle rapide n'est pas une révision valide.

Erreurs courantes

ErreurCorrection
Animation liée à une image, un temps ou une seconde bruteAjoutez un repère nommé dans sections.ts et référencez-le.
Un roulis ou une inclinaison de caméra qui fuit dans les plans suivantsLes clés se propagent, donc réinitialisez le champ (roll: 0).
Versions finales rendues avant approbationEnvoyez d'abord une prévisualisation en 720p.
Une voix, piste ou apparence que le directeur n'a jamais entendue ou vueMettez-la d'abord sur le casting board.
Un mp4 à passage unique avec audioImage muette, puis WAV, puis mux.
Travail temporaire dans /tmp pour un film de plusieurs joursLe système nettoie. Utilisez un vrai dossier de répertoire de travail.
Commandes Shell avec $(...) ou boucles refusées en mode automatiqueMettez la logique dans un fichier de script.

Skills associés