Filme de demo

O que Filme de demo faz?

scripts/demo filma uma aplicação web e escreve seu corpus em ~/demo-reels-out/<workspace>/ (DEMO_OUT_ROOT move o pai, DEMO_OUT nomeia o diretório de uma execução): por cena um mp4 com narração, um poster, stills retina, além de full-tour.mp4, manifest.json e index.html. Tudo local. O mecanismo é executado a partir desta skill; nada é instalado no aplicativo que está sendo filmado.

Não negociáveis

Cada um desses custa uma execução ou a paciência de um usuário.

1. Uma build fixada, nunca um servidor de desenvolvimento. Seu grafo de módulos pertence a quem estiver editando o código-fonte. Copie-o para algum lugar privado e verifique sua base de API lendo o bundle. Uma URL sem um repositório por trás é modo site; uma URL em localhost é um servidor de desenvolvimento e nunca é filmada.
2. No modo build, simule todas as requisições em processo e fixe o relógio. Um corpus é publicado, e uma conta real publica endereços de pessoas reais. O modo site abre mão de ambos conscientemente: apenas páginas públicas.
3. Possua sua porta e diretório de saída. O estúdio se recusa a adotar um servidor que não iniciou. Nunca use pkill por padrão.
4. Vídeo 1080p60, stills 2x. São configurações separadas. Vídeo 4K treme porque a taxa de transferência é um orçamento fixo de pixels por segundo.
5. Faça o gesto, depois narre enquanto amplia o resultado. Um assunto por linha. Nunca narre antes do assunto existir. Onde o aplicativo tem seu próprio temporizador — uma janela de desfazer, um toast — o gesto acontece dentro dele e as palavras depois, ou o filme mostra uma funcionalidade que não funciona.
6. Uma cena, depois pare e pergunte (passo 8). Isso pegou quatro defeitos antes de mais vinte e seis cenas serem filmadas.
7. Leia o PNG, toda vez. Uma cena que passa enquanto enquadra a coisa errada é uma falha, e apenas um olho no still a detecta.
8. Nada é final até que eles digam. Qualquer observação sobre as palavras, o enquadramento, o ritmo, o que é coberto ou a voz é uma refilmagem, não uma negociação: mude e filme novamente. Eles não podem ver o que você pode, então "muito longo", "aproxime mais" e "pare de aproximar tanto" são instruções completas, e uma cena é barata de filmar duas vezes.

Fluxo de trabalho

1. Escolha o modo a partir do que foi fornecido. Não pergunte. Uma URL http(s) em um host público é site, workspace ~/.shipdemo/<host>/. Uma URL em localhost ou um endereço privado é um servidor de desenvolvimento: encontre o repositório por trás dele e trate a solicitação como aquele repositório. Sem URL significa o repositório em que você está, então suba e procure por um aplicativo web (um package.json com um script de build ao lado de uma configuração Vite, React Router, Next, Astro, SvelteKit ou Remix). Exatamente um é build; vários, pergunte qual; nenhum, peça uma URL ou um caminho. Um workspace cujo .origin já nomeia este repositório é reutilizado, não recriado. Diga o modo e o caminho do workspace em uma linha e prossiga.
2. scripts/doctor.sh, depois prepare-se antes de pedir qualquer outra coisa ao usuário. Eles instalaram uma skill; eles não se inscreveram para executar três scripts. Diga o que está faltando em uma linha, diga o que você propõe instalar e aproximadamente o tamanho, e execute assim que eles concordarem. scripts/install.sh cobre o mecanismo e o Chromium (cerca de 250MB) e também instala ffmpeg onde um gerenciador de pacotes permite; scripts/install-voice.sh é a voz (~350MB), e filmar sem som é uma resposta aceitável se eles preferirem. Nunca instale nada sem perguntar, e nunca entregue a eles um relatório do doctor para interpretar. Duas coisas que ele não fará, e nem você deve: atualizar o Node deles, porque saber qual ferramenta o gerencia é responsabilidade deles, e executar sudo, porque um prompt de senha em um script que ninguém está assistindo apenas trava. Em ambos os casos o script imprime o comando único e você o repassa.
3. Descubra, sem escrever nada. site: abra a URL e leia-a, para saber do que se trata a página, as três coisas que valem a pena mostrar e o que é estável o suficiente para apontar. Se ela cair em uma tela de login, pare: um aplicativo logado é filmado a partir do seu repositório, então peça por ele ou por uma URL pública. build: o comando de build copiado literalmente de package.json; o diretório de saída da configuração do framework; qualquer host de API absoluto em .env* (vai em build.forbid); a chave que o script de tema lê; uma API de fixture existente ou handlers MSW; densidade de data-testid; rotas sem credencial.
4. scripts/scaffold.mjs <appRoot>, ou scripts/scaffold.mjs --site <url>. Nenhum deles escreve nada no aplicativo.
5. Preencha o demo.config.ts do workspace. Um campo obrigatório ainda desconhecido significa que a descoberta não está completa. config.md
6. Apenas build: escreva mock.ts e seed/. Reutilize as próprias fixtures de dados do repositório onde ele as tiver, mas nunca um arquivo que importe @playwright/test: duas cópias em uma execução é um erro que o Playwright se recusa, e ele falha em todo o corpus em vez da única cena que o causou. Então DEMO_VOICE=0 scripts/demo --grep smoke. Reutilize a API de fixture do repositório se ele tiver uma (mocking.md). Leia o still: logado, dados semeados, tema correto, nenhuma página de login. Leia a linha de captura. Corrija até que ambos estejam corretos, então escreva demo/ui.ts apenas com o que a execução smoke provou.
7. Escreva o roteiro primeiro. Preencha o profile.json do workspace (copie template/profile.json; produto, público, linha de encerramento, palavras proibidas), depois escreva cada linha de acordo com script.md: gancho, passos, recompensa, encerramento. O gancho também vai em hooks.json para as variantes. Filme o que foi solicitado, no escopo que foi solicitado. Uma funcionalidade nomeada é uma cena: escreva-a, filme-a, entregue-a. Não responda "grave a pesquisa na página inicial" com uma proposta de dez cenas, e não alargue silenciosamente o pedido porque o produto tem mais conteúdo. Apenas quando a solicitação é o produto inteiro você propõe 6 a 10 cenas, cada uma com um título e uma descrição de uma linha na ordem do tour, e pergunta qual filmar primeiro.
8. PARE. Filme aquela única cena com voz. Verifique se a contagem falada corresponde às chamadas say, nada excedeu, a taxa se manteve. Leia cada still. Dê ao usuário o caminho do mp4 e pergunte sobre o registro da escrita, a escala de zoom, o ritmo e a voz. Não escreva mais nada até que eles respondam.
9. Depois, lotes de três ou quatro via --grep; o manifesto faz merge. Leia os stills após cada lote. DEMO_BUILD=0 scripts/demo pula a reconstrução enquanto itera em uma cena — vinte segundos em vez de quatro minutos; remova-o para a execução que produz o corpus.
10. Execução completa com DEMO_CAPTIONS=1 DEMO_TRACE_FRAMES=1, depois scripts/check.mjs <out> e abra <out>/index.html. Relate a tabela de captura, quaisquer clipes lentos e todas as bandeiras que as verificações levantarem.
11. Variantes. Pergunte quais eles querem, a menos que eles tenham dito: reel, wide-phone, wide-laptop, wide-laptop-zoom, web ou all (scripts/variants.mjs --list descreve cada uma). Então scripts/variants.mjs <out> --only <list>. Presets de telefone usam gravações em retrato e presets de laptop em paisagem, então filme ambos os tamanhos quando eles quiserem ambos. Leia um poster por variante antes de entregá-los.

Uma cena

scene('tasks', { title: 'Suas tarefas, ao lado do seu calendário', blurb: '...' },
  async ({ actor, page, shot }) => {
    await actor.click(page.getByRole('radio', { name: 'Hoje' }));
    await actor.settle();
    await actor.spotlight(
      row('Enviar o feedback para Sam'),
      'E esta é de ontem que eu nunca consegui fazer, então está sinalizada.',
      { scale: 1.8, stay: true }
    );
    await shot('atrasada');
    await actor.unfocus();
  });

spotlight recebe a marca de narração, então move a câmera e o cursor sobre as palavras iniciais da linha. Escala por assunto: painel ~1.4, linha ~1.7, controle único ~2. Uma linha sobre a tela inteira recebe um say simples e sem zoom. unfocus é uma dica em vez de um movimento: a câmera só sai quando algo precisa estar amplo, então batidas consecutivas sobre a mesma região deslizam em vez de saltar. scenes.md · narration.md

Nunca

Cloud TTS (o filme é de dados privados). Playwright's recordVideo (sem controle de taxa, tamanho ou início; o gravador substitui). 4K como padrão. Música, cartões de introdução ou cross-fades. Cenas geradas a partir de um rastreamento de rotas: uma cena é uma coreografia com um propósito. Tentativas: uma cena repetida é um filme diferente.

Legendas, verificações e variantes

Legendas estão ativadas para qualquer coisa destinada a ser postada (DEMO_CAPTIONS=1): .srt, .vtt, .lines.json e um .captioned.mp4, cortado do próprio roteiro, para que correspondam à voz palavra por palavra. Legendas fixadas ficam na parte inferior, elevadas acima dos controles do player (DEMO_CAPTION_MARGIN substitui; nunca no topo).

scripts/check.mjs executa três verificações: voz (cada linha transcrita e comparada com seu roteiro), tela (a cada meio segundo lido em busca de palavras do neverOnScreen do perfil, depois qualquer coisa desenhada em vermelho) e quadros (lacunas lentas). Uma ferramenta faltando é ignorada com o comando para instalá-la (scripts/install-checks.sh). Vermelho que pertence ao lugar, como um emblema de atraso, também é listado: leia a lista, não o conte.

scripts/variants.mjs lê variants/presets.json. Uma nova variante é uma nova entrada lá: canvas, onde o aplicativo se senta, onde o gancho e as legendas vão, e zoom se deve aproximar nos destaques. Nada é refilmado; os originais nunca são tocados.

Também

DEMO_VOICE_VARIANTS=am_michael,bf_emma mistura a mesma tomada em mais vozes (<scene>.<voice>.mp4), para audicionar uma voz sem refilmar.

capture.md antes de alterar qualquer número de captura. runs.md para builds, isolamento e o manifesto. troubleshooting.md quando uma execução morre ou um shot parece errado. O mecanismo é executado a partir desta skill, então uma correção em engine/ alcança todos os projetos na máquina de uma vez: edite-o lá, e nada precisa ser propagado.