Anhvu1107/all-agent-skill

Vidéos de démonstration Stitch vers Remotion

Règle de lecture sélective

Commencez par :

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

Ensuite, chargez uniquement les documents, scripts, ressources ou exemples hérités qui correspondent à la tâche réelle de l'utilisateur.

Vous êtes un spécialiste de la production vidéo axé sur la création de vidéos de démonstration attrayantes à partir de maquettes d'applications. Vous combinez les capacités de récupération d'écrans de Stitch avec la génération vidéo programmatique de Remotion pour produire des présentations fluides et professionnelles.

Aperçu

Ce skill vous permet de créer des vidéos de démonstration qui présentent les écrans d'une application avec des transitions professionnelles, des effets de zoom et des superpositions de texte contextuelles. Le workflow récupère les écrans des projets Stitch et les orchestre dans une composition vidéo Remotion.

Prérequis

Requis :

• Accès au serveur MCP Stitch
• Accès au serveur MCP Remotion (ou à l'interface en ligne de commande Remotion)
• Node.js et npm installés
• Un projet Stitch avec des écrans conçus

Recommandé :

• Connaissance des capacités vidéo de Remotion
• Compréhension des composants React (Remotion utilise React)

Récupération et mise en réseau

Étape 1 : Découvrir les serveurs MCP disponibles

Exécutez list_tools pour identifier les serveurs MCP disponibles et leurs préfixes :

• MCP Stitch : Recherchez le préfixe stitch: ou mcp_stitch:
• MCP Remotion : Recherchez le préfixe remotion: ou mcp_remotion:

Étape 2 : Récupérer les informations du projet Stitch

1. Recherche de projet (si l'ID du projet n'est pas fourni) :

   • Appelez [prefixe_stitch]:list_projects avec filter: "view=owned"
   • Identifiez le projet cible par son titre (ex. "Application Calculatrice")
   • Extrayez l'ID du projet du champ name (ex. projects/13534454087919359824)

2. Récupération des écrans :

   • Appelez [prefixe_stitch]:list_screens avec l'ID du projet (uniquement numérique)
   • Examinez les titres des écrans pour identifier tous les écrans de la démonstration
   • Extrayez les ID des écrans du champ name de chaque écran

3. Récupération des métadonnées des écrans : Pour chaque écran :

   • Appelez [prefixe_stitch]:get_screen avec projectId et screenId
   • Récupérez :
     • screenshot.downloadUrl — Ressource visuelle pour la vidéo
     • htmlCode.downloadUrl — Optionnel : pour extraire le texte/contenu
     • width, height — Dimensions de l'écran pour une mise à l'échelle correcte
     • Titre et description de l'écran pour les superpositions de texte

4. Téléchargement des ressources :

   • Utilisez web_fetch ou Bash avec curl pour télécharger les captures d'écran
   • Enregistrez dans un répertoire de staging : assets/screens/{nom-ecran}.png
   • Organisez les ressources dans l'ordre du flux de démonstration prévu

Étape 3 : Configurer le projet Remotion

1. Vérifiez l'existence d'un projet Remotion :

   • Recherchez remotion.config.ts ou package.json avec des dépendances Remotion
   • S'il existe, utilisez la structure de projet existante

2. Créez un nouveau projet Remotion (si nécessaire) :

   npm create video@latest -- --blank
   

   • Choisissez le modèle TypeScript
   • Configurez dans un répertoire video/ dédié

3. Installez les dépendances :

   cd video
   npm install @remotion/transitions @remotion/animated-emoji
   

Stratégie de composition vidéo

Architecture

Créez une composition Remotion modulaire avec ces composants :

1. ScreenSlide.tsx — Composant d'affichage d'écran individuel

   • Props : imageSrc, title, description, width, height
   • Fonctionnalités : Animation de zoom, transitions par fondu
   • Durée : Configurable (3 à 5 secondes par écran par défaut)

2. WalkthroughComposition.tsx — Composition vidéo principale

   • Séquences de plusieurs composants ScreenSlide
   • Gère les transitions entre les écrans
   • Ajoute des superpositions de texte et des annotations

3. config.ts — Configuration vidéo

   • Fréquence d'images (30 ips par défaut)
   • Dimensions vidéo (correspondent aux dimensions des écrans Stitch ou mises à l'échelle)
   • Calcul de la durée totale

Effets de transition

Utilisez @remotion/transitions de Remotion pour des effets professionnels :

• Fondu : Transition en fondu enchaîné entre les écrans

  import {fade} from '@remotion/transitions/fade';
  

• Glissement : Transitions directionnelles

  import {slide} from '@remotion/transitions/slide';
  

• Zoom : Effets de zoom avant/arrière pour mettre en valeur

  • Utilisez l'animation spring() pour un zoom fluide
  • Appliquez aux éléments importants de l'interface utilisateur

Superpositions de texte

Ajoutez des informations contextuelles à l'aide du rendu de texte de Remotion :

1. Titres des écrans : Affichez en haut ou en bas de chaque image
2. Annotations de fonctionnalités : Mettez en évidence des éléments spécifiques de l'interface avec des pointeurs animés
3. Descriptions : Faites apparaître progressivement le texte descriptif pour chaque écran
4. Indicateur de progression : Montrez la position actuelle de l'écran dans la démonstration

Étapes d'exécution

Étape 1 : Rassembler les ressources des écrans

1. Identifiez le projet Stitch cible
2. Listez tous les écrans du projet
3. Téléchargez les captures d'écran pour chaque écran
4. Organisez-les dans l'ordre du flux de démonstration
5. Créez un fichier manifeste (screens.json) :

{
  "projectName": "Application Calculatrice",
  "screens": [
    {
      "id": "1",
      "title": "Écran d'accueil",
      "description": "Interface principale de la calculatrice avec pavé numérique",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Vue de l'historique",
      "description": "Affichage des calculs précédents",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Étape 2 : Générer les composants Remotion

Créez les composants vidéo en suivant les meilleures pratiques de Remotion :

1. Créez ScreenSlide.tsx :

   • Utilisez useCurrentFrame() et spring() pour les animations
   • Implémentez les effets de zoom et de fondu
   • Ajoutez des superpositions de texte avec un timing approprié

2. Créez WalkthroughComposition.tsx :

   • Importez le manifeste des écrans
   • Séquences d'écrans avec les composants <Sequence>
   • Appliquez les transitions entre les écrans
   • Calculez le timing et les décalages appropriés

3. Mettez à jour remotion.config.ts :

   • Définissez l'ID de composition
   • Configurez les dimensions vidéo
   • Définissez la fréquence d'images et la durée

Ressources de référence :

• Utilisez resources/screen-slide-template.tsx comme point de départ
• Suivez resources/composition-checklist.md pour l'exhaustivité
• Consultez les exemples dans le répertoire examples/walkthrough/

Étape 3 : Prévisualiser et affiner

1. Démarrez Remotion Studio :

   npm run dev
   

   • Ouvre un aperçu basé sur le navigateur
   • Permet l'édition et l'affinement en temps réel

2. Ajustez le timing :

   • Assurez-vous que chaque écran a une durée d'affichage appropriée
   • Vérifiez que les transitions sont fluides
   • Vérifiez le timing des superpositions de texte

3. Affinez les animations :

   • Ajustez les configurations spring pour les effets de zoom
   • Modifiez les fonctions d'assouplissement pour les transitions
   • Assurez-vous que le texte est lisible à tout moment

Étape 4 : Rendre la vidéo

1. Rendu avec l'interface en ligne de commande Remotion :

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternative : Utilisez le MCP Remotion (si disponible) :

   • Appelez [prefixe_remotion]:render avec les détails de la composition
   • Spécifiez le format de sortie (MP4, WebM, etc.)

3. Options d'optimisation :

   • Définissez le niveau de qualité (--quality)
   • Configurez le codec (--codec h264 ou h265)
   • Activez le rendu parallèle (--concurrency)

Fonctionnalités avancées

Zones interactives

Mettez en évidence les éléments cliquables ou les fonctionnalités importantes :

import {interpolate, useCurrentFrame} from 'remotion';

const Hotspot = ({x, y, label}) => {
  const frame = useCurrentFrame();
  const scale = spring({
    frame,
    fps: 30,
    config: {damping: 10, stiffness: 100}
  });
  
  return (
    <div style={{
      position: 'absolute',
      left: x,
      top: y,
      transform: `scale(${scale})`
    }}>
      <div className="pulse-ring" />
      <span>{label}</span>
    </div>
  );
};

Intégration de la voix off

Ajoutez une narration à la démonstration :

1. Générez un script de voix off à partir des descriptions d'écran
2. Utilisez la synthèse vocale ou enregistrez l'audio
3. Importez l'audio dans Remotion avec le composant <Audio>
4. Synchronisez le timing des écrans avec le rythme de la voix off

Extraction dynamique de texte

Extrayez le texte du code HTML de Stitch pour des annotations automatiques :

1. Téléchargez htmlCode.downloadUrl pour chaque écran
2. Analysez le HTML pour extraire les éléments textuels clés (titres, boutons, étiquettes)
3. Générez des annotations automatiques pour les éléments importants de l'interface
4. Ajoutez à la composition sous forme de superpositions de texte minutées

Structure des fichiers

projet/
├── video/                      # Répertoire du projet Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Captures d'écran Stitch téléchargées
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifeste des écrans
└── output.mp4                  # Vidéo rendue

Intégration avec les compétences Remotion

Remotion maintient ses propres compétences d'agent qui définissent les meilleures pratiques. Consultez-les pour des techniques avancées :

• Dépôt : https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Installation : npx skills add remotion-dev/skills

Compétences Remotion clés à exploiter :

• Timing et assouplissement des animations
• Modèles d'architecture de composition
• Optimisation des performances
• Synchronisation audio

Modèles courants

Modèle 1 : Diaporama simple

Démonstration de base avec transitions en fondu :

• 3 à 5 secondes par écran
• Transitions en fondu enchaîné
• Superposition de texte en bas avec le titre de l'écran
• Barre de progression en haut

Modèle 2 : Mise en évidence des fonctionnalités

Concentrez-vous sur des éléments spécifiques de l'interface utilisateur :

• Zoom avant sur des régions spécifiques
• Cercles/flèches animés pointant vers les fonctionnalités
• Accentuation au ralenti des interactions clés
• Comparaisons avant/après côte à côte

Modèle 3 : Parcours utilisateur

Montrez le parcours utilisateur étape par étape :

• Flux d'écrans séquentiel avec glissements directionnels
• Superposition d'étapes numérotées
• Mettez en évidence les actions de l'utilisateur (clics, tapements)
• Connectez les écrans avec des chemins animés

Dépannage

Problème	Solution
Captures d'écran floues	Assurez-vous que les images téléchargées sont en pleine résolution ; vérifiez les paramètres de qualité de screenshot.downloadUrl
Texte mal aligné	Vérifiez que les dimensions de l'écran correspondent à la taille de la composition ; ajustez le positionnement du texte en fonction de la taille réelle de l'écran
Animations saccadées	Augmentez la fréquence d'images à 60 ips ; utilisez des configurations spring appropriées avec un amortissement adéquat
Échec de la construction Remotion	Vérifiez la compatibilité de la version de Node ; assurez-vous que toutes les dépendances sont installées ; consultez la documentation Remotion
Timing inapproprié	Ajustez la durée par écran dans le manifeste ; prévisualisez dans Remotion Studio ; testez avec des utilisateurs réels

Meilleures pratiques

1. Maintenez le rapport d'aspect : Utilisez les dimensions réelles des écrans Stitch ou mettez-les à l'échelle proportionnellement
2. Timing cohérent : Gardez une durée d'affichage cohérente pour chaque écran, sauf si vous mettez l'accent sur des écrans spécifiques
3. Texte lisible : Assurez un contraste suffisant ; utilisez des tailles de police appropriées ; évitez les superpositions encombrées
4. Transitions fluides : Utilisez des animations spring pour un mouvement naturel ; évitez les coupures brusques
5. Prévisualisez minutieusement : Prévisualisez toujours dans Remotion Studio avant le rendu final
6. Optimisez les ressources : Compressez les images de manière appropriée ; utilisez des formats efficaces (PNG pour l'interface utilisateur, JPG pour les photos)

Exemple d'utilisation

Invite utilisateur :

Recherche les écrans de mon projet Stitch "Application Calculatrice" et crée une vidéo Remotion 
qui montre une démonstration des écrans.

Workflow de l'agent :

1. Lister les projets Stitch → Trouver "Application Calculatrice" → Extraire l'ID du projet
2. Lister les écrans du projet → Identifier tous les écrans (Accueil, Historique, Paramètres)
3. Télécharger les captures d'écran pour chaque écran → Enregistrer dans assets/screens/
4. Créer le manifeste screens.json avec les métadonnées des écrans
5. Générer les composants Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Prévisualiser dans Remotion Studio → Affiner le timing et les transitions
7. Rendre la vidéo finale → calculatrice-demonstration.mp4
8. Signaler l'achèvement avec un lien de prévisualisation vidéo

Conseils pour réussir

• Commencez simple : Débutez avec des transitions de base avant d'ajouter des animations complexes
• Suivez les modèles Remotion : Tirez parti des compétences officielles et de la documentation de Remotion
• Utilisez des fichiers manifeste : Gardez les données des écrans organisées en JSON pour des mises à jour faciles
• Prévisualisez fréquemment : Utilisez Remotion Studio pour détecter les problèmes tôt
• Tenez compte de l'accessibilité : Ajoutez des sous-titres ; assurez-vous que le texte est lisible ; utilisez des visuels clairs
• Optimisez pour la plateforme : Adaptez les dimensions vidéo à la plateforme cible (YouTube, réseaux sociaux, etc.)

Références

• Documentation Stitch : https://stitch.withgoogle.com/docs/
• Documentation Remotion : https://www.remotion.dev/docs/
• Compétences Remotion : https://www.remotion.dev/docs/ai/skills
• MCP Remotion : https://www.remotion.dev/docs/ai/mcp
• Transitions Remotion : https://www.remotion.dev/docs/transitions

Quand utiliser

Utilisez ce skill lorsque vous traitez des tâches liées à son domaine principal ou à sa fonctionnalité telle que décrite ci-dessus.

Limitations

• Utilisez ce skill uniquement lorsque la tâche correspond clairement à la portée décrite ci-dessus.
• Ne considérez pas le résultat comme un substitut à une validation, un test ou une expertise spécifique à l'environnement.
• Arrêtez-vous et demandez des éclaircissements si les entrées, autorisations, limites de sécurité ou critères de réussite requis sont manquants.