mastra-ai/mastra-demo-skill

Skill Mastra Demo

Crie vídeos de demonstração de produto profissionais combinando:

• Automação de navegador para gravação de GIFs (via MCP claude-in-chrome)
• Geração de narração com ElevenLabs
• Composição de vídeo com Remotion

Comandos

Comando	Propósito
/mastra-demo:init <nome>	Criar novo projeto de demonstração a partir de modelos
/mastra-demo:script	Gerar ou validar DEMO_SCRIPT.md
/mastra-demo:record	Gravar ações do navegador como GIFs
/mastra-demo:audio	Gerar narrações via ElevenLabs
/mastra-demo:compose	Construir composição Remotion
/mastra-demo:render	Exportar vídeo final
/mastra-demo:status	Mostrar progresso e próximos passos

Início Rápido

# 1. Crie um novo projeto de demonstração
/mastra-demo:init minha-demo-incrivel

# 2. Edite DEMO_SCRIPT.md com seu conteúdo (ou gere interativamente)
/mastra-demo:script

# 3. Grave GIFs do navegador para cada segmento
/mastra-demo:record

# 4. Gere narrações
/mastra-demo:audio

# 5. Construa a composição do vídeo
/mastra-demo:compose

# 6. Renderize o vídeo final
/mastra-demo:render

Pré-requisitos

• MCP claude-in-chrome: Extensão de automação de navegador para gravação de GIFs
• Chave de API ElevenLabs: Para geração de narração
• Node.js 18+: Para Remotion
• ffprobe: Para detecção de duração de áudio (vem com ffmpeg)

Estrutura do Projeto

Projetos de demonstração criados por este skill possuem esta estrutura:

minha-demo/
├── .env                    # ELEVENLABS_API_KEY
├── .mastra-demo-state.json # Estado de execução
├── DEMO_SCRIPT.md          # Script com segmentos
├── package.json            # Dependências Remotion
├── public/                 # Assets (GIFs, áudio)
│   ├── segment-01.gif
│   ├── segment-01.mp3
│   └── ...
├── out/                    # Saída renderizada
│   └── demo.mp4
└── src/
    ├── Root.tsx
    ├── DemoVideo.tsx
    └── scenes/

Formato do Script

DEMO_SCRIPT.md define sua demonstração:

# Demo: Nome da Funcionalidade

## Narrativa
Escreva a história completa como prosa contínua primeiro.
Isso garante um fluxo natural entre os segmentos.

## Configurações
fps: 30
voz: Daniel

## Título
texto: "Nome da Funcionalidade"
subtitulo: "Tagline"
duracao: 5s

## Segmentos

### segmento-01-intro
url: http://localhost:4111
narracao: |
  Esta é a narração de abertura que conecta
  naturalmente a narrativa acima.
acoes:
  - navegar: http://localhost:4111
  - aguardar: 2s
  - encontrar: "Botão Entrar"
  - clicar: elemento encontrado

## Encerramento
cabecalho: "Comece Agora"
comando: "npx create-mastra@latest"
links:
  - mastra.ai/docs

Fluxo Narrativo

A chave para grandes demonstrações é o fluxo narrativo. Mesmo que gravemos GIFs e segmentos de áudio individuais, a narração deve contar uma história coesa.

Boas transições:

• "Agora que estamos logados..."
• "Aqui é onde fica interessante..."
• "De volta ao Mastra Studio, a diferença é imediata..."

Padrões ruins:

• Inícios abruptos de segmentos sem contexto
• Narração no estilo de lista de tópicos
• Nenhuma conexão entre segmentos

Ações do Navegador

Ações disponíveis para gravação:

Ação	Formato	Exemplo
Navegar	navegar: <url>	navegar: http://localhost:4111
Aguardar	aguardar: <tempo>	aguardar: 2s
Encontrar	encontrar: "<consulta>"	encontrar: "Botão Entrar"
Clicar	clicar: <alvo>	clicar: elemento encontrado
Digitar	digitar: "<texto>"	digitar: "Olá mundo"
Rolar	rolar: <dir>	rolar: para baixo

Configurações de Voz

Configurações recomendadas do ElevenLabs para demonstrações profissionais:

• Voz: Daniel, Brian, George ou Chris
• Modelo: eleven_multilingual_v2
• Estabilidade: 0.5
• Reforço de similaridade: 0.75

Referências

Para documentação detalhada:

• references/script-format-reference.md - Formato completo de DEMO_SCRIPT.md
• references/gif-recording-reference.md - Padrões de automação de navegador
• references/audio-generation-reference.md - Integração com ElevenLabs

Modelos

O diretório templates/ contém arquivos de projeto Remotion:

• Componentes React para cenas (Título, DemoGif, Encerramento)
• Componente de moldura do navegador
• Script de geração de áudio
• Configuração de pacotes