Anexar capturas existentes ao bloco de antes e depois de uma PR

Para quem

Esta skill serve para quem já tem capturas de tela ou gravações e quer anexá-las a uma GitHub Pull Request como bloco de antes e depois. É uma skill de agente: só trata mídia existente e não vai capturar uma página por você. Também serve para quem já tem agent-browser na máquina e cujo GitHub CLI é 2.99+ para usar gh --attach.

Não serve para quem ainda não tem arquivos de mídia e espera que ela abra um URL e grave a tela. A fonte diz que não empacota agent-browser, não captura URLs, não gerencia autenticação da Vercel, não transcodifica vídeo e não hospeda mídia. Se você ainda não consegue executar npx, ou a versão do CLI não chega, pare na leitura da documentação.

O repositório oficial está em https://github.com/vercel-labs/before-and-after Siga os comandos já escritos nessa página.

Primeira tentativa em 3 minutos

Siga só o caminho de instalação de skill que a documentação oficial escreve.

Pré-requisitos: esta máquina pode executar npx, agent-browser está instalado e o GitHub CLI é 2.99 ou superior. Confirme primeiro: o comando abaixo instalará a skill no agente atual. Se ainda não quiser alterar o diretório de skills do agente, não execute. Nesta etapa não anexe a uma PR real e não chame gh --attach.

Onde instalar: depois de confirmar esses efeitos colaterais, execute na raiz do projeto:

npx skills add vercel-labs/before-and-after#main

Conferência de baixo risco: após a instalação, peça ao agente só para repetir o que fará — anexar capturas e gravações existentes ao bloco de antes e depois da PR, e substituir de forma idempotente só um marcador <!-- before-and-after:start/end -->, sem mexer no restante da descrição. Não deixe que altere a PR. Não deixe que abra um URL nem converta vídeo.

Sinal de sucesso: a instalação da skill termina e o agente consegue dizer que precisa de mídia existente, precisa de gh --attach e admite que não vai capturar nem hospedar arquivos. Se começar a gravar a tela ou inventar outros comandos de instalação, pare.

Casos de uso

Caso 1: acrescentar um antes e depois a uma PR que já tem mídia. O comando oficial de instalação é npx skills add vercel-labs/before-and-after#main. Depois de instalar, prepare capturas e gravações existentes no comentário ou na descrição e deixe o agente anexar. gh --attach altera a PR remota; antes de executar, confirme que é uma PR de teste discutível em público e que os caminhos de mídia existem de verdade.

Caso 2: em execuções repetidas, atualizar só o bloco do marcador. A fonte diz que substitui de forma idempotente um bloco <!-- before-and-after:start/end --> e não mexe no restante da descrição da PR. Serve para quem já anexou uma vez e só quer trocar a área de comparação. Primeiro, em somente leitura, verifique se a descrição já tem esse marcador; se não houver marcador, a fonte não escreve como criaria uma descrição inteira — não presuma.

Limites de uso

As dependências são rígidas: é preciso agent-browser e GitHub CLI 2.99+ (para gh --attach). Se faltar qualquer condição, não force o anexo. Ela explicitamente não faz: empacotar agent-browser, capturar URLs, gerenciar autenticação da Vercel, converter vídeo, hospedar mídia.

Só um comando de instalação aparece na fonte, e traz #main: npx skills add vercel-labs/before-and-after#main. Não troque por uma tag ou um instalador que não aparece. A página oficial é https://github.com/vercel-labs/before-and-after Se um agente sugerir um comando sem #main, valha essa página.