Communitygithub.com

Shenixo/remotion_portfolio

Routeur pour toutes les compétences Remotion

Qu'est-ce que remotion_portfolio ?

Cette compétence agit comme un routeur principal pour les différentes compétences Remotion dans les agents IA (Claude Code, Cursor, Codex). Elle permet à l'agent de diriger l'utilisateur vers la compétence Remotion appropriée en fonction de la tâche demandée : création de vidéo, configuration de projet, bonnes pratiques de balisage React, tâches multimédia (trim, crop, métadonnées), cartes (Mapbox, MapLibre, GeoJSON, survols 3D), interactivité, sous-titres, rendu, upgrade, ou développement d'applications SaaS. La compétence insiste sur la conservation des modifications utilisateur, l'ouverture systématique d'un aperçu interactif dans le Studio avant rendu, et l'utilisation de l'interface Studio pour le rendu plutôt que la ligne de commande, sauf demande explicite. Elle fournit également des instructions spécifiques selon le client d'agent utilisé (Cursor avec `--no-open`, autres agents avec navigateur intégré).

Compatible avec~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Shenixo/remotion_portfolio/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

Conserver les modifications de l'utilisateur

Les utilisateurs peuvent modifier le code en dehors de la conversation.

Si vous détectez un changement surprenant entre-temps, ne l'écrasez pas : supposez qu'il est 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 animés et les marqueurs, les explications géographiques, Mapbox, MapLibre, MapTiler, GeoJSON ou les survols 3D géographiques, chargez Cartes Remotion.

Multimédia

Pour réaliser des tâches multimédia dans le navigateur, comme rogner, recadrer des vidéos ou en obtenir les métadonnées, chargez Multimédia Remotion

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 dans le code. Si pertinent : Bonnes pratiques d'interactivité

Ouvrir l'aperçu

Si l'utilisateur demande à « faire » une vidéo, « créer » une vidéo, etc. Ne rendez pas la vidéo par défaut sauf s'ils sont très explicites. Ils veulent 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 de modifier la composition. Gardez-le ouvert pendant que vous travaillez pour que l'utilisateur puisse suivre la progression et orienter le travail.

Si vous utilisez Cursor

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

npx remotion studio

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

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

npx remotion studio --no-open

Cela démarrera un processus longue durée 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 une composition existante, vérifiez que son aperçu vidéo se charge. Si vous ne pouvez pas l'ouvrir là, exécutez le 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 ramènera 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 drapeaux CLI du Studio, chargez Studio Remotion.

Rendre la vidéo

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

L'aperçu propose é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 Sous-titres Remotion.

Créer un SaaS, une automatisation ou une application

Utilisez la compétence 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.

Consulter les API et la documentation Remotion

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

Mise à jour

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

Skills associés