browser-verify

Verify HTML artifacts and inspect live pages via headless browser DOM probes and CDP.

Updated Aug 21, 2026
One-click install
npx skills add https://github.com/TylerSimons1127/vibe --skill browser-verify-tylersimons1127
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-verify
Source: https://github.com/TylerSimons1127/vibe/tree/main/skills/web-qa/browser-verify
Command: npx skills add https://github.com/TylerSimons1127/vibe --skill browser-verify-tylersimons1127

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? After building or modifying an HTML/UI artifact, you need proof it actually renders correctly — no console errors, expected elements present, responsive breakpoints working — especially when no vision model is available to read screenshots, or when web extraction tools like Firecrawl are unconfigured. ## Core Features & Use Cases - DOM-based verification: Probe element counts, computed styles (colors, radii, grid columns), and page structure through browser_exec instead of eyeballing screenshots. - Responsive testing via CDP: Use Emulation.setDeviceMetricsOverride to trigger real media queries at specific widths, since setting window.innerWidth does not work. - Content extraction fallback: Read full page text and structure from any URL when web_extract/web_search fail due to missing Firecrawl configuration. - Use Case: You built a single-file HTML dashboard and must confirm it opens, renders a 5-column stats grid on desktop, collapses to 1 column at 390px width, and opens a detail sheet when a table row is clicked — all without a test framework. ## Quick Start Use the browser-verify skill to open my artifact.html in a headless browser, check for console errors, and confirm the responsive layout collapses correctly at mobile width.

Frequently Asked Questions about browser-verify

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

FAQPage Schema
How do I verify an HTML file renders correctly without a screenshot?▼

Open the file in a headless browser via browser_exec, then probe the DOM: count expected elements, read computed styles like backgroundColor and gridTemplateColumns, and check page_info for the correct title. This works with text-only models that cannot read screenshots.

How to test responsive breakpoints in a headless browser?▼

Use CDP Emulation.setDeviceMetricsOverride with the target width, height, and mobile flag, then wait about one second before probing computed styles. Setting window.innerWidth directly does not trigger CSS media queries in this harness.

What can I use when web_extract or Firecrawl is not configured?▼

Load the URL directly in browser_exec and read document.body.innerText via a js() call to get full visible page text. You can also map body children tags and classes to understand page structure without any external API.

Why does getComputedStyle throw 'parameter 1 is not of type Element'?▼

The error occurs when querySelector returns null because the selector missed or the page reloaded. Wrap every DOM read in a guarded helper that returns a fallback object, and re-navigate with wait_for_load if probes transiently return null.

Can I test click interactions without a test framework?▼

Yes. Dispatch clicks with js() calls like document.querySelector(sel).click(), then read resulting state such as classList.contains('open') to confirm the interaction fired. A small Python script can also check tag balance and run node --check on embedded scripts.