visual-aspect-analyzer

visual-aspect-analyzer

When you have finished a UI change, run this as the final review step — once, at the end, not after every individual edit. It is the visual-regression gate: the change is not done until it reports score: 100 (Test a UI change).

Drive a real browser over a session and report, per auto-detected element, what actually changed on screen. You don't pick the elements — the instrument finds the page's relevant ones itself (Auto-detection). Impact is temporal — true if it held in any frame — so an element that only starts painting or moving mid-session is still caught.

Boundaries. It auto-scrolls but never clicks, types, or logs in, so defects behind an interaction are caught only via the embed interact hook. It sees the main document only — closed shadow roots and cross-origin iframes aren't pierced.

Run it

bun src/analyze-cli.ts <url>     # run from the skill directory

In the Tale sandbox this is pre-installed — the bundle, its pngjs dep, the playwright package (shared with the agent's browser tooling), and Chromium are all baked into the image, so there is no install step. (Working on the skill locally instead? Install the browser tooling once first: bun add -d playwright && bunx playwright install chromium.)

Paths below are relative to the skill directory. Needs Bun (bun.sh) — no npm/node fallback. The run is headless and self-driving: it loads the page hidden, auto-scrolls the whole session, then exits on its own (seconds for a light page) — nothing waits on you. Any reachable URL works, including a local dev server (http://localhost:3000) — start your server first; the tool drives a browser, it doesn't launch your app.

• No build step — Bun runs the TypeScript directly and bundles the in-page instrument in memory.
• Always on — pixel capture (dithering + the paint check) and auto-scroll (lazy content + CLS), so a bare run never silently misses a defect.
• stdout is pure JSON (the compact report); the health summary always prints to stderr. bun src/analyze-cli.ts <url> > report.json saves the report while the summary still shows in your terminal.
• One flag, --full (the faithful Report). It fixes the session knobs (keyframes 4, settleMs 500 → a ~2 s sample window); to tune sampling depth/window, dithering sensitivity (pixelThreshold), or to log in before sampling, use the embed path.
• Offline — re-analyze a saved recording with no browser: bun src/cli.ts <recording.json>.