Skip to main content

Detecta regresiones visuales antes de cada PR

Una habilidad de repositorio que hace que Devin tome capturas de pantalla de cada página afectada y señale problemas de maquetación antes de abrir un PR.
AuthorCognition
CategoryDesarrollo de funcionalidades
FeaturesHabilidades
1

El problema: los errores de CSS pasan desapercibidos en las pruebas unitarias

Tu suite de pruebas pasa, el CI está en verde y el PR se integra, pero ahora la página de configuración tiene texto superpuesto en dispositivos móviles y el botón de pago desapareció detrás del pie de página. Las pruebas unitarias y los linters no detectan errores visuales, así que el cambio llega a producción y un cliente lo reporta.Una skill de repositorio resuelve esto. Las skills son archivos markdown que haces commit en .agents/skills/<your-skill>/ en cualquiera de tus repositorios. Devin ve todas las skills en todos los repositorios conectados: puedes activarlas manualmente o Devin puede decidir activarlas automáticamente cuando detecta una situación relevante. Esta skill le indica a Devin exactamente cómo levantar tu app, navegar por las páginas afectadas por el diff y tomar capturas de pantalla en múltiples anchos de viewport, cada vez, antes de cada PR.
2

Añade el skill de regresión visual a tu repo

Haz un commit de un archivo en .agents/skills/visual-regression/visual-regression.md que plasme la lista de verificación de QA manual de tu equipo en forma de pasos que Devin pueda seguir:
# Verificación de regresión visual

## Descripción
Antes de abrir cualquier PR, inicia la aplicación localmente y toma capturas de pantalla de cada página afectada por el diff actual en anchos de escritorio y móvil. Registra cualquier problema de diseño encontrado.

## Requisitos previos
- Docker en ejecución (para la base de datos)
- Puerto 3000 disponible

## Configuración
1. Instala las dependencias: `npm install`
2. Inicia los servicios: `docker-compose up -d postgres redis`
3. Ejecuta las migraciones: `npx prisma migrate dev`
4. Carga los datos de prueba: `npm run db:seed`
5. Inicia el servidor de desarrollo: `npm run dev`
6. Espera a que aparezca "Ready on http://localhost:3000" en la terminal

## Verificaciones visuales
1. Lee el diff de git actual para identificar qué páginas están afectadas
2. Para cada página afectada:
   a. Abre la página en el navegador en http://localhost:3000/{route}
   b. Toma una captura de pantalla con un ancho de 1280px (escritorio)
   c. Redimensiona el navegador a un ancho de 375px (móvil)
   d. Toma una captura de pantalla en ancho móvil
   e. Verifica: texto superpuesto, elementos ocultos detrás de otros
      elementos, desplazamiento horizontal, botones o enlaces
      inaccesibles, imágenes o iconos faltantes, errores de consola
3. Si se encuentra algún problema, regístralo con la URL de la página, el ancho
   del viewport y una descripción del problema

## Antes de abrir el PR
1. Ejecuta `npm run lint` y corrige cualquier problema
2. Ejecuta `npm test` y confirma que todas las pruebas pasan
3. Incluye todas las capturas de pantalla en la descripción del PR
4. Si se encontraron problemas, enuméralos al inicio del cuerpo del PR
Este archivo se incluye con tu código. Una vez que se haya hecho commit de él, Devin lo ve como una habilidad disponible: cada vez que una sesión interactúe con archivos de UI en este repositorio, Devin puede activar las comprobaciones de regresión visual automáticamente, o puedes ejecutarlas manualmente en cualquier momento.
3

Adapta las comprobaciones a tus páginas

Instrucciones genéricas como “check the page looks right” dan lugar a resultados imprecisos. La parte de mayor valor de esta skill es indicarle a Devin qué aspecto correcto debe tener cada área de tu aplicación.Añade secciones específicas para cada ruta a tu skill:
## Route-Specific Checks

### Dashboard (`/dashboard`)
- The metric cards should display in a 3-column grid on desktop
- Cards should stack to a single column on mobile
- The chart should be fully visible without horizontal scroll

### Checkout (`/checkout`)
- The "Place Order" button must be visible without scrolling
  on both desktop and mobile
- The order summary sidebar should collapse into an accordion on mobile
- The price breakdown should show subtotal, tax, and total on separate lines

### Settings (`/settings`)
- All form labels should be left-aligned with their inputs
- The "Save" button must be reachable at the bottom of the form
- Tab navigation between sections should update the URL hash
Devin lee el diff, identifica qué rutas se han modificado y sigue la sección correspondiente, de modo que las comprobaciones sean específicas en lugar de genéricas.
4

Vea cómo detecta una regresión real

Supongamos que un ingeniero cambia la cuadrícula CSS del panel de control de grid-template-columns: repeat(3, 1fr) a repeat(auto-fit, minmax(200px, 1fr)) para hacer que el diseño sea responsive. Las pruebas unitarias se ejecutan correctamente: no cambió ninguna lógica. Pero en dispositivos móviles, las tarjetas ahora se desbordan del viewport.Cuando Devin termina el cambio de código, sigue esta habilidad automáticamente:
  1. Arranca la app — instala dependencias, inicia Docker, ejecuta migraciones, siembra datos, inicia el servidor de desarrollo
  2. Lee el diff — ve que src/components/Dashboard.tsx cambió, lo mapea a la ruta /dashboard
  3. Toma capturas de pantalla a 1280px — la cuadrícula de 3 columnas se renderiza correctamente
  4. Toma capturas de pantalla a 375px — detecta desbordamiento horizontal: las tarjetas no caben en el viewport
  5. Marca el problema — informa: «Horizontal scroll detected on /dashboard at 375px width — metric cards overflow the viewport»
  6. Corrige el CSS — añade overflow-x: hidden y ajusta el mínimo de minmax a 150px
  7. Vuelve a tomar capturas de pantalla — confirma la corrección en ambos anchos
  8. Abre el PR — incluye capturas de pantalla del antes/después y la corrección en la descripción
Puedes ver esto en tiempo real a través de la pestaña del navegador en tu espacio de trabajo de sesión.
5

Amplía tu stack

Adapta la skill para herramientas adicionales y pasos de verificación específicos de tu proyecto: