Communitygithub.com

thanhmati/in-shorts

Routeur pour toutes les compétences Remotion

Qu'est-ce que in-shorts ?

Cette compétence agit comme un routeur central pour plusieurs compétences Remotion spécialisées. Elle détecte l'intention de l'utilisateur (créer une vidéo, configurer un projet, gérer des cartes, des légendes, etc.) et charge automatiquement les fichiers de référence appropriés. Elle inclut également des règles de bonnes pratiques pour l'ouverture de l'aperçu Studio selon le contexte (Cursor, agent avec navigateur intégré ou sans). Utile pour tout développeur utilisant Remotion via des agents IA, elle garantit que les bonnes ressources sont consultées à chaque étape du développement.

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/thanhmati/in-shorts/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 de l'utilisateur

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

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

Création d'une vidéo

Si l'utilisateur demande de fabriquer, 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 écrivez du balisage React pour Remotion, chargez Bonnes pratiques de balisage Remotion

Cartes

Pour les cartes statiques, les routes animées et les marqueurs, 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 rogner, découper des vidéos ou en extraire des 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 de les réécrire dans le code. Si pertinent : Bonnes pratiques d'interactivité

Ouvrir l'aperçu

Si l'utilisateur demande de « fabriquer » une vidéo, « créer » une vidéo, etc. Ne rendez pas la vidéo par défaut, sauf s'il le demande très explicitement. Il veut 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 l'avancement 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

Ceci démarrera un processus long et imprimera l'URL du serveur pour l'aperçu. Si le serveur est déjà démarré, il imprimera l'URL. Si vous utilisez --no-open, ouvrez l'URL exacte imprimée dans le navigateur intégré et vérifiez que le 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 supporte les outils WebMCP. :::

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

Ceci 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 drapeaux CLI de Studio, chargez Remotion Studio.

Rendre la vidéo

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

L'aperçu dispose également d'une interface de rendu plus intuitive, envisagez donc 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

Légendes

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

Création d'un SaaS, d'une automatisation ou d'une application

Utilisez la compétence Remotion SaaS pour en savoir plus 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é.

Recherche de documentation et d'API Remotion

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

Mise à niveau

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

Skills associés