Skip to main content

Individua le regressioni visive prima di ogni PR

Una skill del repository che fa eseguire a Devin uno screenshot di ogni pagina interessata e gli fa segnalare i problemi di layout prima di aprire una pull request (PR).
AuthorCognition
CategorySviluppo di funzionalità
FeaturesSkills
1

Il problema: i bug CSS passano inosservati nei test unitari

La tua suite di test passa, la CI è verde e la PR viene messa in merge — ma ora la pagina delle impostazioni ha del testo sovrapposto su mobile e il pulsante di checkout è scomparso dietro il footer. I test unitari e i linter non rilevano problemi visivi, quindi il bug arriva in produzione e un cliente lo segnala.Una skill di repository risolve questo problema. Le skill sono file markdown che fai il commit in .agents/skills/<your-skill>/ in uno qualsiasi dei tuoi repository. Devin vede tutte le skill in tutti i repository collegati — puoi attivarle manualmente oppure Devin può scegliere di attivarle automaticamente quando rileva una situazione rilevante. Questa skill indica a Devin esattamente come avviare la tua app, navigare le pagine interessate dal diff e catturare screenshot a diverse larghezze di viewport — ogni volta, prima di ogni PR.
2

Aggiungi la skill di visual-regression al tuo repository

Esegui il commit di un file in .agents/skills/visual-regression/visual-regression.md che descriva la checklist di QA manuale del tuo team sotto forma di passaggi che Devin può seguire:
# Verifica della Regressione Visiva

## Descrizione
Prima di aprire qualsiasi PR (pull request), avvia l'app in locale e fai uno screenshot di ogni
pagina interessata dal diff corrente alle larghezze desktop e mobile.
Segnala eventuali problemi di layout riscontrati.

## Prerequisiti
- Docker in esecuzione (per il database)
- Porta 3000 disponibile

## Configurazione
1. Installa le dipendenze: `npm install`
2. Avvia i servizi: `docker-compose up -d postgres redis`
3. Esegui le migrazioni: `npx prisma migrate dev`
4. Popola i dati di test: `npm run db:seed`
5. Avvia il server di sviluppo: `npm run dev`
6. Attendi "Ready on http://localhost:3000" nel terminale

## Verifiche Visive
1. Leggi il diff git corrente per identificare le pagine interessate
2. Per ogni pagina interessata:
   a. Apri la pagina nel browser all'indirizzo http://localhost:3000/{route}
   b. Fai uno screenshot alla larghezza di 1280px (desktop)
   c. Ridimensiona il browser a 375px di larghezza (mobile)
   d. Fai uno screenshot alla larghezza mobile
   e. Verifica: testo sovrapposto, elementi nascosti dietro altri
      elementi, scorrimento orizzontale, pulsanti o link non
      raggiungibili, immagini o icone mancanti, errori nella console
3. Se viene riscontrato un problema, elencalo con l'URL della pagina, la larghezza
   del viewport e una descrizione del problema

## Prima di Aprire la PR
1. Esegui `npm run lint` e correggi eventuali problemi
2. Esegui `npm test` e verifica che tutti i test passino
3. Includi tutti gli screenshot nella descrizione della PR
4. Se sono stati riscontrati problemi, elencali in cima al corpo della PR
Questo file viene fornito insieme al tuo codice. Una volta effettuato il commit, Devin lo considera una capacità disponibile — ogni volta che una sessione interagisce con file dell’interfaccia utente in questo repository, Devin può attivare automaticamente le verifiche di regressione visiva, oppure puoi eseguirle manualmente in qualsiasi momento.
3

Rendi le verifiche specifiche per le tue pagine

Istruzioni generiche come “controlla che la pagina sia visualizzata correttamente” producono risultati vaghi. Il valore principale di questa skill sta nel dire a Devin come deve presentarsi lo stato corretto per ogni area della tua app.Aggiungi alla tua skill sezioni specifiche per ogni route:
## 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 legge il diff, identifica quali route sono state modificate e segue la sezione corrispondente, così che i controlli siano mirati anziché generici.
4

Guarda come rileva una vera regressione

Supponiamo che un ingegnere modifichi la griglia CSS nella dashboard da grid-template-columns: repeat(3, 1fr) a repeat(auto-fit, minmax(200px, 1fr)) per rendere il layout responsive. I test unitari passano — nessuna logica è stata modificata. Ma su mobile, le card ora fuoriescono dal viewport.Quando Devin termina la modifica al codice, segue automaticamente la skill:
  1. Avvia l’app — installa le dipendenze, avvia Docker, esegue le migrazioni, esegue il seeding dei dati, avvia il server di sviluppo
  2. Legge il diff — vede che src/components/Dashboard.tsx è stato modificato, lo mappa alla route /dashboard
  3. Cattura screenshot a 1280px — la griglia a 3 colonne viene renderizzata correttamente
  4. Cattura screenshot a 375px — individua un overflow orizzontale: le card non rientrano nel viewport
  5. Segnala il problema — riporta “Horizontal scroll detected on /dashboard at 375px width — metric cards overflow the viewport”
  6. Corregge il CSS — aggiunge overflow-x: hidden e regola il minimo di minmax a 150px
  7. Scatta di nuovo gli screenshot — conferma la correzione a entrambe le larghezze
  8. Apre la PR — include gli screenshot prima/dopo e la correzione nella descrizione
Puoi osservare questo processo in tempo reale tramite la scheda del browser nel tuo session workspace.
5

Estendilo al tuo stack

Adatta la skill per includere strumenti aggiuntivi e passaggi di verifica specifici per il tuo progetto: