diliev1996/delyan-iliev-skills

Evidencia para PR de Frontend

Graba la base de fusión y la cabeza del PR con los mismos fixtures, viewport e interacciones, luego publica ambas grabaciones como un solo comentario en el PR mediante gh. El skill del repositorio propietario maneja el cuerpo del PR. $SCRATCH es el directorio temporal de la sesión. Ejecuta los scripts empaquetados usando sus rutas absolutas.

Pasos

1. Resolver revisiones. Lee baseRefName y headRefOid de gh pr view PR_URL --json baseRefName,headRefOid. Ejecuta git fetch origin BASE_BRANCH pull/PR_NUMBER/head, luego git merge-base origin/BASE_BRANCH HEAD_SHA. Termina cuando ambos SHAs se resuelvan localmente.
2. Construir ambas revisiones. Termina cuando cada revisión tenga una carpeta de salida construida o un servidor de desarrollo en ejecución, y su código fuente coincida con su SHA.
3. Escribir el flujo bajo $SCRATCH, empezando desde el ejemplo y siguiendo la interfaz de flujo que se describe abajo.
4. Capturar con node scripts/capture.cjs FLOW "$SCRATCH/evidence". Cuando falle, su error indica la solución: el comando de instalación, una navegación fuera de la aplicación o un problema de resaltado. Los fallos de selector también dejan failure.png y failure-aria.yml en la carpeta de salida. Corrige el flujo y vuelve a ejecutar. Termina cuando:
   • el comando salga con código 0;
   • cada entrada de manifest.network esté explicada (en una ejecución simulada, cada una es una llamada no simulada);
   • comparison.png muestre el cambio en ambas fases;
   • video-contact-sheet.png muestre el cursor alcanzando cada objetivo y el estado final sostenido.
5. Publicar con node scripts/publish.cjs "$SCRATCH/evidence" PR_URL. Confirma que la evidencia coincida con la cabeza actual y la base de fusión del PR, publica comment.md con la comparación y el video adjuntos, y verifica que GitHub los aloje. Ejecutarlo de nuevo para la misma captura reutiliza ese comentario. Si gh auth status muestra que falta el inicio de sesión, pide ese paso únicamente al usuario. Si la publicación sigue bloqueada, conserva los artefactos e informa el error exacto. Termina cuando imprime la URL del comentario.
6. Enlazar la URL del comentario desde la sección de evidencia del cuerpo del PR. Termina cuando el cuerpo del PR enlace la URL que publish.cjs imprimió para la cabeza actual, reemplazando cualquier enlace de evidencia anterior.
7. Limpiar los servidores y árboles de trabajo que hayas iniciado. Mantén los artefactos, cookies y archivos de estado de almacenamiento fuera del control de versiones.

Interfaz de flujo

Un módulo de flujo exporta:

• description: la interacción probada y si los datos son simulados o reales. Se convierte en el texto del comentario.
• phases: dos entradas { label, revision, url | dir, run }, Antes y Después. dir es una carpeta de salida construida, servida por el helper con rutas de cliente que retroceden a index.html. url apunta a un servidor de desarrollo en ejecución.
• viewport (opcional, predeterminado 1440×900).
• setup(page, phase) (opcional): se ejecuta antes de la primera navegación de cada fase, en una página con rutas, scripts de inicio, cookies y almacenamiento reiniciados. Registra aquí simulaciones, semillas y fixtures de autenticación. Las rutas coinciden de la más nueva a la más antigua, así que registra una interrupción general antes de las simulaciones específicas.
• warmup(page, phase) (opcional): se ejecuta sin grabar después de que la página cargue, por ejemplo mientras un servidor de desarrollo compila.
• run(page, tools): realiza la interacción y afirma el estado esperado de cada fase, usando tools.click(locator), tools.point(locator) y tools.highlight(locator, label?). Cada fase necesita al menos un resaltado, aún visible cuando run retorna.

Salidas: before.png, after.png, comparison.png, comparison.webm, video-contact-sheet.png (el video como fotogramas con marca de tiempo), manifest.json y comment.md.

Aplicaciones autenticadas. El Chromium del helper inicia sin inicios de sesión: las sesiones del navegador en otros lugares y la autenticación de gh no llegan a él. Reproduce el estado de sesión iniciada en setup; el ejemplo muestra dos formas. Si se requiere evidencia autenticada en vivo y el contexto de captura no puede alcanzarla, informa la limitación y las verificaciones realmente realizadas.

Después de cambiar los scripts o actualizar Playwright, ejecuta node scripts/capture.test.cjs. Configura CAPTURE_TEST_OUTPUT=DIR para conservar sus artefactos, y PLAYWRIGHT_MODULE=PATH para probar otra instalación de Playwright.