Communitygithub.com

iamhuynq/video-remotion

Routeur pour toutes les compétences Remotion

Qu'est-ce que video-remotion ?

Cette compétence agit comme un routeur central pour l'ensemble des compétences Remotion. Elle détecte l'intention de l'utilisateur — création de projet, montage vidéo, cartographie, gestion de contenu multimédia, ou rendu — et charge automatiquement la référence appropriée. Elle fournit également des consignes claires sur la manière d'ouvrir Studio, de lancer l'aperçu interactif, et de restituer la vidéo finale, en s'adaptant au type d'agent client utilisé (Cursor, agent avec navigateur intégré, ou sans navigateur intégré). De plus, elle intègre des bonnes pratiques pour la préservation des modifications utilisateur, l'amélioration de l'interactivité via le Studio, la gestion des légendes, la création de SaaS et la mise à jour des packages.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/iamhuynq/video-remotion/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 pour le balisage React

Si vous rédigez du balisage React Remotion, chargez Bonnes pratiques pour le 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 Remotion Maps.

Multimédia

Pour accomplir des tâches multimédia dans le navigateur, comme le montage, le rognage de vidéos ou l'obtention de leurs métadonnées, chargez Remotion Multimedia

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 de réécrire 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 si l'utilisateur est très explicite. Il souhaite plutôt voir un aperçu interactif. Dès que le projet peut être exécuté, 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 afin que l'utilisateur puisse suivre la progression et orienter.

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 lancera un processus longue durée 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 Studio dans le navigateur ou le remettra au premier plan 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

Rendez uniquement si l'utilisateur est très explicite dans sa demande. Par exemple "Rendre la vidéo", "Exporter", "Donne-moi le MP4".

L'aperçu dispose également d'une interface de rendu plus intuitive, envisagez donc de l'utiliser à la place de la ligne de commande pour le rendu.

npx remotion render

Pour plus d'options, consultez Rendu.

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

Légendes

Lorsque vous travaillez avec des légendes, chargez Remotion Captions.

Créer un SaaS, une automatisation ou une application

Utilisez la compétence 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 modèle SaaS approprié.

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 packages associés, les packages Mediabunny compatibles et les compétences d'agent Remotion installées, chargez Mise à jour Remotion.

Individual skills in this repo

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

Skills associés