Communitygithub.com

seraph115/superpowers-video (Compétence Remotion)

Compétence pour générer et éditer des vidéos programmatiquement avec Remotion, en utilisant React et des compositions paramétrées.

Qu'est-ce que superpowers-video (Compétence Remotion) ?

Cette compétence permet à un agent IA de créer, modifier et composer des vidéos de manière automatisée grâce à Remotion. Elle est idéale pour produire des contenus vidéo dynamiques, des animations, des présentations ou des extraits marketing directement depuis des instructions textuelles. La compétence exploite l'écosystème Remotion (React, compositions, rendu côté serveur) pour transformer des descriptions en scripts vidéo exécutables. Elle supporte des environnements comme Claude Code, Cursor ou Codex, et exige la configuration d'un projet Remotion ainsi que la définition de compositions paramétrées. L'agent peut ainsi orchestrer la génération de vidéos sans intervention manuelle, ce qui est particulièrement utile pour les workflows d'automatisation de contenu, les démos techniques ou les pipelines de production multimédia. L'utilisateur doit fournir les spécifications de la vidéo (durée, séquences, texte, assets) que la compétence traduit en code React et en fichiers de composition Remotion.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add seraph115/superpowers-video

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 superpowers-video (Compétence Remotion) ?

Compétence Remotion

Cette compétence permet à un agent IA de générer et d'éditer des vidéos de manière programmatique en utilisant la bibliothèque Remotion. Elle transforme des instructions textuelles en compositions vidéo complètes, exploitant la puissance de React pour le rendu.

Prérequis

  • Node.js installé
  • Projet Remotion initialisé (npx create-video)
  • Connaissances de base en React

Utilisation

  1. Définir une composition dans le fichier src/Root.tsx
  2. Créer un composant React pour la scène vidéo
  3. Appeler la compétence avec les paramètres souhaités (durée, texte, couleurs, etc.)

Exemple de composition

import { Composition } from 'remotion';
import { MyVideo } from './MyVideo';

export const Root: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={120}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

Paramètres pris en charge

  • durationInFrames : Durée en images
  • fps : Images par seconde (défaut : 30)
  • width : Largeur en pixels
  • height : Hauteur en pixels
  • inputProps : Propriétés personnalisées passées au composant

Commandes utiles

# Rendu local
npx remotion render src/index.ts MyVideo out/video.mp4

# Lancer le studio
npx remotion studio

# Voir la liste des compositions
npx remotion compositions

Intégration avec l'agent

L'agent peut automatiquement :

  • Générer le code React pour une nouvelle composition
  • Ajouter la composition au fichier Root.tsx
  • Lancer le rendu ou le studio
  • Modifier les paramètres existants

Limitations

  • Nécessite un projet Remotion préexistant
  • Le rendu vidéo peut être long selon la complexité
  • Dépend de l'environnement Node.js

Ressources

Skills associés