skills.rest
AarnavBaddam
AarnavBaddamCOMMUNITY
Explore all skills by this author →
GitHub

agent-browser-verify

Verifies dev server pages load correctly using automated browser checks and screenshots.

Updated Jul 31, 2026
Search Tags:#debugging#error detection#dev server#next.js#screenshot#agent-browser#browser verification
One-click install
npx skills add https://github.com/AarnavBaddam/skills --skill agent-browser-verify-aarnavbaddam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: agent-browser-verify
Source: https://github.com/AarnavBaddam/skills/tree/main/agent-browser-verify
Command: npx skills add https://github.com/AarnavBaddam/skills --skill agent-browser-verify-aarnavbaddam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Starting a dev server does not guarantee the page actually works — blank pages, hydration errors, missing environment variables, and broken imports only appear in the browser. This Skill automates a visual and console-level verification pass so failures are caught before continuing development. ## Core Features & Use Cases - Automated Page Verification: Opens the dev server URL with agent-browser, waits for network idle, screenshots the page, and checks for blank content or error overlays. - Error Detection: Detects Next.js, Vite, and webpack error overlays plus console errors via browser evaluation commands. - Hang Diagnosis: Correlates stuck spinners and frozen pages with server-side evidence from Vercel logs and Workflow DevKit run inspection. - Use Case: After running next dev, automatically verify the page loads, confirm no console errors exist, and screenshot the result before proceeding with feature work. ## Quick Start Start my dev server and verify the page loads correctly in the browser with a screenshot and console error check.

Frequently Asked Questions about agent-browser-verify

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

FAQPage Schema
How do I verify a dev server page loads correctly?▼

Open the page with agent-browser, wait for network idle, take an annotated screenshot, and evaluate the DOM for content. Check that document.body.innerText is non-empty and no error overlay elements are present.

How to check for console errors in the browser after starting a dev server?▼

Use agent-browser eval to read window.__consoleErrors and query for framework error overlays like [data-nextjs-dialog], .vite-error-overlay, or the webpack dev server overlay. These reveal runtime failures invisible in terminal output.

Why is my Next.js page blank even though the dev server started?▼

A blank page usually indicates hydration errors, missing environment variables, or broken imports that only surface in the browser. Verify by screenshotting the page and checking for error overlays, then correlate with server logs.

How do I diagnose a page stuck on a loading spinner?▼

Capture the stuck state with a screenshot, check pending network requests via performance entries, then inspect server-side logs with vercel logs or workflow run inspection. Match browser symptoms to server evidence using the correlation table.

Does this work with Vite and Nuxt dev servers?▼

Yes, the verification triggers on next dev, vite, nuxt dev, vercel dev, and npm/pnpm/yarn/bun dev commands. Error detection covers Vite and webpack overlays in addition to Next.js dialogs.

Related Skills

Explore More Software Engineering Skills→
Moisesjr20Moisesjr20
1

env-vars

Manage Vercel environment variables and OIDC tokens via the vercel CLI.

Community
Intermediate
ResgridResgrid
224

autonomous-loops

Fix .NET build and test failures through bounded autonomous iteration loops.

Official
Advanced
openaiopenai
5.3k

agent-browser-verify

Verifies dev server pages load correctly using automated browser checks with agent-browser.

Official
Intermediate
VYRE-StudiosVYRE-Studios

webapp-testing

Automate end-to-end web testing across browsers and APIs with Playwright or Cypress.

Official
Intermediate