83.3K+Télécharger
Aller au guide d’utilisation
remotionpar Google Labs

Remotion Skill.

Un skill pour Claude Code et Codex destiné au mouvement et à la vidéo : vidéos de présentation depuis des projets Stitch avec transitions et zooms Remotion.

  • Mouvement et vidéo
  • Video
Télécharger OpenDesignVoir le guide d'utilisation
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Matière préliminaire et titres de section lus depuis le fichier source le 14/09/2026 · 12 764 caractères au total

01 Ce qu'il fait

Ce que fait le skill remotion dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Transforme un projet Stitch existant en vidéo de présentation. L'agent liste les projets et écrans Stitch, télécharge le screenshot.downloadUrl de chaque écran dans assets/screens/, enregistre la largeur, la hauteur, le titre et la description dans un manifeste screens.json, puis construit une composition Remotion à partir de ScreenSlide.tsx et WalkthroughComposition.tsx en utilisant des transitions de fondu, de glissement et de zoom pilotées par ressort, ainsi que des superpositions de texte.

Il s'adresse aux designers et développeurs qui ont déjà conçu des écrans dans Stitch et qui sont à l'aise avec Node.js et React, car Remotion effectue le rendu de composants React. Les images sont par défaut à 30 fps, les écrans durent de 3 à 5 secondes, et le résultat est prévisualisé dans Remotion Studio avant le rendu d'un MP4.

Ce qu'il produit

  • Un manifeste screens.json contenant le nom du projet, les identifiants d'écrans, les titres, les descriptions, les chemins d'images, les dimensions et la durée par écran
  • Fichiers de composants Remotion générés pour la présentation
  • Configuration du projet Remotion mise à jour
Voir l'exemple de prompt ↗

Fonctionnement

  1. 01
    Localiser les MCP Servers

    Exécutez list_tools et identifiez les préfixes des serveurs Stitch et Remotion afin que les appels suivants soient correctement adressés.

  2. 02
    Récupérer les écrans depuis Stitch

    Trouvez le projet, listez ses écrans, puis récupérez les métadonnées de chaque écran pour obtenir l'URL de la capture d'écran, les dimensions et la description.

  3. 03
    Préparer les captures d'écran

    Téléchargez chaque capture d'écran avec web_fetch ou curl dans un répertoire de préparation, dans l'ordre où la présentation doit se dérouler.

  4. 04
    Structurer le projet Remotion

    Réutilisez un projet Remotion existant s'il y en a un, sinon créez un projet TypeScript vierge dans un répertoire video/.

  5. 05
    Construire la composition

    Écrivez ScreenSlide.tsx pour l'animation par écran, WalkthroughComposition.tsx pour l'enchaînement et les transitions, ainsi que config.ts pour les fps et les dimensions.

  6. 06
    Prévisualiser, puis effectuer le rendu

    Itérez dans Remotion Studio sur le timing et les valeurs de ressort, puis effectuez le rendu du fichier final via le CLI ou l'outil de rendu Remotion.

02 Trouvez celui qui vous convient

Quand utiliser le skill remotion

Utilisez le skill remotion dans Claude Code ou Codex lorsque la tâche concerne le motion et la vidéo de ce type. La portée et les limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

  • Vous avez déjà un projet Stitch contenant des écrans conçus à présenter
  • Vous voulez que des éléments d'UI spécifiques soient mis en avant avec des pointeurs animés et des anneaux de zone sensible
  • Vous créez une vidéo de parcours utilisateur étape par étape plutôt qu'un simple diaporama
  • Vous connaissez déjà les capacités vidéo de Remotion et souhaitez que ses idiomes soient respectés

Connaître les limites

  • Vous n'avez pas accès au Stitch MCP Server, qui est un prérequis obligatoire
  • Personne dans l'équipe ne connaît React, puisque Remotion compose des composants React
  • Les captures d'écran ne peuvent pas être récupérées en pleine résolution, ce que le fichier désigne comme la cause d'un rendu flou

Quoi fournir

  • Identifiant du projet StitchSoit un ID de projet déjà connu, soit un titre que l'agent peut rechercher lorsque l'ID n'est pas fourni.
  • Quels écrans doivent figurer dans la vidéoLa liste des écrans du projet est examinée afin que tous les écrans du parcours soient identifiés avant le téléchargement.
  • Dimensions des écransLa largeur et la hauteur de chaque écran sont nécessaires pour que la composition mette à l'échelle correctement la capture d'écran.
  • Titres et descriptionsLes titres et descriptions des écrans deviennent le texte contextuel affiché sur chaque image.
  • Ordre de parcours prévuLes assets sont organisés dans l'ordre dans lequel le spectateur doit les rencontrer, et non dans l'ordre renvoyé par Stitch.

03 Dans le skill

Règles que le Skill remotion donne à Claude Code et Codex

8 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

  1. Les écrans durent par défaut 3-5 secondes

    Chaque écran est maintenu pendant une durée configurable, avec 3-5 secondes par écran comme valeur par défaut indiquée.

  2. Composer à 30 fps

    config.ts définit le taux d'images, et la valeur par défaut est 30 fps.

  3. Passer à 60 fps en cas de saccades

    Si les animations paraissent saccadées, augmentez le taux d'images à 60 fps et ajustez l'amortissement du spring plutôt que de modifier le design.

  4. Zoomer avec spring()

    Les effets de zoom doivent être pilotés par des animations spring appliquées aux éléments d'UI importants mis en avant.

  5. Conserver le ratio d'aspect natif

    Utilisez les dimensions réelles des écrans Stitch ou mettez-les à l'échelle proportionnellement, sans jamais déformer la mise en page.

  6. Piloter la construction à partir d'un manifeste

    Les données des écrans résident dans un fichier manifeste afin que l'ordre, les titres et les durées puissent être mis à jour sans toucher au code des composants.

  7. Garder un timing stable

    La durée d'affichage des écrans reste constante tout au long du walkthrough, sauf lorsqu'un écran spécifique doit être mis en avant.

  8. Commencer par des fondus

    Commencez par des transitions en fondu simples et n'ajoutez des animations complexes qu'une fois que le montage simple fonctionne.

04 Mettez-le en pratique

Installer remotion dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter remotion à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

Formulaire CLI générique skills pour plugins/stitch-build/skills/remotion/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Adaptez ce prompt avec votre propre contenu et contraintes, puis exécutez-le dans Claude Code ou Codex.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

Source : exemple SKILL.md (verbatim).

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

  • Prévisualisez la composition dans Remotion Studio avant de lancer un rendu
  • Parcourez la checklist de finalisation fournie
  • Vérifiez que les superpositions de texte apparaissent au bon moment sur chaque écran
  • Confirmez que les dimensions de l'écran correspondent à la taille de la composition et repositionnez le texte selon la taille réelle de l'écran
  • Assurez-vous que le texte superposé reste lisible tout au long, pas seulement sur la première image
  • Si le mouvement paraît saccadé, testez la piste à 60fps avec un amortissement de ressort révisé

Dans OpenDesign, remotion est intégré : Plugins → Skills, sélectionnez-le dans la barre supérieure.

Télécharger OpenDesignLire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branche main
Fichier du skill
plugins/stitch-build/skills/remotion/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 0337446
License
Apache-2.0 D'après LICENSE.
Étoiles du dépôt
8 304 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt google-labs-code/stitch-skills, qui contient 12 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour remotion.
Vérifié par OpenDesign
14/09/2026 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Inclus dans OpenDesign main (vérifié le 28/08/2026) ; aucune exécution en direct n'a été enregistrée sur cette page.

Dans le SKILL.md

  1. AperçuCe que produit globalement le workflow de walkthrough Stitch plus Remotion
  2. PrérequisServeurs MCP requis, Node.js, npm, et un projet Stitch avec des écrans
  3. Récupération et réseauDécouverte des préfixes MCP, recherche de projets et d'écrans, téléchargement des ressources
  4. Stratégie de composition vidéoArchitecture de ScreenSlide, WalkthroughComposition et de la configuration, ainsi que transitions et superpositions
  5. Étapes d'exécutionRassembler les ressources, créer le manifeste, générer les composants, prévisualiser, effectuer le rendu
  6. Fonctionnalités avancéesZones interactives, intégration de voix off, et extraction automatique de texte depuis le HTML Stitch
  7. Structure des fichiersOrganisation attendue des répertoires du projet vidéo et du manifeste
  8. Intégration avec les skills RemotionInstallation des skills d'agent propres à Remotion pour l'animation et les recommandations de performance
  9. Modèles courantsTrois recettes : diaporama simple, mise en avant de fonctionnalité, et parcours utilisateur
  10. Résolution des problèmesCorrections pour captures d'écran floues, texte mal aligné, animation saccadée, échecs de build, problèmes de timing
  11. Bonnes pratiquesFormat d'image, timing cohérent, texte lisible, transitions fluides, prévisualisation, optimisation des ressources
  12. Conseils pour réussirCommencez simple, réutilisez les modèles Remotion, utilisez des manifestes, prévisualisez souvent, accessibilité, dimensionnement pour la plateforme
Description du skill lui-même
« Générer des vidéos de présentation à partir de projets Stitch en utilisant Remotion avec des transitions fluides, du zoom et des incrustations de texte »

Description front-matter tirée du SKILL.md. Le fichier complet fait environ 12 764 caractères. Lire le fichier complet sur GitHub.

06 Avant d'installer

Questions sur le skill remotion

Les réponses proviennent du SKILL.md tel que lu le 2026-09-14, et non d'une exécution enregistrée.

Que dois-je avoir installé avant que cela puisse fonctionner ?

L'accès au Stitch MCP Server et soit au Remotion MCP Server soit à la Remotion CLI, plus Node.js et npm, ainsi qu'un projet Stitch qui possède déjà des écrans conçus. Une familiarité avec Remotion et les composants React est recommandée, sans être obligatoire.

Dois-je utiliser le serveur MCP Remotion, ou la CLI suffit-elle ?

La CLI suffit. Après avoir prévisualisé dans Remotion Studio, vous pouvez effectuer le rendu avec npx remotion render WalkthroughComposition output.mp4, ou appeler l'outil de rendu Remotion avec les détails de la composition si ce serveur est disponible.

Combien de temps chaque écran reste-t-il affiché ?

Trois à cinq secondes par écran par défaut, stockées comme une durée par écran dans le manifeste afin que vous puissiez ajuster chaque écran individuellement. La durée est définie dans le manifeste et prévisualisée dans Remotion Studio.

Remotion

Exécuter remotion sur une vraie tâche de motion et vidéo.

Le skill remotion est inclus dans OpenDesign. Téléchargez l'application, choisissez le skill dans Plugins → Skills, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesignParcourir tous les skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion