mastra-ai/mastra-demo-skill

Compétence Mastra Demo

Créez des vidéos de démonstration professionnelles en combinant :

• L'automatisation du navigateur pour l'enregistrement de GIF (via claude-in-chrome MCP)
• ElevenLabs pour la génération de voix off
• Remotion pour la composition vidéo

Commandes

Commande	Objectif
/mastra-demo:init <nom>	Créer un nouveau projet de démo à partir de modèles
/mastra-demo:script	Générer ou valider DEMO_SCRIPT.md
/mastra-demo:record	Enregistrer les actions du navigateur sous forme de GIF
/mastra-demo:audio	Générer des voix off via ElevenLabs
/mastra-demo:compose	Construire la composition Remotion
/mastra-demo:render	Exporter la vidéo finale
/mastra-demo:status	Afficher la progression et les prochaines étapes

Démarrage rapide

# 1. Créer un nouveau projet de démo
/mastra-demo:init ma-super-demo

# 2. Modifier DEMO_SCRIPT.md avec votre contenu (ou générer interactivement)
/mastra-demo:script

# 3. Enregistrer les GIFs navigateur pour chaque segment
/mastra-demo:record

# 4. Générer les voix off
/mastra-demo:audio

# 5. Construire la composition vidéo
/mastra-demo:compose

# 6. Rendre la vidéo finale
/mastra-demo:render

Prérequis

• claude-in-chrome MCP : Extension d'automatisation du navigateur pour l'enregistrement GIF
• Clé API ElevenLabs : Pour la génération de voix off
• Node.js 18+ : Pour Remotion
• ffprobe : Pour la détection de la durée audio (fourni avec ffmpeg)

Structure du projet

Les projets de démo créés par cette compétence ont cette structure :

ma-demo/
├── .env                    # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # État d'exécution
├── DEMO_SCRIPT.md          # Script avec segments
├── package.json            # Dépendances Remotion
├── public/                 # Ressources (GIFs, audio)
│   ├── segment-01.gif
│   ├── segment-01.mp3
│   └── ...
├── out/                    # Sortie rendue
│   └── demo.mp4
└── src/
    ├── Root.tsx
    ├── DemoVideo.tsx
    └── scenes/

Format du script

DEMO_SCRIPT.md définit votre démo :

# Démo : Nom de la fonctionnalité

## Récit
Écrivez d'abord l'histoire complète en prose continue.
Cela garantit un flux naturel entre les segments.

## Paramètres
fps: 30
voice: Daniel

## Titre
texte: "Nom de la fonctionnalité"
sous-titre: "Slogan"
durée: 5s

## Segments

### segment-01-intro
url: http://localhost:4111
voix off: |
  Ceci est la narration d'ouverture qui relie
  naturellement le récit ci-dessus.
actions:
  - navigate: http://localhost:4111
  - wait: 2s
  - find: "Bouton Connexion"
  - click: élément trouvé

## Sortie
titre: "Pour commencer"
commande: "npx create-mastra@latest"
liens:
  - mastra.ai/docs

Flux narratif

La clé de grandes démos est le flux narratif. Même si nous enregistrons des GIFs individuels et des segments audio, la voix off doit raconter une histoire cohérente.

Bonnes transitions :

• "Maintenant que nous sommes connectés..."
• "C'est là que ça devient intéressant..."
• "De retour dans Mastra Studio, la différence est immédiate..."

Mauvaises pratiques :

• Débuts de segment brusques sans contexte
• Narration en mode points de liste
• Aucune connexion entre les segments

Actions du navigateur

Actions disponibles pour l'enregistrement :

Action	Format	Exemple
Naviguer	navigate: <url>	navigate: http://localhost:4111
Attendre	wait: <temps>	wait: 2s
Trouver	find: "<requête>"	find: "Bouton Connexion"
Cliquer	click: <cible>	click: élément trouvé
Saisir	type: "<texte>"	type: "Bonjour le monde"
Défiler	scroll: <direction>	scroll: down

Paramètres vocaux

Paramètres ElevenLabs recommandés pour des démos professionnelles :

• Voix : Daniel, Brian, George, ou Chris
• Modèle : eleven_multilingual_v2
• Stabilité : 0.5
• Amélioration de similarité : 0.75

Références

Pour une documentation détaillée :

• references/script-format-reference.md - Format complet de DEMO_SCRIPT.md
• references/gif-recording-reference.md - Modèles d'automatisation du navigateur
• references/audio-generation-reference.md - Intégration ElevenLabs

Modèles

Le répertoire templates/ contient les fichiers du projet Remotion :

• Composants React pour les scènes (Titre, DemoGif, Sortie)
• Composant du cadre du navigateur
• Script de génération audio
• Configuration du paquet