anubhavg-icpl/vibe

Vídeos de Walkthrough de Stitch para Remotion

Você é um especialista em produção de vídeo focado em criar vídeos de walkthrough envolventes a partir de designs de aplicativos. Você combina as capacidades de recuperação de telas do Stitch com a geração programática de vídeos do Remotion para produzir apresentações suaves e profissionais.

Visão Geral

Esta skill permite criar vídeos de walkthrough que mostram telas de aplicativos com transições profissionais, efeitos de zoom e sobreposições de texto contextuais. O fluxo de trabalho recupera telas de projetos Stitch e as orquestra em uma composição de vídeo Remotion.

Pré-requisitos

Obrigatório:

• Acesso ao Servidor MCP Stitch
• Acesso ao Servidor MCP Remotion (ou CLI Remotion)
• Node.js e npm instalados
• Um projeto Stitch com telas projetadas

Recomendado:

• Familiaridade com as capacidades de vídeo do Remotion
• Compreensão de componentes React (Remotion usa React)

Recuperação e Rede

Passo 1: Descubra Servidores MCP Disponíveis

Execute list_tools para identificar servidores MCP disponíveis e seus prefixos:

• Stitch MCP: Procure pelo prefixo stitch: ou mcp_stitch:
• Remotion MCP: Procure pelo prefixo remotion: ou mcp_remotion:

Passo 2: Recupere Informações do Projeto Stitch

1. Consulta de projeto (se o ID do Projeto não for fornecido):

   • Chame [prefixo_stitch]:list_projects com filter: "view=owned"
   • Identifique o projeto alvo pelo título (ex.: "Calculator App")
   • Extraia o ID do Projeto do campo name (ex.: projects/13534454087919359824)

2. Recuperação de telas:

   • Chame [prefixo_stitch]:list_screens com o ID do projeto (apenas numérico)
   • Revise os títulos das telas para identificar todas as telas para o walkthrough
   • Extraia os IDs das Telas do campo name de cada tela

3. Busca de metadados das telas: Para cada tela:

   • Chame [prefixo_stitch]:get_screen com projectId e screenId
   • Recupere:
     • screenshot.downloadUrl — Ativo visual para o vídeo
     • htmlCode.downloadUrl — Opcional: para extrair texto/conteúdo
     • width, height — Dimensões da tela para dimensionamento adequado
     • Título e descrição da tela para sobreposições de texto

4. Download de ativos:

   • Use web_fetch ou Bash com curl para baixar capturas de tela
   • Salve em um diretório de preparação: assets/screens/{nome-da-tela}.png
   • Organize os ativos na ordem do fluxo de walkthrough pretendido

Passo 3: Configure o Projeto Remotion

1. Verifique se há um projeto Remotion existente:

   • Procure por remotion.config.ts ou package.json com dependências Remotion
   • Se existir, use a estrutura do projeto existente

2. Crie um novo projeto Remotion (se necessário):

   npm create video@latest -- --blank
   

   • Escolha o template TypeScript
   • Configure em um diretório dedicado video/

3. Instale dependências:

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

Estratégia de Composição de Vídeo

Arquitetura

Crie uma composição Remotion modular com estes componentes:

1. ScreenSlide.tsx — Componente de exibição de tela individual

   • Props: imageSrc, title, description, width, height
   • Recursos: Animação de zoom-in, transições de fade
   • Duração: Configurável (padrão 3-5 segundos por tela)

2. WalkthroughComposition.tsx — Composição principal do vídeo

   • Sequencia múltiplos componentes ScreenSlide
   • Gerencia transições entre telas
   • Adiciona sobreposições de texto e anotações

3. config.ts — Configuração do vídeo

   • Taxa de quadros (padrão: 30 fps)
   • Dimensões do vídeo (corresponder às dimensões das telas Stitch ou dimensionar adequadamente)
   • Cálculo da duração total

Efeitos de Transição

Use @remotion/transitions do Remotion para efeitos profissionais:

• Fade: Transição suave de cross-fade entre telas

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

• Slide: Transições direcionais de deslizamento

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

• Zoom: Efeitos de zoom in/out para ênfase

  • Use a animação spring() para zoom suave
  • Aplique a elementos importantes da UI

Sobreposições de Texto

Adicione informações contextuais usando a renderização de texto do Remotion:

1. Títulos das telas: Exiba no topo ou na parte inferior de cada quadro
2. Chamadas de destaque: Destaque elementos específicos da UI com ponteiros animados
3. Descrições: Texto descritivo com fade para cada tela
4. Indicador de progresso: Mostre a posição atual da tela no walkthrough

Etapas de Execução

Passo 1: Reúna os Ativos das Telas

1. Identifique o projeto Stitch alvo
2. Liste todas as telas no projeto
3. Baixe as capturas de tela para cada tela
4. Organize na ordem do fluxo do walkthrough
5. Crie um arquivo de manifesto (screens.json):

{
  "projectName": "Calculator App",
  "screens": [
    {
      "id": "1",
      "title": "Tela Inicial",
      "description": "Interface principal da calculadora com teclado numérico",
      "imagePath": "assets/screens/home.png",
      "width": 1200,
      "height": 800,
      "duration": 4
    },
    {
      "id": "2",
      "title": "Visualização de Histórico",
      "description": "Visualização de cálculos anteriores",
      "imagePath": "assets/screens/history.png",
      "width": 1200,
      "height": 800,
      "duration": 3
    }
  ]
}

Passo 2: Gere Componentes Remotion

Crie os componentes de vídeo seguindo as melhores práticas do Remotion:

1. Crie ScreenSlide.tsx:

   • Use useCurrentFrame() e spring() para animações
   • Implemente efeitos de zoom e fade
   • Adicione sobreposições de texto com temporização adequada

2. Crie WalkthroughComposition.tsx:

   • Importe o manifesto de telas
   • Sequencie telas com componentes <Sequence>
   • Aplique transições entre telas
   • Calcule temporização e deslocamentos adequados

3. Atualize remotion.config.ts:

   • Defina o ID da composição
   • Configure as dimensões do vídeo
   • Defina taxa de quadros e duração

Recursos de Referência:

• Use resources/screen-slide-template.tsx como ponto de partida
• Siga resources/composition-checklist.md para completude
• Revise exemplos no diretório examples/walkthrough/

Passo 3: Visualize e Refine

1. Inicie o Remotion Studio:

   npm run dev
   

   • Abre visualização baseada em navegador
   • Permite edição e refinamento em tempo real

2. Ajuste a temporização:

   • Garanta que cada tela tenha duração de exibição adequada
   • Verifique se as transições são suaves
   • Verifique a temporização das sobreposições de texto

3. Ajuste as animações:

   • Configure os parâmetros de spring para efeitos de zoom
   • Modifique funções de easing para transições
   • Garanta que o texto seja legível em todos os momentos

Passo 4: Renderize o Vídeo

1. Renderize usando a CLI Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Use o MCP Remotion (se disponível):

   • Chame [prefixo_remotion]:render com detalhes da composição
   • Especifique o formato de saída (MP4, WebM, etc.)

3. Opções de otimização:

   • Defina o nível de qualidade (--quality)
   • Configure o codec (--codec h264 ou h265)
   • Ative renderização paralela (--concurrency)

Recursos Avançados

Hotspots Interativos

Destaque elementos clicáveis ou recursos 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>
  );
};

Integração de Narração

Adicione narração ao walkthrough:

1. Gere roteiro de narração a partir das descrições das telas
2. Use texto-para-fala ou grave áudio
3. Importe áudio no Remotion com o componente <Audio>
4. Sincronize a temporização das telas com o ritmo da narração

Extração Dinâmica de Texto

Extraia texto do código HTML do Stitch para anotações automáticas:

1. Baixe htmlCode.downloadUrl para cada tela
2. Analise o HTML para extrair elementos de texto chave (cabeçalhos, botões, rótulos)
3. Gere chamadas automáticas para elementos importantes da UI
4. Adicione à composição como sobreposições de texto temporizadas

Estrutura de Arquivos

projeto/
├── video/                      # Diretório do projeto Remotion
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   ├── components/
│   │   │   ├── Hotspot.tsx
│   │   │   └── TextOverlay.tsx
│   │   └── Root.tsx
│   ├── public/
│   │   └── assets/
│   │       └── screens/        # Capturas de tela Stitch baixadas
│   │           ├── home.png
│   │           └── history.png
│   ├── remotion.config.ts
│   └── package.json
├── screens.json                # Manifesto de telas
└── output.mp4                  # Vídeo renderizado

Integração com Skills Remotion

O Remotion mantém suas próprias Skills de Agente que definem melhores práticas. Revise-as para técnicas avançadas:

• Repositório: https://github.com/remotion-dev/remotion/tree/main/packages/skills
• Instalação: npx skills add remotion-dev/skills

Skills Remotion chave para aproveitar:

• Temporização e easing de animação
• Padrões de arquitetura de composição
• Otimização de desempenho
• Sincronização de áudio

Padrões Comuns

Padrão 1: Apresentação de Slides Simples

Walkthrough básico com transições de fade:

• 3-5 segundos por tela
• Transições de cross-fade
• Sobreposição de texto inferior com título da tela
• Barra de progresso no topo

Padrão 2: Destaque de Recursos

Foco em elementos específicos da UI:

• Zoom em regiões específicas
• Círculos/setas animadas apontando para recursos
• Ênfase em câmera lenta em interações chave
• Comparações lado a lado antes/depois

Padrão 3: Fluxo do Usuário

Mostre a jornada do usuário passo a passo:

• Fluxo sequencial de telas com slides direcionais
• Sobreposição de etapas numeradas
• Destaque de ações do usuário (cliques, toques)
• Conecte telas com caminhos animados

Solução de Problemas

Problema	Solução
Capturas de tela borradas	Garanta que as imagens baixadas estejam em resolução total; verifique as configurações de qualidade de screenshot.downloadUrl
Texto desalinhado	Verifique se as dimensões da tela correspondem ao tamanho da composição; ajuste o posicionamento do texto com base no tamanho real da tela
Animações instáveis	Aumente a taxa de quadros para 60fps; use configurações de spring adequadas com damping apropriado
Falha na compilação do Remotion	Verifique a compatibilidade da versão do Node; garanta que todas as dependências estejam instaladas; revise a documentação do Remotion
Temporização parece errada	Ajuste a duração por tela no manifesto; visualize no Remotion Studio; teste com usuários reais

Melhores Práticas

1. Mantenha a proporção: Use as dimensões reais das telas Stitch ou dimensione proporcionalmente
2. Temporização consistente: Mantenha a duração de exibição das telas consistente, a menos que enfatize telas específicas
3. Texto legível: Garanta contraste suficiente; use tamanhos de fonte adequados; evite sobreposições poluídas
4. Transições suaves: Use animações spring para movimento natural; evite cortes bruscos
5. Visualize completamente: Sempre visualize no Remotion Studio antes da renderização final
6. Otimize ativos: Comprima imagens adequadamente; use formatos eficientes (PNG para UI, JPG para fotos)

Exemplo de Uso

Prompt do usuário:

Procure as telas no meu projeto Stitch "Calculator App" e crie um vídeo remotion
que mostre um walkthrough das telas.

Fluxo de trabalho do agente:

1. Liste projetos Stitch → Encontre "Calculator App" → Extraia ID do projeto
2. Liste telas no projeto → Identifique todas as telas (Home, History, Settings)
3. Baixe capturas de tela para cada tela → Salve em assets/screens/
4. Crie manifesto screens.json com metadados das telas
5. Gere componentes Remotion (ScreenSlide.tsx, WalkthroughComposition.tsx)
6. Visualize no Remotion Studio → Refine temporização e transições
7. Renderize vídeo final → calculator-walkthrough.mp4
8. Reporte conclusão com link de pré-visualização do vídeo

Dicas para o Sucesso

• Comece simples: Inicie com transições de fade básicas antes de adicionar animações complexas
• Siga padrões Remotion: Aproveite as skills e documentação oficiais do Remotion
• Use arquivos de manifesto: Mantenha dados das telas organizados em JSON para atualizações fáceis
• Visualize com frequência: Use o Remotion Studio para detectar problemas cedo
• Considere acessibilidade: Adicione legendas; garanta que o texto seja legível; use visuais claros
• Otimize para a plataforma: Corresponda as dimensões do vídeo à plataforma alvo (YouTube, redes sociais, etc.)

Referências

• Documentação Stitch: https://stitch.withgoogle.com/docs/
• Documentação Remotion: https://www.remotion.dev/docs/
• Skills Remotion: https://www.remotion.dev/docs/ai/skills
• MCP Remotion: https://www.remotion.dev/docs/ai/mcp
• Transições Remotion: https://www.remotion.dev/docs/transitions

Quando Usar

Use esta skill ao lidar com tarefas relacionadas ao seu domínio principal ou funcionalidade conforme descrito acima.

Limitações

• Use esta skill apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como um substituto para validação específica do ambiente, testes ou revisão por especialistas.
• Pare e peça esclarecimentos se entradas necessárias, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.