VisroliyaHimanshu/jsxreel

O que jsxreel faz?

Visão Geral

Um vídeo aqui são cenas React animadas no Remotion, narradas pela ElevenLabs, com cada batida sincronizada com a palavra falada. A interface do aplicativo e do fornecedor é sempre reconstruída, nunca mostrada como capturas de tela, gravações de tela ou uma apresentação de slides do storyboard. Uma imagem fornecida que seja em si o conteúdo (uma assinatura, um logotipo, uma foto de produto) pode aparecer como imagem. Cada produto mantém seu próprio projeto de vídeo e sua própria aparência; esta habilidade contém o processo e as ferramentas em scripts/ no diretório base desta habilidade (mostrado quando a habilidade carrega).

Projetos

Leia ~/.claude/jsxreel/projects.md primeiro, se existir (a lista privada do usuário, mantida fora da habilidade para que as atualizações nunca a toquem: pasta, notas para ler, comando de voz, convenções). Em seguida, leia as notas do próprio projeto. Um projeto não listado: pergunte ao usuário onde ele está e, em seguida, adicione uma linha lá.

Novo projeto: um projeto Remotion dentro do repositório do produto, com scripts/tts.mjs e scripts/stills.mjs copiados desta habilidade (stills.mjs vai em qa/). Nunca os visuais de outro produto.

Fluxo de Trabalho

1. Tipo: guia de aplicativo, anúncio de storyboard ou esquete promocional. Leia sua seção em kinds.md.
2. Pergunte com AskUserQuestion (Recomendado primeiro, no máximo 4): formato, duração alvo, finalização, e apenas o que o material e as notas do projeto não podem responder.
3. Verifique o material antes de escrever: cópia do storyboard (afirmações técnicas incorretas, travessões, texto longo demais para narrar); cada instrução na tela (caminhos de menu, rótulos) em relação à documentação atual do fornecedor ou ao código do aplicativo; dados pessoais nos ativos fornecidos. Use o que o usuário forneceu, sinalize, pergunte. Nunca troque silenciosamente. Segredos (um QR code ativo, um token, uma senha) nunca aparecem na tela; desenhe um fictício.
4. Roteiro scripts/<video>.json: uma linha por cena, marks para cada batida (exata, frase sensível a maiúsculas/minúsculas, única em sua linha), say para formas faladas (números, URLs). Orçamento de cerca de 2,6 palavras/s mais 0,5 s por cena. Mostre o roteiro inteiro como uma tabela; gaste créditos somente após aprovação.
5. Voz: uma tomada por voz, cortada por alinhamento (node scripts/tts.mjs <video> para um narrador). Transcreva os clipes (fala para texto da ElevenLabs, POST /v1/speech-to-text, modelo scribe_v1, ou a ferramenta do próprio projeto) para confirmar que cada um contém suas próprias palavras; custa alguns centavos por tomada. Em seguida, aperte: python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix> (original mantido em .voice-orig/, veja --help). Esquetes mantêm suas pausas cômicas. Em uma sessão em nuvem, a chave ElevenLabs vem de um segredo de rede (ELEVENLABS_API_KEY=proxy, veja a seção do navegador no README); nunca peça ao usuário para colar uma chave no chat.
6. Construção: data.ts, timeline.ts, cenas, CSS em seu próprio arquivo com um novo prefixo de classe. Duração da cena = max(MIN, LEAD + clipe + TAIL), LEAD cerca de 0,15, TAIL cerca de 0,2; MIN cobre o último evento da cena + 0,6 s; uma demonstração de clique obtém um LEAD mais longo para que a interface fique visível antes do primeiro clique. Registre em Root.tsx, adicione scripts voice:/render: e anote o vídeo nas notas do projeto (README ou plano).
7. QA (abaixo), depois relatório: caminho mp4 absoluto, duração em relação ao alvo, suposições a confirmar (dados de amostra, rótulos de interface reconstruídos, qualquer linha aprovada que você alterou, antigo e novo lado a lado), o que verificar de ouvido. Confirme apenas quando solicitado.

QA

• npx tsc --noEmit; node qa/stills.mjs <Comp> <frames…> (re-execute se a primeira chamada após uma edição falhar).
• Cada toque ou clique em seu quadro de pressionamento, empilhados em uma única folha de contato: o dedo ou cursor está sobre o alvo.
• 4 a 5 quadros em cada transição.
• ffprobe duração; volume por projeto (guias: média cerca de -21 dB; redes sociais: cerca de -14 LUFS, pico de no máximo -0,8 dB); silencedetect para lacunas acima de cerca de 1,3 s que não sejam batidas cômicas deliberadas.
• Alterou um arquivo compartilhado: renderize um quadro de um vídeo mais antigo, PSNR deve ser inf.
• Exclua os PNGs de QA.

Erros Comuns

Erro	Correção
Ritmo natural da ElevenLabs	Os usuários o acham lento. Aperte antes da primeira renderização.
Gravar antes de verificar os rótulos da interface	Verifique a documentação do fornecedor ou o código do aplicativo primeiro; uma regravação custa créditos.
Uma solicitação TTS por linha	A voz muda entre as linhas. Uma tomada por voz.
Tempos de batida codificados	Marcas; uma nova tomada ajusta tudo novamente.
Confiar no alinhamento cegamente	eleven_v3 diálogo desviava cerca de 0,75 s. Transcreva os clipes.
Aparência de outro projeto	Kit próprio de cada produto; um storyboard mantém sua própria aparência.
style do chamador espalhado em um wrapper que define transform	O transform do chamador vence e a escala é perdida. Coloque o estilo do chamador em um div externo.
zsh: $LIST não divide palavras, ==== é um erro	Listas inline; construa filtros ffmpeg em Python.
Porta 3000 ocupada	Um --port livre.
Sem Chrome na máquina	Qualquer navegador Chromium funciona (Chromium, Edge, Brave via --browser-executable); sem nenhum, remova a flag e o Remotion baixa seu próprio Chrome headless. stills.mjs escolhe um sozinho. Firefox e Safari não podem renderizar.
URLs digitadas manualmente no relatório	Apenas caminhos locais.