Communitygithub.com

ahmadrashad1/video

Produza um vídeo de demonstração narrado no estilo Loom (MP4, 1080p, com a própria voz clonada do usuário via Fish Audio, legendas, sem webcam) que mostra um site ou aplicativo web.

O que é video?

Esta skill capacita agentes de IA (como Claude Code) a planejar, gravar, narrar e produzir vídeos de demonstração narrados de aplicações web, resultando em um arquivo MP4 1080p de alta qualidade, semelhante a um Loom. Ela é particularmente útil para criar walkthroughs, tutoriais e demonstrações de produtos sem exigir que o usuário grave manualmente ou edite o vídeo. A skill opera através de um comando `loom` no terminal, que gerencia todo o processo: desde a inspeção da aplicação e criação de um plano de cenas aprovado, até a narração usando Fish Audio (com a voz clonada do usuário), gravação da tela, renderização com legendas e verificação de qualidade. Ela suporta a retomada de projetos parciais, rejeita ações destrutivas sem aprovação explícita e garante que cada cena seja genuinamente gravada, sem imagens fabricadas. A skill segue um fluxo de trabalho rigoroso em 9 etapas (Configuração de Voz, Entendimento, Inspeção, Plano, Narração, Gravação, Renderização, Verificação e Relatório) para garantir um resultado confiável e profissional.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ahmadrashad1/loom-skill/tree/HEAD/skills/video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Vídeo de demonstração narrado

Você planeja e conduz a demonstração. O comando loom (no seu PATH enquanto este plugin estiver habilitado) cuida da narração, gravação, renderização e verificação. Execute-o como loom … de qualquer diretório. Os vídeos são salvos na pasta de gravações mostrada por loom status (padrão ~/Videos/loom/<slug>/). Abaixo, <rec> significa essa pasta.

Solicitação: $ARGUMENTS

Se a solicitação for o slug de uma gravação existente (loom status lista eles), retome-a a partir de seu primeiro passo incompleto abaixo. Um plano não aprovado ainda precisa de aprovação.

Regras inegociáveis

  1. Nunca grave um plano não aprovado. Escreva o plano com "approved": false, mostre-o ao usuário e defina-o como true somente após a aprovação dele (ou se ele disse explicitamente para prosseguir sem revisão).
  2. Ações destrutivas ou irreversíveis (excluir, comprar, implantar, enviar, pagamento, alterar configurações de produção) devem ser marcadas com "destructive": true e precisam da autorização explícita do usuário para este vídeo antes de passar --allow-destructive.
  3. Nenhum segredo em plan.json ou narração. Senhas/tokens digitados usam "secret_env": "VAR"; chaves, e-mails, tokens, números de conta na tela vão em "redact" (seletores CSS, desfocados durante todo o vídeo). Nunca imprima o conteúdo de ~/.config/loom/*.env.
  4. Nenhuma filmagem fabricada. Cada cena deve ser realizada de verdade pelo gravador. Se uma cena falhar, corrija o plano e regrave. Nunca finja um resultado e nunca apresente um vídeo cujo loom verify falhou como finalizado.
  5. Sem webcam, apenas a própria voz. A narração usa o modelo de voz Fish Audio do próprio usuário. Nunca use ou sugira a voz de outra pessoa sem a permissão dela.

Fluxo de trabalho

0. Configuração de voz (primeira execução)

Execute loom status. Se aparecer VOZ NÃO CONFIGURADA, configure a voz antes de qualquer outra coisa; siga a skill /loom:setup (${CLAUDE_PLUGIN_ROOT}/skills/setup/SKILL.md). Peça ao usuário o ID do seu próprio modelo de voz Fish Audio; nunca invente ou reutilize um. Se ele não quiser configurar agora, você pode continuar com --provider espeak como uma voz robótica de visualização, e diga claramente que não é a voz dele.

A. Entender

Descubra: qual aplicativo/URL, o resultado que o espectador deve alcançar, o público-alvo e se é necessário login. Se um desses pontos não estiver claro, faça uma pergunta concisa; caso contrário, prossiga com suposições sensatas e as declare.

B. Inspecionar o aplicativo real

loom inspect <url> --out <rec>/<slug>/inspect

Leia a captura de tela (<rec>/<slug>/inspect/page.png) e use os seletores impressos. Inspecione cada página que a demonstração visitará (siga o fluxo) para que os seletores sejam reais, não adivinhados. Prefira #id, [data-testid=…], depois role=button[name="…"] e depois text=…. Arquivos locais funcionam como URLs file:///….

C. Escrever o plano

Crie <rec>/<slug>/plan.json seguindo ${CLAUDE_PLUGIN_ROOT}/skills/video/reference/plan-schema.md. Diretrizes:

  • 4 a 10 cenas; comece com uma cena de title e termine com uma cena de recapitulação curta.
  • Narração: em primeira pessoa, conversacional, como um colega gravando um Loom. 1 a 3 frases por cena (≈ 6 a 20 s). Descreva o que o espectador vê enquanto acontece; não leia seletores ou URLs caractere por caractere.
  • As ações são executadas enquanto a narração daquela cena é reproduzida; mantenha-as curtas o suficiente para caber (≈ 2,6 palavras por segundo de fala). Divida fluxos longos em mais cenas.
  • Adicione expect a cada cena que mude de estado, para que falhas sejam detectadas.
  • loom validate <slug> até passar.

Apresente o plano ao usuário como uma tabela (cena · o que acontece na tela · narração) mais qualquer ação destrutiva, segredos necessários e a duração estimada. Pare e aguarde a aprovação. Após a aprovação, defina "approved": true.

D. Narrar

loom voice <slug>: um WAV por cena na voz clonada (em cache; apenas cenas alteradas são regeneradas). Verifique se as durações parecem razoáveis.

E. Gravar

loom record <slug> (adicione --allow-destructive apenas conforme a regra 2). Se falhar, leia o erro e <rec>/<slug>/raw/failure-<scene>.png, corrija seletores/esperas no plano e execute novamente. Reinspecione páginas se necessário.

F. Produzir

loom render <slug> (--captions burn se o usuário quiser legendas embutidas; o padrão é uma faixa de legenda incorporada mais subtitles/captions.srt).

G. Verificar (sempre)

loom verify <slug> e, em seguida, olhe cada miniatura em <rec>/<slug>/scenes/*.jpg com a ferramenta Ler: o estado esperado da tela está visível, algo sensível ficou sem redação, há páginas de erro ou banners de cookie cobrindo o conteúdo? Se um aviso disser que as ações ultrapassaram a narração, considere dividir essa cena. Corrija e refaça as etapas necessárias até passar.

H. Relatar

Forneça o caminho para <rec>/<slug>/final_video.mp4, sua duração, a lista de cenas e quaisquer ressalvas (por exemplo, voz de visualização usada). Mencione que a visualização integrada do VS Code reproduz MP4s sem som; use um player de vídeo normal. Atalho para as etapas D a G após um plano aprovado: loom run <slug>.

Solução de problemas

  • loom: comando não encontrado → o bin/ do plugin não está no PATH; execute ${CLAUDE_PLUGIN_ROOT}/bin/loom.
  • loom precisa de uv → diga ao usuário para instalar o uv (o comando é impresso).
  • Elemento não encontrado → execute novamente loom inspect nessa página; adicione wait_for.
  • Banner de cookies/consentimento → adicione um click no botão de aceitar na primeira cena.
  • Login → type com secret_env; peça ao usuário para exportar a variável.
  • Fish Audio 401 → chave de API inválida. 402 → sem crédito de API para aquele modelo; sugira adicionar crédito ou alterar a configuração do modelo do plugin para s2.1-pro-free.
  • Demonstrações de desktop (não navegador) → --recorder obs (OBS deve estar em execução com WebSocket habilitado e uma cena de captura de tela). Este caminho é experimental.

Habilidades Relacionadas