83.3K+Baixar
Ir para o guia de uso
remotionpor Google Labs

Remotion Skill.

Uma skill de Claude Code e Codex para motion e vídeo: vídeos de apresentação de projetos Stitch com transições e zooms Remotion.

  • Motion e Vídeo
  • Video
Baixar OpenDesignVer guia de uso
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Cabeçalho e títulos de seção lidos do arquivo original em 14/09/2026 · 12.764 caracteres no total

01 O que faz

O que o skill remotion faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Transforma um projeto Stitch existente em um vídeo de demonstração. O agente lista os projetos e telas do Stitch, baixa o screenshot.downloadUrl de cada tela em assets/screens/, registra largura, altura, título e descrição em um manifesto screens.json e, então, constrói uma composição Remotion a partir de ScreenSlide.tsx e WalkthroughComposition.tsx usando transições de fade, slide e zoom controladas por spring, além de sobreposições de texto.

É destinado a designers e desenvolvedores que já têm telas projetadas no Stitch e têm familiaridade com Node.js e React, já que o Remotion renderiza componentes React. Os quadros usam 30 fps por padrão, as telas duram de 3 a 5 segundos, e o resultado é pré-visualizado no Remotion Studio antes da renderização de um MP4.

O que ele produz

  • Um manifesto screens.json contendo nome do projeto, ids das telas, títulos, descrições, caminhos de imagem, dimensões e duração por tela
  • Arquivos de componentes Remotion gerados para o vídeo de demonstração
  • Configuração do projeto Remotion atualizada
Veja o exemplo de prompt ↗

Como funciona

  1. 01
    Localize os MCP Servers

    Execute list_tools e identifique os prefixos dos servidores Stitch e Remotion para que as chamadas seguintes possam ser endereçadas corretamente.

  2. 02
    Extraia as telas do Stitch

    Encontre o projeto, liste suas telas e, então, busque os metadados de cada tela para obter a URL do screenshot, as dimensões e a descrição.

  3. 03
    Organize as capturas de tela

    Baixe cada captura de tela com web_fetch ou curl para um diretório de preparação, ordenadas conforme o fluxo desejado do vídeo de demonstração.

  4. 04
    Estruture o projeto Remotion

    Reutilize um projeto Remotion existente, se houver um, ou crie um projeto TypeScript vazio em um diretório video/.

  5. 05
    Construa a composição

    Escreva ScreenSlide.tsx para a animação de cada tela, WalkthroughComposition.tsx para sequenciar e fazer as transições, além de config.ts para fps e dimensões.

  6. 06
    Pré-visualize e, então, renderize

    Itere no Remotion Studio sobre o timing e os valores de spring, depois renderize o arquivo final pela CLI ou pela ferramenta de renderização do Remotion.

02 Encontre o ideal para você

Quando usar a skill remotion

Use a skill remotion no Claude Code ou Codex quando o trabalho for motion e vídeo deste tipo. Adequação e limites abaixo são retirados do arquivo próprio da skill.

Boa Combinação

  • Você já tem um projeto Stitch contendo telas projetadas para demonstrar
  • Você quer destacar elementos específicos da UI com ponteiros animados e anéis de hotspot
  • Você está criando um vídeo de jornada do usuário passo a passo, e não uma apresentação de slides simples
  • Você já conhece os recursos de vídeo do Remotion e quer que seus idiomas sejam respeitados

Conheça os Limites

  • Você não tem acesso ao Stitch MCP Server, que é um pré-requisito obrigatório
  • Ninguém na equipe conhece React, já que o Remotion compõe componentes React
  • As capturas de tela não podem ser obtidas em resolução total, o que o arquivo aponta como a causa do resultado desfocado

O Que Fornecer

  • Identificador do projeto no StitchUm ID de projeto já conhecido, ou um título que o agente pode procurar quando o ID não é fornecido.
  • Quais telas fazem parte do vídeoA lista de telas do projeto é revisada para que todas as telas do walkthrough sejam identificadas antes do download.
  • Dimensões da telaA largura e a altura de cada tela são necessárias para que a composição escale a captura de tela corretamente.
  • Títulos e descriçõesOs títulos e descrições das telas se tornam o texto contextual exibido sobre cada quadro.
  • Ordem pretendida do walkthroughOs assets são organizados na ordem em que o espectador deve encontrá-los, não na ordem em que o Stitch os retorna.

03 Dentro da skill

Regras que a Skill remotion Dá ao Claude Code e ao Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

  1. As Telas Duram de 3 a 5 Segundos por Padrão

    Cada tela permanece por uma duração configurável, com 3 a 5 segundos por tela como padrão declarado.

  2. Compor a 30 Fps

    O config.ts define a taxa de quadros, e o padrão é 30 fps.

  3. Passar para 60fps Quando o Movimento Engasgar

    Se as animações parecerem instáveis, aumente a taxa de quadros para 60fps e ajuste o damping da spring em vez de alterar o design.

  4. Aplicar Zoom com Spring()

    Os efeitos de zoom devem ser conduzidos por animações de spring aplicadas aos elementos de UI importantes que estão sendo destacados.

  5. Manter a Proporção Nativa

    Use as dimensões reais das telas do Stitch ou dimensione-as proporcionalmente, nunca distorça o layout.

  6. Conduzir a Construção a Partir de um Manifesto

    Os dados das telas ficam em um arquivo de manifesto, para que a ordem, os títulos e as durações possam ser atualizados sem tocar no código dos componentes.

  7. Manter a Temporização Estável

    A duração da exibição de cada tela permanece consistente ao longo do walkthrough, a menos que uma tela específica esteja sendo enfatizada.

  8. Comece com Fades

    Comece com transições de fade básicas e só adicione as animações complexas depois que o corte simples funcionar.

04 Coloque em prática

Instale remotion no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicione remotion ao Claude Code, Codex ou seu agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

Formulário genérico do CLI de skills para plugins/stitch-build/skills/remotion/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Adapte este prompt com seu próprio conteúdo e restrições, depois execute no Claude Code ou Codex.

Example prompt
Look up the screens in my Stitch project "Calculator App" and build a remotion video that shows a walkthrough of the screens.

Fonte: exemplo do SKILL.md (na íntegra).

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

  • Pré-visualize a composição no Remotion Studio antes de partir para a renderização
  • Percorra a checklist de conclusão incluída
  • Verifique se os textos sobrepostos aparecem no momento certo em cada tela
  • Confirme se as dimensões da tela correspondem ao tamanho da composição e reposicione o texto de acordo com o tamanho real da tela
  • Garanta que o texto sobreposto permaneça legível durante toda a exibição, não apenas no primeiro quadro
  • Se o movimento parecer irregular, teste a rota de 60fps com o damping da spring revisado

No OpenDesign o remotion já vem incluído: Plugins → Skills, selecione-o na barra superior.

Baixar OpenDesignLer o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Arquivo da skill
plugins/stitch-build/skills/remotion/SKILL.md Checksum de conteúdo registrado na verificação; commit 0337446
License
Apache-2.0 De LICENSE.
Estrelas do repositório
8.304 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório google-labs-code/stitch-skills, que contém 12 skills neste catálogo. Não é uma avaliação ou contagem de uso para remotion.
Verificado pelo OpenDesign
2026-09-14 Arquivo fonte, caminho, texto de licença e contagem de estrelas foram verificados. Incluído no OpenDesign main (verificado em 2026-08-28); uma execução real não foi registrada nesta página.

Dentro do SKILL.md

  1. Visão geralO que o workflow de walkthrough do Stitch com Remotion produz no geral
  2. Pré-requisitosServidores MCP necessários, Node.js, npm, e um projeto Stitch com telas
  3. Recuperação e RedeDescoberta de prefixos MCP, busca de projetos e telas, download de assets
  4. Estratégia de Composição de VídeoArquitetura do ScreenSlide, WalkthroughComposition e configuração, além de transições e sobreposições
  5. Etapas de ExecuçãoReunir assets, criar o manifesto, gerar componentes, pré-visualizar, renderizar
  6. Recursos AvançadosHotspots interativos, integração de narração e extração automática de texto do HTML do Stitch
  7. Estrutura de ArquivosLayout esperado de diretórios do projeto de vídeo e do manifesto
  8. Integração com Skills do RemotionInstalação das próprias skills de agente do Remotion para orientação de animação e desempenho
  9. Padrões ComunsTrês receitas: apresentação simples de slides, destaque de funcionalidade e fluxo de usuário
  10. Solução de ProblemasCorreções para screenshots borrados, texto desalinhado, animação irregular, falhas de build, timing
  11. Boas PráticasProporção de tela, timing consistente, texto legível, transições suaves, pré-visualização, otimização de assets
  12. Dicas para o SucessoComece simples, reutilize padrões do Remotion, use manifestos, pré-visualize com frequência, acessibilidade, dimensionamento por plataforma
A Descrição da Própria Skill
"Gere vídeos de walkthrough a partir de projetos Stitch usando Remotion com transições suaves, zoom e sobreposições de texto"

Descrição do front-matter do SKILL.md. O arquivo completo tem cerca de 12.764 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill remotion

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

O que preciso ter instalado antes de rodar isso?

Acesso ao Stitch MCP Server e a um Remotion MCP Server ou ao Remotion CLI, além de Node.js e npm, e um projeto Stitch que já tenha telas projetadas. Familiaridade com Remotion e componentes React é recomendada, mas não obrigatória.

Preciso usar o Remotion MCP server, ou o CLI já é suficiente?

O CLI é suficiente. Depois de pré-visualizar no Remotion Studio, você pode renderizar com npx remotion render WalkthroughComposition output.mp4, ou chamar a ferramenta de renderização do Remotion com os detalhes da composição, se esse servidor estiver disponível.

Quanto tempo cada tela permanece na exibição?

De três a cinco segundos por tela por padrão, armazenado como uma duração por tela no manifesto para que você possa ajustar telas individuais. A duração é definida no manifesto e pré-visualizada no Remotion Studio.

Remotion

Execute remotion em uma tarefa real de motion e vídeo.

A skill remotion vem dentro do OpenDesign. Baixe o app, escolha a skill em Plugins → Skills, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesignVer todas as skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion