mastra-ai/mastra-demo-skill

Habilidad Mastra Demo

Crea videos de demostración profesionales de productos combinando:

• Automatización del navegador para grabación de GIFs (mediante la extensión MCP claude-in-chrome)
• Generación de locuciones con ElevenLabs
• Composición de video con Remotion

Comandos

Comando	Propósito
/mastra-demo:init <nombre>	Crear un nuevo proyecto de demo a partir de plantillas
/mastra-demo:script	Generar o validar DEMO_SCRIPT.md
/mastra-demo:record	Grabar acciones del navegador como GIFs
/mastra-demo:audio	Generar locuciones mediante ElevenLabs
/mastra-demo:compose	Construir la composición de Remotion
/mastra-demo:render	Exportar el video final
/mastra-demo:status	Mostrar el progreso y los siguientes pasos

Inicio rápido

# 1. Crear un nuevo proyecto de demo
/mastra-demo:init mi-demo-increible

# 2. Editar DEMO_SCRIPT.md con tu contenido (o generarlo interactivamente)
/mastra-demo:script

# 3. Grabar GIFs del navegador para cada segmento
/mastra-demo:record

# 4. Generar locuciones
/mastra-demo:audio

# 5. Construir la composición de video
/mastra-demo:compose

# 6. Renderizar el video final
/mastra-demo:render

Requisitos previos

• Extensión MCP claude-in-chrome: Automatización del navegador para grabación de GIFs
• Clave API de ElevenLabs: Para generar locuciones
• Node.js 18+: Para Remotion
• ffprobe: Para detectar la duración del audio (incluido con ffmpeg)

Estructura del proyecto

Los proyectos de demo creados por esta habilidad tienen la siguiente estructura:

mi-demo/
├── .env                    # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # Estado de ejecución
├── DEMO_SCRIPT.md          # Guion con segmentos
├── package.json            # Dependencias de Remotion
├── public/                 # Recursos (GIFs, audio)
│   ├── segmento-01.gif
│   ├── segmento-01.mp3
│   └── ...
├── out/                    # Salida renderizada
│   └── demo.mp4
└── src/
    ├── Root.tsx
    ├── DemoVideo.tsx
    └── escenas/

Formato del guion

DEMO_SCRIPT.md define tu demo:

# Demo: Nombre de la Funcionalidad

## Narrativa
Escribe la historia completa como prosa continua primero.
Esto asegura un flujo natural entre segmentos.

## Configuración
fps: 30
voz: Daniel

## Título
texto: "Nombre de la Funcionalidad"
subtítulo: "Eslogan"
duración: 5s

## Segmentos

### segmento-01-intro
url: http://localhost:4111
locución: |
  Esta es la narración de apertura que conecta
  naturalmente con la narrativa anterior.
acciones:
  - navegar: http://localhost:4111
  - esperar: 2s
  - encontrar: "Botón de Iniciar Sesión"
  - clic: elemento encontrado

## Cierre
título: "Comienza"
comando: "npx create-mastra@latest"
enlaces:
  - mastra.ai/docs

Flujo narrativo

La clave para grandes demos es el flujo narrativo. Aunque grabemos GIFs individuales y segmentos de audio, la locución debe contar una historia coherente.

Transiciones buenas:

• "Ahora que hemos iniciado sesión..."
• "Aquí es donde se pone interesante..."
• "De vuelta en Mastra Studio, la diferencia es inmediata..."

Malos patrones:

• Inicios abruptos de segmentos sin contexto
• Narración estilo lista de viñetas
• Sin conexión entre segmentos

Acciones del navegador

Acciones disponibles para la grabación:

Acción	Formato	Ejemplo
Navegar	navegar: <url>	navegar: http://localhost:4111
Esperar	esperar: <tiempo>	esperar: 2s
Encontrar	encontrar: "<consulta>"	encontrar: "Botón de Iniciar Sesión"
Clic	clic: <objetivo>	clic: elemento encontrado
Escribir	escribir: "<texto>"	escribir: "Hola mundo"
Desplazar	desplazar: <dirección>	desplazar: abajo

Configuración de voz

Configuración recomendada de ElevenLabs para demos profesionales:

• Voz: Daniel, Brian, George o Chris
• Modelo: eleven_multilingual_v2
• Estabilidad: 0.5
• Mejora de similitud: 0.75

Referencias

Para documentación detallada:

• references/referencia-formato-guion.md - Formato completo de DEMO_SCRIPT.md
• references/referencia-grabacion-gif.md - Patrones de automatización del navegador
• references/referencia-generacion-audio.md - Integración con ElevenLabs

Plantillas

El directorio templates/ contiene archivos de proyecto Remotion:

• Componentes React para escenas (Título, DemoGif, Cierre)
• Componente de marco del navegador
• Script de generación de audio
• Configuración del paquete