randall-liao/cloud-resume-v2

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 tela do Stitch com a geração programática de vídeos do Remotion para produzir apresentações suaves e profissionais.

Visão Geral

Esta habilidade permite que você crie 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: Descobrir Servidores MCP Disponíveis

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

• Stitch MCP: Procure por stitch: ou mcp_stitch: prefix
• Remotion MCP: Procure por remotion: ou mcp_remotion: prefix

Passo 2: Recuperar Informações do Projeto Stitch

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

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

2. Recuperação de telas:

   • Chame [stitch_prefix]: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 de tela do campo name de cada tela

3. Busca de metadados da tela: Para cada tela:

   • Chame [stitch_prefix]: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 staging: assets/screens/{nome-da-tela}.png
   • Organize os ativos na ordem do fluxo de walkthrough pretendido

Passo 3: Configurar Projeto Remotion

1. Verifique se existe um projeto Remotion:

   • Procure por remotion.config.ts ou package.json com dependências Remotion
   • Se existir, use a estrutura de 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
   • Funcionalidades: Animação de zoom, 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 da tela Stitch ou dimensionar adequadamente)
   • Cálculo da duração total

Efeitos de Transição

Use @remotion/transitions do Remotion para efeitos profissionais:

• Fade: Cross-fade suave 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 animação spring() para zoom suave
  • Aplique a elementos importantes da interface

Sobreposições de Texto

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

1. Títulos das telas: Exiba na parte superior ou inferior de cada quadro
2. Destaques de funcionalidades: Destaque elementos específicos da interface com ponteiros animados
3. Descrições: Texto descritivo que aparece gradualmente para cada tela
4. Indicador de progresso: Mostre a posição atual da tela no walkthrough

Passos de Execução

Passo 1: Reunir Ativos de Tela

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

{
  "projectName": "Calculadora 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: Gerar 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/

Passo 3: Pré-visualizar e Refinar

1. Inicie o Remotion Studio:

   npm run dev
   

   • Abre pré-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:

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

Passo 4: Renderizar Vídeo

1. Renderize usando CLI Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

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

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

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

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

Funcionalidades Avançadas

Pontos de Interação Interativos

Destaque elementos clicáveis ou funcionalidades 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 um script 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 da tela 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 destaques automáticos para elementos importantes da interface
4. Adicione à composição como sobreposições de texto temporizadas

Estrutura de Arquivos

project/
├── 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 as 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 cross-fade
• Sobreposição de texto na parte inferior com título da tela
• Barra de progresso no topo

Padrão 2: Destaque de Funcionalidade

Foco em elementos específicos da interface:

• Zoom em regiões específicas
• Círculos/setas animadas apontando para funcionalidades
• Ê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	Certifique-se de que as imagens baixadas estão 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 com travamentos	Aumente a taxa de quadros para 60fps; use configurações spring adequadas com damping apropriado
Falha na build do Remotion	Verifique a compatibilidade da versão do Node; garanta que todas as dependências estão instaladas; revise a documentação do Remotion
Temporização parece errada	Ajuste a duração por tela no manifesto; pré-visualize no Remotion Studio; teste com usuários reais

Melhores Práticas

1. Mantenha a proporção: Use as dimensões reais da tela Stitch ou dimensione proporcionalmente
2. Temporização consistente: Mantenha a duração de exibição das telas consistente, a menos que esteja enfatizando 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. Pré-visualize completamente: Sempre pré-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:

Consulte as telas do meu projeto Stitch "Calculadora App" e crie um vídeo Remotion 
que mostre um walkthrough das telas.

Fluxo de trabalho do agente:

1. Liste projetos Stitch → Encontre "Calculadora App" → Extraia ID do projeto
2. Liste telas no projeto → Identifique todas as telas (Inicial, Histórico, Configurações)
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. Pré-visualize no Remotion Studio → Refine temporização e transições
7. Renderize o 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: Comece com transições básicas de fade 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 fácil atualização
• Pré-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, mídias 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
• Remotion MCP: https://www.remotion.dev/docs/ai/mcp
• Transições Remotion: https://www.remotion.dev/docs/transitions