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.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.Añade el skill de regresión visual a tu repo
Haz un commit de un archivo en 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.
.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: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: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.
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:- Arranca la app — instala dependencias, inicia Docker, ejecuta migraciones, siembra datos, inicia el servidor de desarrollo
- Lee el diff — ve que
src/components/Dashboard.tsxcambió, lo mapea a la ruta/dashboard - Toma capturas de pantalla a 1280px — la cuadrícula de 3 columnas se renderiza correctamente
- Toma capturas de pantalla a 375px — detecta desbordamiento horizontal: las tarjetas no caben en el viewport
- Marca el problema — informa: «Horizontal scroll detected on /dashboard at 375px width — metric cards overflow the viewport»
- Corrige el CSS — añade
overflow-x: hiddeny ajusta el mínimo deminmaxa150px - Vuelve a tomar capturas de pantalla — confirma la corrección en ambos anchos
- Abre el PR — incluye capturas de pantalla del antes/después y la corrección en la descripción
