suxrobGM/jobpilot

Vídeo teaser

Produza um teaser de qualidade de lançamento (~30-45s) de um aplicativo em execução: faça um storyboard, filme-o dirigindo a interface do usuário real, edite com ffmpeg e entregue um MP4 e um GIF para o README.

A saída deve parecer um vídeo de produto, não uma gravação de tela. A diferença está na direção - encenação, enquadramento e ritmo - não na resolução.

As implementações de referência estão em reference/; são módulos ESM funcionais, não pseudocódigo. Configure em um diretório temporário - nunca dentro do projeto:

cp -r <skill>/reference/* "$SCRATCH/" && cd "$SCRATCH" && npm install
export TEASER_BASE_URL="https://o-app.exemplo.com"

reference/package.json declara "type": "module" e as três dependências. Cada script lê TEASER_BASE_URL, para que nada seja codificado para um único aplicativo.

Antes de tudo: as duas regras rígidas

1. Nunca acione efeitos colaterais do mundo real sem consentimento explícito e detalhado.

Filmar um aplicativo real significa clicar em botões reais. Alguns deles enviam e-mail, publicam publicamente, cobram dinheiro ou enviam formulários para terceiros. Antes de tocar no aplicativo:

• Enumere cada ação em seu storyboard que saia da máquina.
• Diga ao usuário exatamente o que cada uma faz e quantas vezes, e obtenha a concordância sobre a contagem.
• Prefira um modo que pare antes da etapa irreversível (uma prévia, uma simulação, uma gate de confirmação que você pode filmar e depois recusar).

Não existe algo como uma sondagem somente leitura contra um sistema ativo. Um clique "diagnóstico" que cai em uma sessão já em execução é acionado de verdade. Se você estiver depurando por que uma ação não funcionou, assuma que seu próximo clique funcionará , e esteja preparado para isso.

Se algo for acionado que você não pretendia: interrompa o processo na sua fonte imediatamente (mate a sessão/o worker, não apenas o botão da UI, que pode não surtir efeito), verifique o estado interrompido lendo-o de volta e informe o usuário claramente em sua mensagem final - contagem incluída.

2. Assuma que cada quadro é público e cheio de PII.

Contas reais carregam nomes, e-mails, endereços e documentos. Decida a política com o usuário antecipadamente:

• Enquadre ao redor (padrão) - componha tomadas que excluam a identidade. Corte o chrome persistente (barras laterais, avatares, menus de conta) na etapa do ffmpeg.
• Oculte antes de filmar - page.evaluate um visibility: hidden nos cartões ofensivos antes da câmera filmar. Nunca filme e espere cortar ao redor.
• Use uma conta de demonstração pré-populada - a mais limpa quando existir.

Revise cada quadro do corte final em resolução total antes de entregar. Não a folha de contato - os quadros.

Fluxo de trabalho

1. Explore e crie o storyboard

Primeiro, tire capturas de tela autenticadas de cada tela candidata (reference/scout.js). Olhe para elas. Em seguida, escreva uma tabela de storyboard: batida, tomada, o que o espectador deve sentir e a duração. Uma tomada sem trabalho atribuído é cortada antes de ser filmada.

Arco que funciona: tensão (o problema) → revelação (o produto) → prova (ele realmente faz a coisa) → escala (os resultados) → confiança (onde ele roda) → encerramento.

Anote no storyboard quais telas contêm PII e quais são seguras.

2. Prepare o cenário

Selecione antes de filmar, nunca depois:

• Escolha visualizações onde os dados tenham a melhor aparência - gráficos completos, listas ativas, nomes reconhecíveis, contagens diferentes de zero. Nunca filme um spinner, um estado vazio ou um gráfico meio renderizado.
• Defina o estado da UI deliberadamente (larguras de painel, recolhido/expandido, filtros, posição de rolagem) via localStorage em um script de inicialização ou page.evaluate antes da filmagem.
• Descarte toasts, banners e barras de cookies fora da câmera.
• Deixe os dados se estabilizarem: networkidle mais alguns segundos.

3. Filme

Use CDP screencast (Page.startScreencast), não gravação de tela. Ele captura a página fora da tela a ~100fps, para que nada que o usuário esteja fazendo apareça no quadro e a máquina permaneça utilizável. Playwright dirige; CDP filma. reference/rig.js implementa isso.

• Um assunto por tomada. Enquadre a coisa, não "o aplicativo inteiro".
• Movimentos de câmera vêm de rolagem suave com easing scriptada dentro da página (cameraScroll), nunca de um filtro. Veja o aviso sobre zoompan abaixo.
• O cursor é um ator: use o cursor SVG injetado (cursorClick) que desliza com easing e abaixa na pressão, ou oculte-o. Sem deriva ociosa.
• Ensaie cada take, extraia quadros, olhe para eles, ajuste e então filme de verdade.

Filmar uma janela externa (um navegador que o próprio aplicativo abre, um aplicativo de desktop) precisa de captura do SO - gdigrab/x11grab/avfoundation (recordDesktop no rig). Isso captura tudo na tela, incluindo o trabalho do próprio usuário. Avise o usuário, peça que ele se afaste e revise o resultado quadro a quadro; exclua-o se pegou algo privado.

4. Cartões de título

HTML/CSS animado filmado no navegador, não imagens estáticas. Injete a marcação do cartão em uma página em branco na própria origem do aplicativo para que suas fontes da web e paleta se resolvam, e então faça o screencast. Extraia a fonte de exibição real da página ativa (getComputedStyle) e fixe uma pilha mono conhecida em vez de farejar uma.

Corresponda à linguagem de movimento do aplicativo (suas próprias curvas de easing e durações). Carregue a skill frontend-design antes de projetá-los se o projeto não tiver um estilo de cartão estabelecido.

5. Edite

reference/build.js normaliza cada segmento para um tamanho/fps comum e, em seguida, faz crossfade da cadeia. Mantenha cortes a cada ~2.5-4s. Dê ao momento de recompensa espaço em velocidade normal enquanto comprime a rotina ao redor.

6. Revise e entregue

• Gere uma folha de contato e quadros em resolução total por segundo.
• Leia os quadros em busca de PII, painéis cortados e texto ilegível.
• Verifique a duração e as dimensões com uma sonda.
• Entregue um MP4 e, para READMEs, um GIF otimizado por paleta (o GitHub não reproduzirá inline um MP4 commitado). Mantenha o GIF abaixo de ~10 MB.
• Deixe sem áudio, a menos que solicitado; você não pode licenciar música. Diga isso.

Especificidades difíceis

Nunca use zoompan para aproximações. Ele recalcula o zoom por quadro e arredonda a janela de corte para pixels inteiros, então a imagem salta para frente e para trás - parece um terremoto. Use tomadas fixas mais rolagem real na página. Se você precisar de uma aproximação, pré-dimensionie a fonte 4x primeiro e verifique com uma medição de diferença de quadro (reference/jitter.js): uma tomada estática fixa deve medir bem abaixo de 1.0 de delta médio; tremor visível lê 3+.

O screencast para de emitir quadros quando a animação se estabiliza. Um cartão cuja animação termina após 1.2s produz um clipe de 1.2s. Preencha com tpad=stop_mode=clone:stop_duration=N e corte para o comprimento desejado com -t.

Monte quadros com timestamp, não em uma taxa fixa. Os quadros do screencast chegam com metadata.timestamp; escreva uma lista de concatenação ffmpeg com durações reais por quadro, em seguida, reamostre para 60fps constantes. Assumir um intervalo fixo produz trepidação.

ffmpeg-static como uma dependência de desenvolvimento, resolvida pelo caminho do módulo. Nunca dependa do ffmpeg estar no PATH. (ffprobe não está nesse pacote - analise ffmpeg -i stderr.)

Captura autenticada: faça login uma vez com cabeçalho, salve storageState, reutilize-o em todos os takes (reference/login.js). As sessões expiram - termine de filmar no mesmo dia ou execute novamente. Também semeie quaisquer preferências de UI localStorage lá.

Localhost de uma origem implantada é bloqueado pela política de acesso à rede local do Chrome. Se a página precisar acessar um serviço local, inicie com --disable-features=LocalNetworkAccessChecks,PrivateNetworkAccessChecks,BlockInsecurePrivateNetworkRequests.

Corte o chrome persistente em um deslocamento fixo. Filme na largura da viewport 1920 + railWidth, então crop=1920:1080:railWidth:0 para remover a barra lateral e cair exatamente em 1080p.

Entregáveis

Relate o caminho, a duração e as dimensões; declare claramente o que ainda é necessário do usuário (música, um upload de vídeo nativo do GitHub); e divulgue qualquer coisa que tenha acontecido durante a filmagem que ele gostaria de saber.