Visual tests

SkillWeb & browsing

Lets your agent run and add Playwright visual tests to catch layout or CSS changes on web pages.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Visual tests skill

About this capability

Run or add Playwright visual specs and know when a layout or CSS change needs npm run test:visual. Use after first-paint, panel-layout, or PurgeCSS safelist changes, or when adding a Playwright case.

What this skill tells your AI

The instructions your AI receives, as published by liberatedpixelcup/universal-lpc-spritesheet-character-generator in .agents/skills/visual-test/SKILL.md and read by ahel’s review.

Run npm run test:visual after a change that affects first paint, panel layout, or a class in vite/purgecss-critical-safelist.ts.

Add cases under tests/visual/. Reuse waits in home-helpers.ts. Wait for catalog readiness via __LPC_waitCatalogAllReady (installed in sources/install-item-metadata.ts). Do not import visual specs from tests/tests.js. They are not Codecov-instrumented.

Argos upload needs ARGOS_TOKEN. Isolated run: run-one-spec. Walkthrough: Visual regression tests. CLS measurement is cls / CLS.md; Argos does not replace profile:cls.

Signals

GitHub stars
2k
Forks
580
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
visual-test-liberatedpixelcup
Source
github.com/liberatedpixelcup/universal-lpc-spritesheet-character-generator