Communitygithub.com

Production vidéo Remotion

Créez des vidéos précises, reproductibles et basées sur React avec Remotion, incluant compositions, transitions, textes animés, médias, audio, sous-titres et validation du rendu.

Qu'est-ce que Production vidéo Remotion ?

Cette compétence permet aux agents IA (comme Claude Code, Cursor ou Codex) de produire des vidéos pilotées par code en utilisant Remotion et React. Elle automatise l'ensemble du flux : initialisation de projet, définition des compositions, dimensions, FPS, durée et propriétés, utilisation des API basées sur les images (`useCurrentFrame()`, `useVideoConfig()`), séquençage de scènes avec transitions, gestion des médias et ressources statiques, prévisualisation Studio et rendu final avec validation de la durée, des dimensions, du FPS, de l'audio et des images représentatives. La compétence insiste sur l'évitement des calculs React coûteux par image, la reproductibilité des chemins de polices, images, audio et vidéo, ainsi que la vérification des erreurs courantes (mathématiques d'images invalides, durées négatives, ressources manquantes, interpolation non bornée). Elle s'appuie sur les compétences officielles Remotion hébergées sur `remotion-dev/skills` et peut être installée via `npx skills add remotion-dev/skills`. Son usage est particulièrement adapté aux développeurs souhaitant générer des vidéos programmatiquement, avec une précision image par image.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/studio1111/AI-Motion-Graphics-Studio/tree/main/.agents/skills/remotion-video-production

Demander à votre IA préférée

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

Documentation

Que fait Production vidéo Remotion ?

Amont

Compétences officielles Remotion pour agents : https://github.com/remotion-dev/skills Documentation officielle : https://www.remotion.dev/docs/ai/skills

Pour l'ensemble complet des compétences officielles et leurs fichiers de règles référencés, installez-les dans l'espace de travail consommateur en utilisant npx skills add remotion-dev/skills. Cette compétence locale est un guide de workflow, non une copie octet par octet de la distribution amont.

Workflow

  1. Inspecter le projet existant et préserver les modifications de l'utilisateur.
  2. Si aucun projet n'existe, utiliser le workflow de création officiel et vérifier la compatibilité des packages.
  3. Définir explicitement l'ID de composition, les dimensions, les FPS, la durée, les propriétés et les emplacements des ressources.
  4. Utiliser les API basées sur les images comme useCurrentFrame() et useVideoConfig() ; ne pas compter sur les animations CSS basées sur le temps réel pour le timing du rendu.
  5. Utiliser les helpers d'interpolation/ressort avec des courbes d'accélération intentionnelles et des plages clampées lorsque cela est approprié.
  6. Ordonner les scènes et les transitions de sorte que leurs comptes d'images et leurs chevauchements produisent la durée totale souhaitée.
  7. Utiliser les composants médias pris en charge et les helpers de ressources statiques ; attendre les ressources asynchrones avant le rendu.
  8. Lancer l'aperçu Studio et l'inspecter avant d'éditer ou de rendre lorsque l'environnement le permet.
  9. Rendre uniquement sur demande, puis inspecter le fichier exporté et vérifier la durée, les dimensions, les FPS, l'audio et les images représentatives.

Règles de qualité

  • Éviter le travail React inutile par image et les effets coûteux.
  • Maintenir la reproductibilité des chemins de polices, images, audio et vidéos.
  • Éviter les calculs d'images invalides, les durées négatives, les ressources manquantes et l'interpolation non bornée.
  • Vérifier l'ajustement du texte, l'orientation RTL, le timing des sous-titres et la continuité visuelle.
  • Vérifier la licence Remotion actuelle et les conditions d'utilisation commerciale avant le déploiement.

Skills associés