Anhvu1107/all-agent-skill

Vídeos Walkthrough do Stitch para Remotion

Regra de Leitura Seletiva

Comece com:

• references/senior-master-standard.md
• references/usage-routing.md
• references/quality-checklist.md

Em seguida, carregue apenas os documentos, scripts, ativos ou exemplos herdados que correspondam à tarefa real do usuário.

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 de vídeo programática do Remotion para produzir apresentações profissionais e suaves.

Visão Geral

Esta habilidade permite criar vídeos de walkthrough que exibem 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 Networking

Etapa 1: Descubra Servidores MCP Disponíveis

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

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

Etapa 2: Recupere Informações do Projeto Stitch

1. Pesquisa 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.: "Aplicativo Calculadora")
   • 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 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

Etapa 3: Configure o Projeto Remotion

1. Verifique se há um 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. 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, 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 vários 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: Transição suave de fade entre telas

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

• Slide: Transições de deslizamento direcional

  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 recursos: Destaque elementos específicos da interface com indicadores animados
3. Descrições: Faça fade in do texto descritivo para cada tela
4. Indicador de progresso: Mostre a posição atual da tela no walkthrough

Etapas de Execução

Etapa 1: Reúna 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 do walkthrough
5. Crie um arquivo de manifesto (screens.json):

{
  "projectName": "Aplicativo 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: 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 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: Visualize e Refine

1. Inicie o Remotion Studio:

   npm run dev
   

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

2. Ajuste a temporização:

   • Certifique-se de 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 spring para efeitos de zoom
   • Modifique funções de easing para transições
   • Garanta que o texto esteja legível o tempo todo

Etapa 4: Renderize o Vídeo

1. Renderize usando CLI Remotion:

   npx remotion render WalkthroughComposition output.mp4
   

2. Alternativa: Use 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)
   • Habilite 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 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 suas próprias Skills de Agente que definem melhores práticas. Revise estas 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 a serem aproveitadas:

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

Foco em elementos específicos da interface:

• Zoom em regiões específicas
• Círculos/setas animados 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	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 instáveis	Aumente a taxa de quadros para 60fps; use configurações spring adequadas com damping apropriado
Falha na compilação do Remotion	Verifique a compatibilidade da versão do Node; certifique-se de 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; 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

Prompt do usuário:

Busque as telas do meu projeto Stitch "Aplicativo Calculadora" e crie um vídeo remotion 
que mostre um walkthrough das telas.

Fluxo de trabalho do agente:

1. Liste projetos Stitch → Encontre "Aplicativo Calculadora" → 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. 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: Inicie com transições de fade básicas antes de adicionar animações complexas
• Siga padrões do 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
• 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 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 esta habilidade ao lidar com tarefas relacionadas ao seu domínio primário ou funcionalidade conforme descrito acima.

Limitações

• Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
• Não trate a saída como substituta para validação específica de ambiente, testes ou revisão de especialistas.
• Pare e peça esclarecimentos se entradas obrigatórias, permissões, limites de segurança ou critérios de sucesso estiverem faltando.