OfficialVidéo et animationgithub.com

bonnes-pratiques-remotion

Routeur pour toutes les compétences Remotion.

Qu'est-ce que bonnes-pratiques-remotion ?

Ce skill agit comme un routeur central pour l'ensemble des compétences Remotion. Il est conçu pour guider l'agent utilisateur vers le skill le plus adapté en fonction de la tâche demandée par le développeur. Lorsque l'utilisateur souhaite créer une nouvelle vidéo, ajouter des cartes animées, optimiser le balisage React, gérer du multimédia, améliorer l'interactivité, lancer l'aperçu Studio, lancer un rendu, travailler avec des sous-titres, mettre en place une application SaaS, consulter la documentation ou mettre à jour les dépendances, ce skill redirige vers le fichier de référence correspondant. Il est compatible avec Claude Code, Cursor, Codex et tout client agent capable de charger des fichiers markdown. Son fonctionnement repose sur une série de règles conditionnelles : par exemple, si l'utilisateur dit « crée une vidéo », il charge le skill de création de vidéo ; s'il parle de cartes, il charge le skill cartographique. Il contient également des directives spécifiques pour l'ouverture du Studio (avec ou sans navigateur intégré) et rappelle de ne pas écraser les modifications utilisateur inattendues.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/remotion-dev/skills/tree/main/skills/remotion-best-practices

Installed? Explore more Vidéo et animation skills: steipete/video-frames, steipete/summarize, openclaw/openclaw · View all 6 →

Demander à votre IA préférée

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

Documentation

Conserver les modifications utilisateur

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

Si vous détectez un changement surprenant fait 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 Bonnes pratiques de balisage Remotion

Cartes

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

Multimédia

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

Améliorer l'interactivité

En structurant bien le balisage Remotion, nous pouvons permettre aux utilisateurs de modifier interactivement des éléments dans le Studio et d'écrire dans le code. Si pertinent : Bonnes 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 sauf s'il est très explicite. Ils veulent plutôt voir un aperçu interactif. Dès que le projet peut s'exécuter, démarrez Studio et ouvrez l'aperçu dans le navigateur avant de construire ou d'éditer la composition. Gardez-le ouvert pendant que vous travaillez pour que l'utilisateur puisse suivre la progression et orienter.

Si vous utilisez Cursor

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

npx remotion studio

Si vous utilisez un autre client agent 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 exactement l'URL imprimé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 là, 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 réactivera 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 de Studio, chargez Remotion Studio.

Rendre la vidéo

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

L'aperçu offre également une interface de rendu plus intuitive, donc 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à du simple npx remotion render, voir : Bonnes pratiques de rendu

Sous-titres

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

Créer une SaaS, automatisation ou application

Utilisez le skill Remotion SaaS pour des 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.

Consulter les API et la documentation Remotion

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

Mise à jour

Pour mettre à jour Remotion, les paquets associés, les paquets Mediabunny compatibles et les compétences de l'agent Remotion installées, chargez Mise à jour Remotion.

Individual skills in this repo

This repo contains 19 individual skills — each has its own dedicated page.

Skills associés