browser-verify

Verifies frontend changes in a real browser using accessibility snapshots and screenshots.

Updated Oct 2, 2025
One-click install
npx skills add https://github.com/YuriiYInno/Innogram --skill browser-verify-yuriiyinno
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: browser-verify
Source: https://github.com/YuriiYInno/Innogram/tree/main/.codex/skills/browser-verify
Command: npx skills add https://github.com/YuriiYInno/Innogram --skill browser-verify-yuriiyinno

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? After making frontend code changes, developers often assume the fix works without checking, leading to broken layouts, console errors, and failed interactions reaching users. This Skill closes that gap by autonomously opening the app in a browser, observing the actual rendered state, and iterating fixes until the change is confirmed working. ## Core Features & Use Cases - Autonomous verification loop: Observe the page, compare against success criteria, fix failures, and re-verify, with a circuit breaker after three failed attempts on the same issue. - Token-efficient inspection: Uses the agent-browser CLI accessibility tree with element refs for structure checks, reserving screenshots for layout and styling verification. - Debugging support: Inspects console messages, page errors, and failed network requests to root-cause issues before escalating. - Use Case: After fixing a login form bug, the Skill opens the login page, fills credentials via element refs, submits, re-snapshots after navigation, and confirms the dashboard renders correctly. ## Quick Start Verify in the browser that the frontend change you just made works correctly on the local app.

Frequently Asked Questions about browser-verify

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

FAQPage Schema
How do I verify frontend changes in a browser automatically?▼

Open the app URL with agent-browser, capture an accessibility snapshot, and compare the rendered state against defined success criteria. If the check fails, fix the code, wait for hot-reload, and re-snapshot to confirm the fix.

How to test interactive flows like login forms in a browser?▼

Snapshot the page to get element refs, then fill inputs and click buttons using those refs, and re-snapshot after navigation since refs go stale. Verify the expected destination page and content appear after submission.

When should I use accessibility snapshots instead of screenshots?▼

Use snapshots for content, structure, and interaction checks because they consume far fewer tokens. Reserve screenshots for verifying layout, styling, and visual appearance, or responsive comparisons across viewport sizes.

Why do browser element refs stop working after navigation?▼

Element refs become stale after any navigation or DOM change because the accessibility tree is regenerated. Always run a fresh snapshot before interacting with the page again after any change.

What happens if a UI fix keeps failing verification?▼

A circuit breaker stops the loop after three failed attempts on the same issue. The Skill reports what was tried, what was observed, and what remains broken, then asks the user for guidance.