Skill Roteiro de Demonstração
Crie roteiros de vídeos de demonstração estruturados explorando o produto ao vivo e co-criando com o usuário.
Por que isso existe
Bons vídeos de demonstração precisam de bons roteiros. Demonstrações ruins divagam, pulam partes importantes ou avançam rápido demais. Esta skill produz um roteiro preciso e revisável que /record-demo pode executar automaticamente.
Fluxo de Trabalho
Etapa 1: Briefing
Colete contexto do usuário:
Obrigatório:
- Qual produto/recurso demonstrar
- URL alvo (staging/produção)
- Quem é o público? (prospects, usuários existentes, desenvolvedores, equipe interna)
Opcional (perguntar se não fornecido):
- Fluxo específico a mostrar (ex.: "criar um caso de teste com etapas e resultados esperados")
- Tom (profissional, casual, técnico, marketing)
- Duração alvo (30s, 1min, 3min, 5min)
- Pontos-chave a enfatizar
- Coisas a evitar/pular
Suposições padrão se não especificado:
- Público: prospects avaliando o produto
- Tom: profissional, mas acessível
- Duração: 1-2 minutos
- Resolução: 1920x1080
Etapa 2: Exploração do Produto
Use as ferramentas do navegador Playwright para explorar a UI real do produto.
Isso é crítico — não adivinhe como a UI se parece. Navegue de fato por ela:
- Abra a URL alvo no navegador
- Tire capturas de tela de cada página/tela relevante
- Anote os rótulos reais dos botões, itens de menu, campos de formulário
- Entenda o fluxo de navegação
- Identifique elementos da UI por seus seletores reais
Exemplo de fluxo de exploração:
→ Navegue até a URL do aplicativo
→ Capture a tela do dashboard
→ Clique no recurso alvo
→ Capture a tela de cada mudança de estado
→ Anote os seletores exatos de todos os elementos interativos
→ Verifique estados de carregamento, animações, modais
Por que explorar primeiro?
- Nomes reais de seletores (não adivinhados que falharão durante a gravação)
- Narração precisa que corresponde ao que está na tela
- Descubra o fluxo natural (talvez haja uma etapa que o usuário esqueceu de mencionar)
- Capture problemas potenciais (paredes de autenticação, carregamentos lentos, estados vazios)
Autenticação:
- Se o aplicativo exigir login, peça ao usuário as credenciais ou uma sessão pré-autenticada
- Alternativamente, use um ambiente de staging com dados de teste
- Nota: salve cookies/sessão para a fase de gravação
Etapa 3: Rascunho do Roteiro
Gere um roteiro estruturado em formato JSON com arrays metadata e scenes.
Para o esquema JSON completo, referência de ações e estilos de destaque, consulte references/script-format.md.
Etapa 4: Revisão e Iteração
Apresente o roteiro ao usuário em um formato legível (NÃO JSON bruto). Formate-o como:
🎬 Roteiro de Demonstração: "Criando seu Primeiro Caso de Teste"
Duração: ~90 segundos | Público: Prospects
━━━ Cena 1: Abertura — Visão Geral do Dashboard ━━━
→ Navegue para /dashboard
🎙️ "Bem-vindo ao OneTest. Vamos criar seu primeiro caso de teste."
⏸️ Pausa de 2s
━━━ Cena 2: Navegue para Casos de Teste ━━━
→ Clique: "Casos de Teste" na barra lateral
🎙️ "Abra a seção de Casos de Teste pela barra lateral."
✨ Destaque: item da barra lateral (pulso)
⏸️ Pausa de 1.5s
━━━ Cena 3: Criar Novo Caso de Teste ━━━
→ Clique: botão "Criar"
🎙️ "Clique em Criar para iniciar um novo caso de teste."
✨ Destaque: botão Criar (brilho)
⏸️ Pausa de 2s
→ Digite no título: "Login com credenciais válidas"
🎙️ "Dê a ele um título descritivo."
⏸️ Pausa de 1s
→ Digite na descrição: "Verificar que os usuários podem fazer login..."
🎙️ "Adicione uma descrição clara do que este caso de teste verifica."
⏸️ Pausa de 1.5s
━━━ Cena 4: Encerramento ━━━
→ Aguarde 2s (segure na tela final)
🎙️ "E é isso — seu primeiro caso de teste está pronto."
⏸️ Pausa de 1.5s
Total estimado: ~90 segundos
Itere com o usuário:
- "Quer adicionar/remover alguma cena?"
- "O ritmo deve ser mais rápido ou mais lento?"
- "Algum texto de narração que você mudaria?"
- "Quer reordenar algo?"
Etapa 5: Salvar e Transferir
Após aprovação:
- Salve o JSON do roteiro em
workspace/<data>/demo-script-<nome>.json - Salve a versão legível em
workspace/<data>/demo-script-<nome>.md - Informe ao usuário: "Roteiro pronto! Execute
/record-demopara gravá-lo, ou posso iniciar a gravação agora."
Referência de Ações do Roteiro
10 ações suportadas: navigate, click, type, select, scroll, hover, wait, screenshot, drag, keyboard.
5 estilos de destaque: pulse, glow, arrow, dim-others, zoom (injetados via CSS/JS).
Referência completa com campos e exemplos em references/script-format.md.
Diretrizes de Narração
Boa narração:
- Frases curtas (menos de 15 palavras)
- Tempo presente, voz ativa ("Clique em Criar", não "Vamos clicar no botão Criar")
- Descreva o que está acontecendo E por que ("Adicione uma descrição para que sua equipe saiba o que testar")
- Não narre o óbvio ("Estou movendo o cursor para..." — não)
- Ajuste a pausa ao comprimento da narração (narração mais longa = pausa mais longa)
Regras de ritmo:
- Primeira cena: pausas mais longas (espectador se orientando)
- Cenas do meio: pausas moderadas
- Última cena: segure por 2-3 segundos no estado final
- Após digitar: pausa curta para o espectador ler
- Após navegação de página: aguarde o carregamento + 1s para o espectador examinar
Tom por público:
- Prospects: foque em benefícios, mantenha simples, evite jargões
- Desenvolvedores: pode usar termos técnicos, mostre configuração, mencione APIs
- Interno: pode ser mais casual, faça referência a convenções da equipe
Dicas para Ótimas Demonstrações
- Comece com dados — Não demonstre em um aplicativo vazio. Garanta que existam dados de teste.
- Mostre o caminho feliz — Deixe os casos extremos para a documentação, não para demonstrações.
- Um recurso por vídeo — Um vídeo focado de 90 segundos é melhor que um tour de 10 minutos.
- Termine no resultado — Mostre a coisa criada/completa, não um menu.
- Nomeie coisas realisticamente — "Login com credenciais válidas" é melhor que "Teste 1".
- Limpe a UI — Feche abas desnecessárias, esconda ferramentas de desenvolvedor, use um perfil de navegador limpo.