Capturas de Tela de PR

Incorpore capturas de tela de antes e depois nas descrições de pull requests para que os revisores possam ver a mudança visual sem precisar baixar o branch.

Quando Usar Esta Habilidade

Use esta habilidade quando um PR alterar algo visível:

• Layout, estilo, CSS
• Gráficos, dashboards, visualizações de dados
• Componentes de UI, formulários, modais
• Mensagens de erro, saída de CLI, formatação de logs

Padrão de Descrição de PR

Coloque as capturas de tela diretamente no corpo da descrição do PR. Evite envolvê-las em colapsos <details> — os revisores têm mais probabilidade de olhar imagens que podem ver sem clicar.

**Before** — brief description of the problem:

![before](url-to-before-image)

**After** — brief description of the fix:

![after](url-to-after-image)

Mantenha o texto conciso. Uma ou duas frases por imagem descrevendo o que o leitor deve notar. Deixe a imagem carregar a maior parte da comunicação.

Múltiplas Alterações

Para PRs com várias alterações visuais, use pares de antes/depois separados com títulos:

## Filter bar alignment

**Before** — 1px border clash between adjacent buttons:

![before-filters](url)

**After** — borders overlap cleanly, hover tint added:

![after-filters](url)

## Chart tooltip

**Before** — tooltip clipped at container edge:

![before-tooltip](url)

**After** — tooltip repositions to stay visible:

![after-tooltip](url)

Tamanho da Imagem

• Tire capturas de tela na resolução nativa 1x — não redimensione com PIL (cria artefatos)
• Controle o tamanho de exibição em HTML quando as imagens forem muito grandes:

  <img src="url" width="600" alt="description">
  

• Pares de antes/depois devem usar a mesma largura de viewport e corte — caso contrário, a comparação não tem sentido

Upload de Imagens

Azure DevOps

Faça upload de imagens como anexos de PR via API REST:

$token = az account get-access-token `
    --resource "499b84ac-1321-427f-aa17-267ca6975798" `
    --query accessToken -o tsv

$base = "https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}"
$url = "$base/pullRequests/{prId}/attachments/screenshot.png?api-version=7.1-preview.1"

# Use HttpClient — Invoke-RestMethod can corrupt binary data
$client = New-Object System.Net.Http.HttpClient
$client.DefaultRequestHeaders.Authorization = `
    New-Object System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", $token)
$content = New-Object System.Net.Http.ByteArrayContent(
    , [System.IO.File]::ReadAllBytes("screenshot.png")
)
$content.Headers.ContentType = `
    [System.Net.Http.Headers.MediaTypeHeaderValue]::new("application/octet-stream")
$resp = $client.PostAsync($url, $content).Result

Referencie na descrição do PR:

![description](https://{org}.visualstudio.com/{projectId}/_apis/git/repositories/{repoId}/pullRequests/{prId}/attachments/screenshot.png)

Pontos de atenção do Azure DevOps:

• Use {org}.visualstudio.com EM VEZ DE dev.azure.com/{org} — o renderizador de markdown do AzDO usa .visualstudio.com. O formato dev.azure.com carrega visivelmente mais devagar
• Use POST em vez de PUT (PUT retorna 405)
• A versão da API deve ser 7.1-preview.1
• Não é possível fazer upload novamente com o mesmo nome de arquivo — use um novo nome (por exemplo, screenshot-v2.png)
• Use HttpClient em vez de Invoke-RestMethod — IRM pode corromper dados binários
• Caminhos relativos ao repositório não funcionam em descrições de PR — devem ser usadas URLs completas
• Não comite imagens no branch apenas para capturas de tela de PR

GitHub

⚠️ Em desenvolvimento. O upload de imagens por arrastar e soltar do GitHub usa endpoints internos que exigem cookies do navegador. Ainda não há uma API pública limpa para fazer upload de imagens para descrições de PR.

Solução alternativa atual: Comite imagens em um branch órfão pr-assets e referencie via URLs de blob (github.com/{owner}/{repo}/blob/pr-assets/{file}?raw=true). Funciona, mas é complicado — contribuições para uma abordagem melhor são bem-vindas.

Diretrizes

1. Capture o estado anterior ANTES de fazer as alterações — é fácil esquecer, e reconstruir o estado original depois é lento e propenso a erros
2. Mantenha as descrições concisas — uma ou duas frases por imagem apontando o que mudou é suficiente
3. Prefira imagens visíveis a seções colapsadas — capturas de tela atrás de tags <details> são fáceis de pular
4. Anote quando a alteração for sutil — use a habilidade image-annotations para adicionar destaques quando a diferença não for imediatamente óbvia
5. Combine a viewport e o corte entre os pares de antes/depois para que a comparação seja significativa

Limitações

…