foolhardy45/portfolio

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

Este skill 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 do Stitch
• Acesso ao Servidor MCP do Remotion (ou CLI do 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 os 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: Recuperar 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: "App Calculadora")
   • Extraia o ID do Projeto do campo name (ex: projects/13534454087919359824)

2. Recuperação de tela:

   • 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 da tela: 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: Configurar Projeto Remotion

1. Verificar projeto Remotion existente:

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

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

   npm create video@latest -- --blank
   

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

3. Instalar 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 de vídeo principal

   • 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 deslize

  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

Etapas de Execução

Etapa 1: Coletar Ativos das Telas

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 de walkthrough
5. Crie um arquivo de manifesto (screens.json):

{
  "projectName": "App Calculadora",
  "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
    }
  ]
}

Etapa 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 a 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/

Etapa 3: Visualizar e Refinar

1. Inicie o Remotion Studio:

   npm run dev
   

   • Abre a pré-visualização no 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 fino das animações:

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

Etapa 4: Renderizar Vídeo

1. Renderize usando CLI do Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Use MCP do 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)
   • Habilite a 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 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 destaques automáticos para elementos importantes da interface
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 do Remotion

O Remotion mantém seus próprios Agent Skills que definem melhores práticas. Revise-os 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 chave do Remotion 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 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 animados 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	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 com travamentos	Aumente a taxa de quadros para 60fps; use configurações de mola 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 da tela 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 interface, JPG para fotos)

Exemplo de Uso

Solicitação do usuário:

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

Fluxo de trabalho do agente:

1. Liste projetos Stitch → Encontre "App Calculadora" → Extraia o 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 o 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 o vídeo final → calculator-walkthrough.mp4
8. Relate a conclusão com link de pré-visualização do vídeo

Dicas para o Sucesso

• Comece simples: Comece com transições de fade básicas antes de adicionar animações complexas
• Siga os padrões do Remotion: Aproveite os skills e a documentação oficiais do Remotion
• Use arquivos de manifesto: Mantenha os dados das telas organizados em JSON para fácil atualização
• 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 do Stitch: https://stitch.withgoogle.com/docs/
• Documentação do Remotion: https://www.remotion.dev/docs/
• Skills do Remotion: https://www.remotion.dev/docs/ai/skills
• MCP do Remotion: https://www.remotion.dev/docs/ai/mcp
• Transições do Remotion: https://www.remotion.dev/docs/transitions

Quando Usar

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