Communitygithub.com

valehgulmetov/my-remotion-video

Routeur pour toutes les compétences Remotion

Qu'est-ce que my-remotion-video ?

Ce skill est un routeur centralisé qui dirige l'agent IA vers la compétence Remotion appropriée en fonction de la tâche demandée par l'utilisateur. Il couvre la création de vidéos, la configuration de projets, les bonnes pratiques de balisage React, l'intégration de cartes, le multimédia, l'interactivité, les sous-titres, le rendu, et bien plus. Il prend en charge les agents comme Claude Code, Cursor et Codex, et fournit des instructions spécifiques pour lancer l'aperçu interactif via `npx remotion studio` en fonction de l'environnement de l'agent (avec ou sans navigateur intégré). Le skill insiste pour que l'agent sollicite une confirmation explicite avant de rendre une vidéo, afin d'éviter des rendus non désirés, et pour préserver les modifications éventuelles de l'utilisateur dans le code.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/valehgulmetov/my-remotion-video/tree/HEAD/.agents/skills/remotion-best-practices

Demander à votre IA préférée

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

Documentation

Préserver les modifications utilisateur

Les utilisateurs peuvent apporter des modifications dans le code en dehors de la conversation.

Si vous détectez un changement surprenant entre-temps, ne l'écrasez pas, supposez qu'il était intentionnel ou demandez une confirmation.

Créer une vidéo

Si l'utilisateur demande de faire, créer ou construire une nouvelle vidéo ou composition, chargez Créer une nouvelle vidéo Remotion, qu'un projet Remotion existe déjà ou non.

Configuration d'un nouveau projet

Si aucun projet Remotion n'existe actuellement, chargez Créer un nouveau projet Remotion

Bonnes pratiques de balisage React

Si vous écrivez du balisage React Remotion, chargez Bonne pratiques de balisage Remotion

Cartes

Pour les cartes statiques, les itinéraires animés et les marqueurs, les explications géographiques, Mapbox, MapLibre, MapTiler, GeoJSON, ou les survols géographiques 3D, chargez Cartes Remotion.

Multimédia

Pour réaliser des tâches multimédia dans le navigateur, telles que le rognage, le recadrage de vidéos ou l'obtention de métadonnées à partir de celles-ci, chargez Multimédia Remotion

Améliorer l'interactivité

En structurant bien le balisage Remotion, nous pouvons permettre aux utilisateurs de modifier de manière interactive les éléments dans le Studio et de réécrire dans le code. Si pertinent : Bonne pratiques d'interactivité

Ouvrir l'aperçu

Si l'utilisateur demande de "faire" une vidéo, "créer" une vidéo, etc. Ne rendez pas la vidéo par défaut à moins qu'il ne soit très explicite. L'utilisateur souhaite plutôt voir un aperçu interactif. Dès que le projet peut s'exécuter, démarrez le Studio et ouvrez l'aperçu dans le navigateur avant de construire ou d'éditer la composition. Gardez-le ouvert pendant que vous travaillez afin que l'utilisateur puisse suivre la progression et diriger.

Si vous utilisez Cursor

Exécutez Studio sans --no-open pour qu'il ouvre le navigateur automatiquement :

npx remotion studio

Si vous utilisez un autre agent client avec un navigateur intégré

Vous pouvez utiliser la commande ci-dessus pour laisser Studio ouvrir le navigateur, ou exécuter :

npx remotion studio --no-open

Cela démarrera un processus long et affichera l'URL du serveur pour l'aperçu. Si le serveur est déjà démarré, il affichera l'URL. Si vous utilisez --no-open, ouvrez l'URL exacte affichée dans le navigateur intégré et vérifiez que Studio se charge. Une fois qu'une composition existe, vérifiez que son aperçu vidéo se charge. Si vous ne pouvez pas l'ouvrir ici, exécutez Studio sans --no-open. Vous pouvez visiter une composition spécifique en naviguant vers /[composition-id], par exemple http://localhost:3000/MapAnimation.

:::note Le Studio prend en charge les outils WebMCP. :::

Si vous n'avez pas de navigateur intégré

Cela ouvrira le Studio dans le navigateur ou le recentrera s'il est déjà ouvert.

npx remotion studio

Plus d'options

Pour lancer un projet dans Remotion Studio, ouvrir son URL locale exacte ou configurer les indicateurs CLI du Studio, chargez Remotion Studio.

Rendre la vidéo

Ne rendez que si l'utilisateur est très explicite dans sa demande. Par exemple "Render la vidéo", "Exporter", "Donne-moi le MP4".

L'aperçu possède également une interface de rendu plus intuitive, alors envisagez de l'utiliser plutôt que la ligne de commande pour le rendu.

npx remotion render

Pour plus d'options, voir Rendu.

Pour un rendu avancé au-delà de simple npx remotion render, voir : Bonne pratiques de rendu

Sous-titres

Lorsque vous travaillez avec des sous-titres, chargez Sous-titres Remotion.

Créer un SaaS, une automatisation ou une application

Utilisez le skill SaaS Remotion pour les connaissances sur les applications SaaS basées sur Remotion, telles que <Player>, le rendu sur Lambda, Vercel, Cloudflare, via Express.js, le rendu côté client, ou pour trouver le bon modèle SaaS.

Rechercher des API et de la documentation Remotion

Pour trouver et lire la documentation actuelle de Remotion, chargez Documentation Remotion.

Mise à niveau

Pour mettre à niveau Remotion, les paquets associés, les paquets Mediabunny compatibles et les skills d'agent Remotion installés, chargez Mise à niveau Remotion.

Skills associés