Skip to main content

Detectar regressões visuais antes de cada PR

Uma habilidade de repositório que instrui o Devin a tirar capturas de tela de cada página afetada e sinalizar quebras de layout antes de abrir um PR.
AuthorCognition
CategoryDesenvolvimento de recursos
FeaturesHabilidades
1

O problema: erros de CSS passam despercebidos pelos testes unitários

Sua suíte de testes passa, o CI está verde e o PR é mesclado — mas a página de configurações agora tem texto sobreposto no mobile, e o botão de checkout desapareceu atrás de um rodapé. Testes unitários e linters não detectam quebras visuais, então isso vai para produção e um cliente reporta o problema.Uma skill de repositório resolve isso. Skills são arquivos Markdown que você faz commit em .agents/skills/<your-skill>/ em qualquer um dos seus repositórios. Devin vê todas as skills em todos os repositórios conectados — você pode acioná-las manualmente ou o Devin pode escolher acioná-las automaticamente quando detectar uma situação relevante. Esta skill diz ao Devin exatamente como inicializar seu app, navegar pelas páginas afetadas pelo diff e tirar capturas de tela delas em múltiplas larguras de viewport — sempre, antes de cada PR.
2

Adicione a skill de regressão visual ao seu repositório

Faça um commit de um arquivo em .agents/skills/visual-regression/visual-regression.md que represente a lista de verificação de QA manual da sua equipe como etapas que o Devin possa seguir:
# Visual Regression Check

## Description
Before opening any PR, start the app locally and screenshot every
page affected by the current diff at desktop and mobile widths.
Flag any layout issues found.

## Prerequisites
- Docker running (for the database)
- Port 3000 available

## Setup
1. Install dependencies: `npm install`
2. Start services: `docker-compose up -d postgres redis`
3. Run migrations: `npx prisma migrate dev`
4. Seed test data: `npm run db:seed`
5. Start the dev server: `npm run dev`
6. Wait for "Ready on http://localhost:3000" in the terminal

## Visual Checks
1. Read the current git diff to identify which pages are affected
2. For each affected page:
   a. Open the page in the browser at http://localhost:3000/{route}
   b. Screenshot at 1280px width (desktop)
   c. Resize the browser to 375px width (mobile)
   d. Screenshot at mobile width
   e. Check for: overlapping text, elements hidden behind other
      elements, horizontal scroll, buttons or links that are
      unreachable, missing images or icons, console errors
3. If any issue is found, list it with the page URL, viewport
   width, and a description of the problem

## Before Opening the PR
1. Run `npm run lint` and fix any issues
2. Run `npm test` and confirm all tests pass
3. Include all screenshots in the PR description
4. If issues were found, list them at the top of the PR body
Este arquivo vem junto com o seu código. Depois de incluído em um commit, o Devin o vê como uma habilidade disponível — sempre que uma sessão interagir com arquivos de UI neste repositório, o Devin pode acionar os testes de regressão visual automaticamente, ou você pode executá-los manualmente a qualquer momento.
3

Torne as verificações específicas para suas páginas

Instruções genéricas como “verifique se a página parece correta” produzem resultados vagos. A parte mais valiosa dessa skill é dizer ao Devin como é o comportamento correto em cada área do seu app.Adicione seções específicas de rota à sua 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 lê o diff, identifica quais rotas foram afetadas e segue a seção correspondente — assim, as verificações são direcionadas em vez de genéricas.
4

Veja-o identificar uma regressão real

Suponha que um(a) engenheiro(a) altere o grid CSS no dashboard de grid-template-columns: repeat(3, 1fr) para repeat(auto-fit, minmax(200px, 1fr)) para tornar o layout responsivo. Os testes unitários passam — nenhuma lógica mudou. Mas, no mobile, os cards agora extrapolam a largura da viewport.Quando o Devin termina a mudança de código, ele segue a skill automaticamente:
  1. Inicializa o app — instala dependências, inicia o Docker, executa migrações, faz o seed dos dados, inicia o servidor de desenvolvimento
  2. Lê o diff — vê que src/components/Dashboard.tsx mudou, mapeia isso para a rota /dashboard
  3. Captura screenshots em 1280px — o grid de 3 colunas é renderizado corretamente
  4. Captura screenshots em 375px — identifica overflow horizontal: os cards não cabem na viewport
  5. Sinaliza o problema — reporta “Rolagem horizontal detectada em /dashboard com largura de 375px — cards de métricas extrapolam a viewport”
  6. Corrige o CSS — adiciona overflow-x: hidden e ajusta o mínimo do minmax para 150px
  7. Captura novos screenshots — confirma a correção em ambas as larguras
  8. Abre o PR — inclui screenshots de antes/depois e a correção na descrição
Você pode assistir a isso acontecer em tempo real pela aba do navegador no seu espaço de trabalho da sessão.
5

Integre ao seu stack

Adapte a skill para ferramentas adicionais e etapas de verificação específicas do seu projeto: