> ## 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.

# Detecta regresiones visuales antes de cada 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="Detecta regresiones visuales antes de cada PR" description="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." prompt="Crea una habilidad de repositorio en .agents/skills/visual-regression/visual-regression.md que le diga a Devin cómo iniciar nuestra app de Next.js, navegar por cada página afectada por el diff actual, tomar capturas de pantalla en versión de escritorio y móvil, y señalar cualquier problema de maquetación, antes de abrir un PR." category="Desarrollo de funcionalidades" features="Habilidades" />

<div className="uc-detail-wrapper">
  <Tip>¿Prefieres no configurarlo manualmente? Pega un enlace a esta página en una sesión de Devin y pídele que lo configure todo por ti.</Tip>

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

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

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

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

      ```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 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.
    </Step>

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

    <Step title="Amplía tu stack">
      Adapta la skill para herramientas adicionales y pasos de verificación específicos de tu proyecto:

      <PromptBlock>
        ```txt Añadir comprobaciones de componentes de Storybook theme={null}
        Actualiza la skill de regresión visual para que también ejecute
        `npm run storybook`, abra http://localhost:6006 y tome capturas
        de todas las stories de los componentes modificados en el diff actual. Marca
        cualquier story que muestre un error de renderizado o un lienzo en blanco.
        ```
      </PromptBlock>

      <PromptBlock>
        ```txt Añadir verificación de modo oscuro theme={null}
        Actualiza la skill de regresión visual para que también cambie la app al modo oscuro
        (haz clic en el selector de tema en la esquina superior derecha) y vuelva a tomar capturas
        de todas las páginas afectadas. Marca cualquier texto que se vuelva ilegible sobre
        el fondo oscuro o cualquier elemento que pierda su borde.
        ```
      </PromptBlock>
    </Step>
  </Steps>
</div>