browser-verification

Verifies running web applications through measured browser checks instead of visual inspection.

1|Updated Jan 14, 2024
One-click install
npx skills add https://github.com/Eyhenij/rt-tools --skill browser-verification-eyhenij
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: browser-verification
Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/browser-verification
Command: npx skills add https://github.com/Eyhenij/rt-tools --skill browser-verification-eyhenij

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It prevents false confirmations when checking a running web application: stale dev servers answering on taken ports, screenshots misread as layout proof, dev-server behavior mistaken for production behavior, and unmeasured claims like "looks fine" presented as verification results. ## Core Features & Use Cases - Stand and port discipline: Requires identifying what answers on a port via lsof before any request, killing stale instances by PID, and never raising a second instance of an application that is already up. - Measurement over looking: Mandates conclusions backed by numbers from getComputedStyle, getBoundingClientRect, and viewport comparisons, taken on the longest real value rather than sample content. - Browser driver governance: Enforces a single pinned browser profile through guard hooks, treats library-launched browsers as bypasses, and stops work when the profile choice is refused. - Use Case: After editing a component's layout, raise the showcase stand, measure document width against viewport width on a 599px frame, and report the numbers before showing the work to the owner. ## Quick Start Load this rule before any browser-based check of the dev server or stand, then verify the port, drive the pinned browser profile, and back every layout conclusion with a measured number.

Frequently Asked Questions about browser-verification

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I verify a web application layout without relying on screenshots?

Measure computed values with getComputedStyle and getBoundingClientRect instead of looking at screenshots. Take the measurement on the longest realistic value, since overflow and clipping only appear when content does not fit its container.

Why does my dev server show old code after I made edits?

A stale process from a past session is likely answering on the port. Run lsof -nP -iTCP:<port> -sTCP:LISTEN before the first request and kill leftover instances by PID, since killing by command name pattern can hit the wrong process.

Can I trust the dev server to check production behavior?

No. A bare page-serving server knows nothing about caching, redirects, and headers, so production configuration must be checked behind the real proxy. Statements about the production build should be verified against the built artifact itself, not the branch.

When should layout checks use end-to-end tests instead of a browser driver?

Use an end-to-end test when a measurement must be repeated, since the viewport is fixed for the suite and results reproduce on every run. The manual driver suits exploring unfamiliar screens, not confirming known numbers.

What are the limitations of visual snapshot testing for components?

Snapshots catch any visible change but fire on one-pixel shifts, while computed-value measurements answer only the question asked. Tests clicking by stable selectors stay green even when gaps shift or sizes vanish, so package version upgrades require walking screens by hand.