Skills Agentes

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.

Oficial
Estrellas
2.2k

en todo el repo

Actividad
47

0–100, la ruta de este skill

Actualizado
hace 2 meses

último commit aquí

Commits
1

últimos 90 días

Contexto
953 tok

70 tok en reposo

Paquete
1 archivo

4 KB

Instalar

Funciona con cualquier agente que lea SKILL.md

npx -y skills add software-mansion/argent --skill argent-screenshot-diff --agent claude-code

Se instala solo en este repositorio.

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

Úsalo cuando

  • 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

No lo uses cuando

  • 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é lo activa

Di cualquiera de estas frases y el agente debería cargar este skill.

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

SKILL.md

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:

{ "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.
{
  "baselinePath": "/tmp/baseline.png",
  "captureCurrent": true,
  "udid": "<UDID>",
  "outputDir": "/tmp/argent-diff"
}

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

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

Reproducido de software-mansion/argent bajo licencia Apache-2.0. Leer esta página en markdown.

Archivos

1 archivo en el paquete. Solo se lee SKILL.md al activarse — las referencias se cargan si el skill decide que las necesita.

Detalles

Categoría
Testing y QA
Licencia
Apache-2.0
Recursos incluidos
Solo SKILL.md
Código fuente
Ver SKILL.md

Etiquetas

Más de software-mansion/argent

Este repo incluye 16 skills. Si instalas uno, normalmente ya tienes los demás.

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.

Costo de contexto al activarse
1k tok
Tamaño del paquete
4 archivos
Última actualización
ayer
Oficialtesting qa

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.

Costo de contexto al activarse
7.3k tok
Tamaño del paquete
2 archivos
Última actualización
ayer
Oficialtesting qa

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.

Costo de contexto al activarse
2.7k tok
Tamaño del paquete
1 archivo
Última actualización
hace 14 días
Oficialtesting qa

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

Costo de contexto al activarse
3.4k tok
Tamaño del paquete
3 archivos
Última actualización
hace 14 días
Oficialherramientas desarrollo

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.

Costo de contexto al activarse
3.1k tok
Tamaño del paquete
1 archivo
Última actualización
ayer
Oficialtesting qa

Flujos paso a paso para desarrollar o depurar apps React Native en simulador iOS o emulador Android. Úsalo para arrancar la app, depurar Metro, arreglar builds, diagnosticar errores en tiempo de ejecución o ejecutar tests.

Costo de contexto al activarse
5.2k tok
Tamaño del paquete
1 archivo
Última actualización
hace 14 días
Oficialherramientas desarrollo

Skills relacionados

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.

Costo de contexto al activarse
1k tok
Tamaño del paquete
4 archivos
Última actualización
ayer
Oficialtesting qa

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.

Costo de contexto al activarse
7.3k tok
Tamaño del paquete
2 archivos
Última actualización
ayer
Oficialtesting qa

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.

Costo de contexto al activarse
3.1k tok
Tamaño del paquete
1 archivo
Última actualización
ayer
Oficialtesting qa