demotion — demo sistem otomatis de interface nativa

demotion — demonstração automática de sistema a partir da interface real do aplicativo

Resultado final: um .mp4 (1920×1080, 60 fps, 1-2 minutos) que parece uma gravação de tela profissional de um aplicativo REAL, mas é inteiramente gerado por código Remotion — suave (sem os travamentos de uma gravação real), repetível e fácil de atualizar quando os recursos mudam.

Idioma de trabalho: Português (respostas, recapitulação, legendas do vídeo). Não abra o Chrome/faça login no aplicativo local para "ver" a IU: a fonte da verdade visual é o CÓDIGO; o resultado é verificado por stills/vídeos Remotion.

Princípios que não podem ser violados

1. IU real, não imitação. Copie a marcação + strings de classe Tailwind + tokens de cor + fonte do código da aplicação. Os textos da IU (títulos, etiquetas, dicas, mensagens) devem ser copiados exatamente. Não redesenhe "algo parecido".
2. Veracidade do produto a partir do CÓDIGO. Cada afirmação na legenda (preço, cota, padrão, limites, quem paga o quê) deve ser lida do código/configuração, não da memória ou de suposições. Exemplo real: "O teste do bot usa cota?" → verifique a rota da API e a função de registro de uso antes de escrever a legenda. O que não está no código não deve ser afirmado.
3. Todo movimento é calculado a partir do tempo do vídeo. Sem animações/transições CSS, sem setTimeout, sem estado/cache entre frames: cada frame = função pura de t. (A renderização paralela distribui os frames em várias abas.)
4. Dados de demonstração fictícios, consistentes e seguros. Uma empresa/personagem fictício, números/emails/contas placeholder, os mesmos valores em todas as cenas. Não use dados reais de clientes. Estatísticas "após alguns dias" devem ter legenda "exemplo de dados".
5. Duração de 1-2 minutos a menos que solicitado outro valor: corte as partes de espera e acelere a digitação/carregamento (3-8×) com selo "4×"; partes que precisam ser lidas mantêm-se em 1-2×. A legenda deve ficar visível por ≥1,2 segundos após aceleração.
6. Verificação visual: renderize stills em momentos-chave e VEJA (Leia a imagem) antes da renderização final.

Fluxo de trabalho

Fase 0 — Detecção e objetivo

• Procure por demonstrações existentes: **/src/demo/kit/stage.tsx. Existe → não recrie o scaffold; vá para "Atualizar demonstração".
• Não existe → precisa de um projeto de vídeo. Localização padrão: <repo>/video/ (pasta separada; adicione ao exclude do tsconfig raiz e ao globalIgnores do ESLint se o repositório usar Next/ESLint para que o build/CI da aplicação não o verifique).
• Pergunte APENAS UMA vez sobre o que não pode ser inferido: duração alvo, se terá áudio/narração ou não, partes que devem obrigatoriamente aparecer. Padrão: legendas em português, sem áudio, ≤2 minutos, jornada do usuário do zero até o recurso principal.

Fase 1 — Pesquisa do produto (leia o código, não adivinhe)

Para cada página/recurso que aparecerá, leia: rota (app/**/page.tsx), componentes, textos da IU, pacotes/preços/cotas, regras padrão, limites, textos de tour/onboarding (esta é a melhor fonte de conhecimento do produto), fluxo de pagamento, papéis. Anote em referencias/storyboard.md no formato: página → o que é mostrado → legenda → afirmação verificada (arquivo:linha). Divida a leitura de código para subagentes Explore se necessário; a decisão final é sempre sua.

Fase 2 — Storyboard

Organize 8 a 14 cenas seguindo a jornada do usuário (landing → cadastro → começar/onboarding → configurações principais → momento "uau" → monitorar → pagar/assinar → chamada para ação). Cada cena: objetivo, duração original, passos do cursor, legenda. Consulte referencias/storyboard.md (padrão de legenda, tempo, rótulo do capítulo "N · NOME").

Fase 3 — Scaffold

node "$HOME/.claude/skills/demotion/skrip/scaffold.mjs" --dest <repo>/video --nome "Produto" --domain produto.com --accent "#3ddc97" --install

Isso copia o motor (src/demo/kit/*), raiz Root, cenas de exemplo, configuração Tailwind v4. Em seguida:

• Copie os tokens de cor + classes de componente CSS da aplicação para src/demo/index.css (remova animações/transições).
• Substitua a fonte em src/demo/fonts.ts pela fonte usada pela aplicação (@fontsource/<nome>); carregue todos os pesos usados.
• Preencha BRAND em config.ts (nome, domínio, cor de destaque em fundo escuro).
• Teste: REMOTION_FPS=30 npx remotion still src/demo/index.ts S-exemplo out/teste.png --frame=270 --config=remotion.demo.config.ts. Remova scenes/exemplo.tsx após as cenas reais estarem prontas.

Fase 4 — Portar IU e escrever cenas

• Componentes do produto → src/demo/pages/*.tsx (copie a marcação/classes; substitua dados e handlers por props estáticas). Átomos genéricos estão em kit/atoms.tsx; celular WhatsApp em kit/phone.tsx.
• Uma cena = um arquivo scenes/<id>.tsx que exporta DUR (segundos reais) e um componente; registre em scenes/index.ts com criar("<id>", Comp, DUR_X). Modelo completo: templat/src/scenes/exemplo.tsx e referencias/arquitetura.md (API Stage: cursor/scroll/camera/spot, data-cur, tempo do evento junto com T).
• Sidebar/modal/tour = camada fixed (não rola junto), conteúdo da página = children.
• Cena ≥6 e independente → paralelize com fork (veja referencias/brief-fork.md); a estrutura compartilhada (dados, páginas usadas por várias cenas) é escrita PRIMEIRO por você.

Fase 5 — Cortar e acelerar

Após todas as cenas estarem corretas em 1×, preencha scenes/cortar.ts (segmentos S(a,b,v) por cena). Verifique o total com npx remotion compositions src/demo/index.ts --config=remotion.demo.config.ts (coluna de duração Demo).

Fase 6 — Verificação

1. npx tsc --noEmit -p tsconfig.json
2. Pré-visualização rápida: REMOTION_FPS=30 npx remotion render src/demo/index.ts Demo out/preview.mp4 --config=remotion.demo.config.ts --crf=26 --scale=0.5 --concurrency=10 --gl=angle
3. Folha de contatos: python "$HOME/.claude/skills/demotion/skrip/folha-contato.py" out/preview.mp4 --a-cada 5 e Leia as imagens.
4. Verifique: texto cortado, legenda cobrindo botão que será clicado, cursor errando, números inconsistentes, afirmações incorretas, saltos de layout, momentos vazios/muito longos.

Fase 7 — Renderização final e envio

powershell -File "$HOME/.claude/skills/demotion/skrip/limpar-processos.ps1"   # OBRIGATÓRIO se houver renderização antiga (adicione -SemStudio se o usuário estiver usando o Studio)

cd <repo>/video && REMOTION_FPS=60 npx remotion render src/demo/index.ts Demo out/demo.mp4 --config=remotion.demo.config.ts --codec=h264 --crf=17 --concurrency=10 --gl=angle

Execute em segundo plano (run_in_background), sem timeout pequeno. Estimativa: ±12-18 frames/segundo (GPU), 2 minutos 60 fps = 7.000 frames ≈ 8 minutos. Concluído → verifique com ffprobe (duração, 1920×1080, 60 fps) + um frame, depois node ".../skrip/compress.mjs" out/demo.mp4 out/demo-leve.mp4 --crf 24 se >30 MB e envie com SendUserFile (limite de 30 MB; o arquivo completo permanece em disco, informe o usuário).

Atualizar demonstração existente

git diff/git log para ver páginas/textos que mudaram → atualize apenas as cenas e pages/* relacionadas (recopie a marcação do código), verifique novamente as afirmações das legendas, ajuste cortar.ts, verifique still da cena, renderize novamente por completo.

Armadilhas já encontradas (leia referencias/armadilhas.md antes de começar)

React is not defined (JSX no nível do módulo) · cache entre frames faz o cursor pular · processos de renderização órfãos consomem CPU · blur/backdrop-filter tornam a renderização 3× mais lenta · breakpoints do Tailwind usam a largura da janela headless · sticky morre no conteúdo que é deslocado · renderização paralela + arquivos meio prontos quebram o bundle · ffmpeg do Remotion não tem filtro fps/tile · afirmações de recurso incorretas são percebidas pelo usuário.

Referências nesta habilidade

• referencias/arquitetura.md — API do motor (Stage, passos de cursor/rolagem/câmera/destaque, mapa de tempo, kit)
• referencias/armadilhas.md — lista de armadilhas + soluções
• referencias/storyboard.md — como organizar cenas, legendas, ritmo, lista de pesquisa
• referencias/brief-fork.md — modelo de briefing para escrever cenas paralelas com subagentes fork
• referencias/render.md — comandos de renderização, velocidade, GPU, compressão, envio
• templat/ — código copiado pelo scaffold · skrip/ — scaffold, limpar-processos, folha-contato, compress
• Exemplo real de 13 cenas (landing + scroll, tour com destaque + diálogo, celular escaneando QR, tela dividida dashboard + celular, troca de página + pagamento) veio do projeto ChatGerCep do autor; os padrões estão em templat/src/scenes/exemplo.tsx e referencias/arquitetura.md.