Adjuntar capturas existentes al bloque de antes y después de una PR

Para quién

Esta skill sirve a quien ya tiene capturas o grabaciones de pantalla y quiere adjuntarlas a una GitHub Pull Request como bloque de antes y después. Es una skill de agente: solo trata medios existentes y no capturará una página por ti. También encaja con quien ya tiene agent-browser en local y cuyo GitHub CLI es 2.99+ para poder usar gh --attach.

No sirve a quien aún no tiene archivos de medios y espera que abra una URL y grabe la pantalla. La fuente dice que no envuelve agent-browser, no captura URL, no gestiona la autenticación de Vercel, no transcodifica vídeo y no aloja medios. Si aún no puedes ejecutar npx, o la versión del CLI no alcanza, quédate en leer la guía.

El repositorio oficial está en https://github.com/vercel-labs/before-and-after Sigue los comandos ya escritos en esa página.

Primer intento en 3 minutos

Sigue solo la ruta de instalación de skill que escribe la documentación oficial.

Requisitos previos: esta máquina puede ejecutar npx, agent-browser está instalado y GitHub CLI es 2.99 o superior. Confirma primero: el comando de abajo instalará la skill en el agente actual. Si aún no quieres cambiar el directorio de skills del agente, no lo ejecutes. En este paso no adjuntar a una PR real y no llames gh --attach.

Dónde instalar: tras confirmar esos efectos secundarios, ejecuta en la raíz del proyecto:

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

Comprobación de bajo riesgo: al terminar la instalación, pide al agente solo que recuerde qué hará: adjuntar capturas y grabaciones existentes al bloque de antes y después de la PR, y reemplazar de forma idempotente solo un marcador <!-- before-and-after:start/end -->, sin tocar el resto de la descripción. No dejes que modifique la PR. No dejes que abra una URL ni convierta vídeo.

Señal de éxito: la instalación de la skill termina y el agente puede decir que necesita medios existentes, necesita gh --attach y admite que no capturará ni alojará archivos. Si empieza a grabar la pantalla o inventa otros comandos de instalación, para.

Casos de uso

Caso 1: añadir un antes y después a una PR que ya tiene medios. El comando oficial de instalación es npx skills add vercel-labs/before-and-after#main. Tras instalar, prepara capturas y grabaciones existentes en el comentario o la descripción y deja que el agente las adjunte. gh --attach cambiará la PR remota; antes de ejecutar, confirma que es una PR de prueba discutible en público y que las rutas de medios existen de verdad.

Caso 2: en ejecuciones repetidas, actualizar solo el bloque del marcador. La fuente dice que reemplaza de forma idempotente un bloque <!-- before-and-after:start/end --> y no toca el resto de la descripción de la PR. Encaja con quien ya adjuntó una vez y solo quiere cambiar la zona de comparación. Primero, en solo lectura, comprueba si la descripción ya tiene ese marcador; si no hay marcador, la fuente no escribe cómo crearía una descripción entera: no lo asumas.

Límites de uso

Las dependencias son estrictas: hace falta agent-browser y GitHub CLI 2.99+ (para gh --attach). Si falta cualquiera, no fuerces el adjunto. Explicitamente no hace: envolver agent-browser, capturar URL, gestionar autenticación de Vercel, convertir vídeo, alojar medios.

Solo un comando de instalación aparece en la fuente, y lleva #main: npx skills add vercel-labs/before-and-after#main. No lo cambies por una etiqueta o un instalador que no aparece. La página oficial es https://github.com/vercel-labs/before-and-after Si un agente sugiere un comando sin #main, prevalece esa página.