# Argent Screenshot Diff

> Compara capturas de pantalla guardadas o en vivo con la herramienta screenshot-diff de argent, para regresiones visuales: layout, espaciado, color, tipografía, clipping, overflow o renderizado de imagen/icono.

Fuente: https://skillsagentes.com/skills/software-mansion/argent/argent-screenshot-diff
Markdown: https://skillsagentes.com/skills/software-mansion/argent/argent-screenshot-diff.md

Repositorio: https://github.com/software-mansion/argent
Autor: software-mansion
Licencia: Apache-2.0
Actualizado: hace 2 meses
Coste de contexto: 70 tok instalada, 953 tok al activarse, 953 tok con todos los archivos del bundle
Bundle: 1 archivo, 4 KB
Permisos que pide: ninguno declarado

## Instalación

Un skill son archivos markdown: los mismos archivos valen para cualquier agente y lo único que cambia es el directorio de destino, es decir la bandera `--agent`. Añade `-g` para instalarlo en todos los proyectos de la máquina.

```bash
# Claude Code
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent claude-code
# Cursor
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent cursor
# Codex
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent codex
# Gemini CLI
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent gemini
# Windsurf
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent windsurf
# Cline
npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent cline
```

## Qué hace

- Compara una captura base y una actual (guardadas o capturadas en vivo) y resalta los cambios visibles a nivel de píxel
- Sirve como evidencia visual de apoyo para QA y regresión visual, sin sustituir la inspección visual ni el árbol de estado
- Exige exactamente una entrada de baseline y una de current, sin combinar ruta guardada y captura en vivo en el mismo lado

## Cuándo usarla

- Pedir explícitamente una prueba de regresión visual o un "screenshot diff"
- Comparar antes/después con resultado visible en píxeles: layout, posición, tamaño, espaciado, color, tipografía, clipping, overflow o renderizado de imagen/icono
- Verificar que un cambio no introdujo una regresión visual fuera del elemento modificado

## Cuándo no

- El resultado se verifica mejor de forma estructural: cambios de estado, navegación, árbol de accesibilidad o tests unitarios
- Hay contenido dinámico, animación no pausable, timestamps, anuncios o datos aleatorios que harían la comparación ruidosa
- Se necesita descubrir coordenadas para tocar la pantalla: usa `describe` o `debugger-component-tree`, no el diff de capturas

## Qué la activa

- "Compara estas dos capturas de pantalla"
- "Haz una prueba de regresión visual de esta pantalla"
- "Verifica si este cambio rompió el layout"

## Archivos

- SKILL.md — 4 KB

## SKILL.md

Reproducido tal cual desde software-mansion/argent bajo Apache-2.0. Esta sección es el documento original y está en inglés.

## 1. Role

Use `screenshot-diff` as supporting visual evidence for UI QA and visual regression checks. It highlights pixel-visible change or stability; it does not replace visual inspection, accessibility/component-tree state, frame/attribute checks, logs, network evidence, or app behavior.

Do not use screenshot diffing for tap-coordinate discovery. Use `describe`, `debugger-component-tree`, or `native-describe-screen` to find targets first.

## 2. When To Use

Use `screenshot-diff` when pixel comparison can answer the verification question:

- Required for explicit "UI regression test", "visual regression test", "screenshot diff", "compare screenshots", or "before/after visual comparison" requests, unless stable comparable screenshots cannot be produced.
- Good fit when the affected screen has stable before/after states and the expected result is pixel-visible: layout, position, size, spacing, color, typography, image/icon rendering, clipping, overflow, or text rendering.
- Good fit when the risk is unintended visual regression outside the exact element changed.
- Poor fit when the result is better verified structurally: state changes, navigation existence, accessibility tree contents, console/network behavior, or unit tests.
- Poor fit when dynamic content, unpausable animation, timestamps, ads, random data, or missing baseline/current screenshots would make the comparison noisy or meaningless.

## 3. Capture Rules

Use normal downscaled `screenshot` calls for UI context and state checks. Use full-resolution screenshots only when saving baseline/current PNG files for visual regression comparison. Suppress the image block so the full-size PNG is not loaded into context:

```json
{ "udid": "<UDID>", "scale": 1.0, "includeImageInContext": false }
```

Capture the stable baseline before the relevant interaction or before editing whenever feasible. Compare it to the post-change or post-interaction screen after the app reloads, rebuilds, or reaches the state under test.

## 4. Parameters

Provide `udid` and exactly one input for the baseline side and exactly one input for the current side:

- Common UI regression flow: saved baseline plus live current -> `baselinePath`, `captureCurrent: true`, `udid`, `outputDir`.
- Both screenshots already saved -> `baselinePath`, `currentPath`, `udid`, `outputDir`.
- Rare fixture flow: live baseline plus saved current -> `captureBaseline: true`, `currentPath`, `udid`, `outputDir`.
- Do not combine `captureBaseline: true` with `captureCurrent: true`, or provide both a path and live capture flag for the same side.

## 5. Deterministic Flow

1. Navigate to the known-good state.
2. Capture a baseline PNG with `screenshot` using `scale: 1.0` and `includeImageInContext: false`; keep the returned `path`.
3. Perform the interaction, apply the code change and navigate to the state under test.
4. Call `screenshot-diff` with the saved `baselinePath`, `captureCurrent: true`, `udid`, and `outputDir`.
5. Inspect the summary and artifact paths, then combine the diff with normal visual inspection and any structural/runtime evidence needed for the assertion.

```json
{
  "baselinePath": "/tmp/baseline.png",
  "captureCurrent": true,
  "udid": "<UDID>",
  "outputDir": "/tmp/argent-diff"
}
```

If both images are already saved, use file paths for both sides:

```json
{
  "baselinePath": "/tmp/baseline.png",
  "currentPath": "/tmp/current.png",
  "udid": "<UDID>",
  "outputDir": "/tmp/argent-diff"
}
```

## Dónde encaja

- Categoría: [Testing y QA](https://skillsagentes.com/categorias/testing-qa.md) — Flujos de testing unitario, de integración y end-to-end.
- Creador: [software-mansion](https://skillsagentes.com/creators/software-mansion.md) — 0 skills en el directorio
- [Todas las skills](https://skillsagentes.com/skills.md)
- [Ranking de instalaciones](https://skillsagentes.com/ranking.md)

## Otras skills del mismo repositorio

- [Argent Create Flow](https://skillsagentes.com/skills/software-mansion/argent/argent-create-flow.md): Crea, graba, edita, repite o repara flujos YAML reutilizables de Argent. Úsalo para grabar/repetir un recorrido de dispositivo, montar perfiles o comparaciones A/B, o antes de repetir tres o más interacciones.
- [Argent Device Interact](https://skillsagentes.com/skills/software-mansion/argent/argent-device-interact.md): Interactúa con un simulador iOS, un emulador Android o una app Chromium (CDP) con las herramientas MCP de argent: toques, gestos, scroll, texto, botones físicos, lanzar apps, abrir URLs, capturas y esperas de elementos.
- [Argent Test Ui Flow](https://skillsagentes.com/skills/software-mansion/argent/argent-test-ui-flow.md): Prueba de forma autónoma la interfaz de una app (iOS o Android) con bucles de interactuar-capturar-verificar usando las herramientas MCP de argent, para flujos de UI, login, navegación o pruebas end-to-end.
- [Argent Metro Debugger](https://skillsagentes.com/skills/software-mansion/argent/argent-metro-debugger.md): Depura un runtime JS vía CDP con las herramientas de debugger de argent. La vía principal es React Native por Metro (iOS/Android/Vega); un subconjunto también controla el renderer de una app Chromium (CDP).
- [Argent Qa Flows](https://skillsagentes.com/skills/software-mansion/argent/argent-qa-flows.md): Crea tests E2E de regresión QA reproducibles como flujos Argent a partir de casos de prueba, tickets o criterios de aceptación, con configuración determinista y dos pasadas consecutivas exitosas. Cubre iOS, Android, Chromium y Vega.

---

Skills Agentes · [Índice de páginas en markdown](https://skillsagentes.com/sitemap.md) · [Inicio](https://skillsagentes.com/index.md)