> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devinenterprise.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Individua le regressioni visive prima di ogni PR

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="Individua le regressioni visive prima di ogni PR" description="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)." prompt="Crea una skill del repository in .agents/skills/visual-regression/visual-regression.md che spieghi a Devin come avviare la nostra app Next.js, visitare ogni pagina interessata dall'attuale diff, acquisire screenshot in versione desktop e mobile e segnalare eventuali problemi di layout — prima di aprire una PR." category="Sviluppo di funzionalità" features="Skills" />

<div className="uc-detail-wrapper">
  <Tip>Non vuoi configurarlo manualmente? Incolla un collegamento a questa pagina in una sessione di Devin e chiedigli di impostare tutto per te.</Tip>

  <Steps>
    <Step title="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.
    </Step>

    <Step title="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:

      ```markdown theme={null}
      # 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.
    </Step>

    <Step title="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:

      ```markdown theme={null}
      ## 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.
    </Step>

    <Step title="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](/it/work-with-devin/devin-session-tools).
    </Step>

    <Step title="Estendilo al tuo stack">
      Adatta la skill per includere strumenti aggiuntivi e passaggi di verifica specifici per il tuo progetto:

      <PromptBlock>
        ```txt Aggiungi controlli sui componenti Storybook theme={null}
        Aggiorna la skill di test di regressione visiva per eseguire anche
        `npm run storybook`, aprire http://localhost:6006 e acquisire uno screenshot
        di ogni story per i componenti modificati nel diff corrente. Segnala tutte le
        story che mostrano un errore di rendering o un canvas vuoto.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Aggiungi la verifica della dark mode theme={null}
        Aggiorna la skill di test di regressione visiva per attivare anche la dark mode dell'app
        (fai clic sul selettore del tema in alto a destra) e riacquisire uno screenshot di
        ogni pagina interessata. Segnala qualsiasi testo che diventa illeggibile sullo sfondo
        scuro o qualsiasi elemento che perde il proprio bordo.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>