agentleFS
Sign inStart free
NiltraNiltra/agent-skills-web/skills/web-qa-visual/SKILL.md

web-qa-visual

Skill0 starsChanged 9 days agoMITView on GitHub

Verifica webs con Playwright CLI antes de darlas por terminadas: errores de consola, requests fallidas, overflow responsive a 375/414/768/1280/1440, accesibilidad axe, teclado y foco, reduced-motion, enlaces, SEO/meta y métricas de carga. Úsala al testear una web, tras cada cambio grande o para validar un deploy.

The file

We split this skill into the rules it gives an agent

2 rules. About 0 are common, 2 are distinctive, and 0 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈2

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    No declarar LISTO con un gate en rojo o sin ejecutar.

    line 33
  2. Distinctive:

    No se puede validar una secuencia de frames en iOS real desde headless: dejarlo escrito en el informe.

    line 37

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

QA visual con Playwright CLI

Regla de oro: sin salida de comando fresca no hay veredicto. Nada de "debería verse bien".

Setup mínimo

  • Playwright como devDependency del proyecto; playwright.config.ts con viewport explícito de 375px (no devices['Pixel 7'], que son 412px) y proyectos desktop-chrome y mobile-chrome.
  • Scripts de captura en scripts/shot.mjs (no usar MCP para esto: el CLI es más rápido y reproducible).
  • Para axe: @axe-core/playwright.
  • Servir el build de producción (npm run build && npm run start) para medir rendimiento real; usar dev solo para depurar.

Chequeos por página y por locale

  1. Consola y red: page.on('console'), page.on('pageerror'), page.on('requestfailed') y respuestas ≥400. Fallo = rojo.
  2. Overflow: en cada viewport comprobar document.documentElement.scrollWidth <= clientWidth + 1; si hay desborde, listar los elementos culpables (getBoundingClientRect().right > innerWidth).
  3. Accesibilidad: axe sin violaciones critical/serious; un solo h1; img[alt] completo; foco visible en todo elemento interactivo (comprobar :focus-visible con teclado real, no CSS a ojo); orden de tabulación lógico.
  4. Reduced motion: page.emulateMedia({ reducedMotion: 'reduce' }); no debe haber pin, autoplay ni animación de más de 200ms.
  5. Enlaces: extraer todos los href, validar los internos (200) y marcar externos como informativos; 0 href="#" sin controlador.
  6. SEO: title, meta description, canonical, OG, hreflang por locale, JSON-LD parseable, sitemap.xml y robots.txt 200.
  7. Rendimiento: medir LCP/CLS con PerformanceObserver tras cargar; objetivo LCP < 2.5s y CLS < 0.1 en desktop; medir jank de scroll contando frames largos (>50ms) con rAF durante 5s de scroll automatizado.
  8. Canvas/scroll: como el canvas puede salir negro en headless, verificar por DOM: elementos con opacidad/transform esperados, textos de los beats presentes y visibles en los rangos correctos, y estado expuesto en window si existe.

Loop

  • Tras cada ejecución: informe con tabla gate/comando/resultado/estado y lista de bloqueantes con evidencia (selector, log o captura).
  • Si un gate falla: arreglar (tests/scripts propios) o proponer el fix concreto de src/ con evidencia; repetir el ciclo completo.
  • Guardar capturas fechadas en docs/qa/ (desktop + móvil por locale principal) y baseline para comparar regresiones.
  • No declarar LISTO con un gate en rojo o sin ejecutar.

Límites honestos

  • No se puede validar una secuencia de frames en iOS real desde headless: dejarlo escrito en el informe.
  • Lighthouse vía npx lighthouse es opcional pero recomendable en el build de producción; si no se puede ejecutar, decirlo en vez de estimar.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free