Communitygithub.com

gquthier/autonomous-sop-video

Produz vídeos SOP narrados e passo a passo a partir de workflows de software verificados, com capturas de tela reais, zooms direcionados em botões, lista de verificação lateral, legendas e capítulos. Útil para tutoriais de clientes, integração de equipes e procedimentos operacionais repetíveis.

O que é autonomous-sop-video?

Este skill transforma um workflow observado de software em um vídeo SOP (Procedimento Operacional Padrão) completo, narrado e passo a passo, que um iniciante pode seguir sem adivinhar. Ele suporta plataformas como Claude Code, Cursor e Codex, e utiliza agentes especializados para produção, captura de tela real, geração de voz e renderização de vídeo. O skill é útil para criar tutoriais de clientes, materiais de onboarding e documentação de procedimentos repetíveis. Ele entrega o código-fonte editável, o MP4 final, legendas (SRT/VTT), metadados de capítulos e um relatório de verificação. O processo começa com a leitura do briefing existente e a resolução de incógnitas essenciais, seguido pela atribuição de um produtor responsável. A produção inclui observar o procedimento, escrever um roteiro didático, gerar a narração (por exemplo, com ElevenLabs), construir a sequência visual com layout limpo (fundo branco, azul para títulos, navegação escura), adicionar legendas e capítulos sincronizados, e verificar a qualidade do resultado. O skill lida com limitações de forma transparente, completando o trabalho autorizado e relatando exatamente o que está faltando.

Funciona com~Claude Code✓Codex CLI✓Cursor
npx skills add gquthier/autonomous-sop-video

Perguntar na sua IA favorita

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

Documentação

Vídeo SOP

Transforme um workflow observado em um vídeo que um iniciante pode seguir sem precisar adivinhar. Entregue o código-fonte editável, o MP4, as legendas, os metadados de capítulos e um breve relatório de evidências. O idioma padrão é o do usuário; use francês quando solicitado. O visual padrão é branco, azul e contido.

Comece pela solicitação real

Leia o briefing e os ativos existentes antes de fazer perguntas. Resolva apenas incógnitas que alteram o resultado: a tarefa, o público, o software/versão, o modo de narração e o destino da saída. Respeite um pedido de piloto antes de produzir uma série.

Escreva BRIEF.md no projeto de saída com o resultado que o aprendiz deve alcançar, pré-requisitos, escopo, idioma, narração, ações autorizadas e formatos de entrega. Um pedido para criar/exportar um vídeo já autoriza sua renderização local. Não adicione uma etapa de aprovação de rotina. Uploads públicos e alterações reais de conta exigem a autorização correspondente.

Atribua um produtor responsável

Quando a delegação estiver disponível, atribua um agente produtor usando agents/producer.md. Dê a ele propriedade limitada de arquivos, o briefing, permissões de captura e critérios de aceitação. O agente coordenador revisa o resultado e o entrega. Não divida cenas entre vários agentes, a menos que o usuário solicite produção paralela.

O produtor pode usar um modelo verificado por meio de um runtime de agente disponível ou CLI do provedor. Siga references/models.md para seleção, um teste curto de movimento, identidade do modelo e evidências de uso. Nunca invente um identificador de modelo ou renomeie silenciosamente uma solicitação ambígua como "O3.5". Se o runtime solicitado não estiver disponível, informe a limitação e use o agente atual para preparação independente; pergunte apenas se uma escolha de modelo necessária bloquear a produção.

Sem uma ferramenta de delegação, execute a mesma função de produtor no agente atual e informe isso. agents/openai.yaml descreve a descoberta; ele não cria um agente em segundo plano nem escolhe um modelo automaticamente.

Produza o vídeo

  1. Observe o procedimento. Leia references/capture-and-audio.md. Use a ferramenta de captura de navegador/nativa permitida, sessão conectada, gravação fornecida ou documentação pública verificada. Registre a tela exata, texto do botão, dimensões nativas da imagem, data da captura, variante da UI e se uma ação foi realmente executada. Nunca invente UI para um produto real.
  2. Escreva o roteiro didático. Uma ação ou decisão por batida: para onde ir, o que clicar, o que verificar, como é o sucesso. Forneça o pré-requisito necessário e o caso de bloqueio comum. Evite narrar um clique que o vídeo não possa mostrar. Adicione uma captura de tela indicativa para cada etapa acionável e cada modal/aba alterada; reutilize uma tela com um novo corte quando isso for mais claro.
  3. Crie ou use a voz primeiro. Escolha ElevenLabs, uma voz fornecida/gravada autorizada ou a ferramenta de narração disponível no ambiente. Meça a duração real do áudio antes de organizar as cenas. Mantenha voz/modelo/configurações estáveis em uma série. Preserve pausas naturais e adicione tempo de espera suficiente para inspecionar botões. Nunca gere uma voz silenciosamente quando o usuário selecionou sua própria gravação.
  4. Construa a sequência visual. Siga references/production.md. Use o starter executável abaixo ou adapte o projeto aprovado. Fundo branco #FFFFFF, títulos/acentos azul #1565D8, texto azul marinho #102A43. Uma captura de tela grande ocupa a esquerda; uma pequena lista de verificação de ações permanece à direita. Mova a câmera para as coordenadas reais do botão, mantenha o rótulo relevante visível e use um cursor/halo. Adicione painéis explicativos apenas quando eles melhorarem a compreensão.
  5. Legende e crie capítulos. Alinhe as legendas com a fala medida e divida em dicas legíveis. Não deixe uma dica sobreviver à sua cena. Os capítulos devem usar a mesma linha do tempo que o vídeo renderizado; entregue capítulos em texto/VTT e incorpore-os ao MP4. A UI de capítulos do player varia, então mantenha os arquivos sidecar.
  6. Verifique e entregue. Execute o validador de manifesto e as verificações do renderizador, inspecione cada cena, observe as principais transições de clique e verifique o MP4 exportado separadamente. Relate limitações reais e ações reais tomadas. Um arquivo existente não é prova de reprodução ou enquadramento correto.

Starter executável

A demonstração incluída usa UI sintética, explicitamente rotulada na tela, e não tem narração. É um exemplo técnico, não uma evidência sobre um aplicativo real.

Requisitos: Python 3.10+, Node.js compatível com a versão selecionada do HyperFrames, FFmpeg/ffprobe e o Chrome suportado pelo renderizador. npx baixa o renderizador fixado no primeiro uso; GSAP é obtido de sua CDN declarada durante a compilação. A pré-visualização/renderização local não requer uma conta ElevenLabs. Use a documentação atual do renderizador se uma verificação de dependência falhar.

No diretório deste skill:

python3 scripts/sop.py init /caminho/para/novo-sop
cd /caminho/para/novo-sop
node build.mjs
npm run check
npm run preview -- --background
npm run render -- --quality delivery --output renders/video.mp4 --workers 1

Para codificação GPU, adicione --gpu apenas quando suportado. O starter fixa uma versão testada do renderizador para reprodutibilidade; verifique as atualizações antes de alterá-la. Se o skill HyperFrames estiver instalado, use suas diretrizes atuais de composição e verificação. Este pacote inclui o contrato essencial e funciona sem um diretório de skill privado.

Defina SKILL_DIR para o diretório instalado deste skill, então:

python3 "$SKILL_DIR/scripts/sop.py" validate sop.json --probe
python3 "$SKILL_DIR/scripts/sop.py" chapters sop.json --output delivery
python3 "$SKILL_DIR/scripts/sop.py" embed renders/video.mp4 delivery/chapters.ffmetadata delivery/video.mp4

init recusa um destino não vazio. embed recusa sobrescrever uma saída e copia fluxos sem recodificação. Veja references/manifest.md para campos e temporização. O helper não gera vozes, faz login em sites ou faz upload de arquivos.

Critérios de aceitação

  • O aprendiz consegue localizar cada botão descrito e ver o estado resultante, ou um estado não executado/de exemplo claramente indicado.
  • Os dados da tela são anonimizados nos pixels reais exportados. A fonte pública contém apenas ativos aprovados; nunca inclua capturas brutas privadas, credenciais, cookies ou arquivos de sessão.
  • O texto pequeno da UI permanece legível no tamanho de visualização pretendido; os zooms preservam o contexto. Nenhuma sobreposição de lista de verificação/legenda ou períodos ociosos inexplicados.
  • O áudio não tem fala cortada, cortes abruptos, frases faltando ou mudanças de voz instáveis. Use uma sonoridade consistente e medida e inspecione os picos.
  • Legendas e capítulos concordam com a duração final. O quadro final mostra um resultado/lista de verificação útil, em vez de preto acidental.
  • A entrega inclui MP4, SRT, VTT, texto/VTT de capítulos, fonte editável, proveniência das capturas de tela, evidências de uso do modelo/voz quando disponíveis e um relatório de QA declarando o que foi realmente testado.

Se a captura, narração, renderização ou publicação estiver bloqueada, complete o trabalho autorizado independente e informe exatamente a capacidade faltante. Não descreva um storyboard, tela sintética ou pré-visualização silenciosa como o vídeo SOP narrado final.

Habilidades Relacionadas