verify-in-browser

Validates newly completed web features through scripted browser inspection and visual screenshot review.

9|Updated Mar 4, 2026
One-click install
npx skills add https://github.com/timcsy/semorphe --skill verify-in-browser-timcsy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: verify-in-browser
Source: https://github.com/timcsy/semorphe/tree/main/knowledge/skills/verify-in-browser
Command: npx skills add https://github.com/timcsy/semorphe --skill verify-in-browser-timcsy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Automated tests can all pass while a feature is visibly broken in the browser—missing toolbox entries, wrong colors, misplaced buttons, or stale localStorage state. This Skill closes that gap by performing structured in-browser acceptance checks before declaring work done. ## Core Features & Use Cases - Programmatic enumeration: Queries the live application (e.g., toolbox contents via the app's own assembly functions) instead of eyeballing counts, avoiding toggle and scroll-viewport traps. - Mandatory visual screenshots: Captures every toolbox category, a dragged-out block, and cross-language comparisons, since layout and mutation-button issues are only detectable by eye. - Execution-path verification: When changes affect runtime behavior (pause, input, fallback, error handling), it checks four extra things: where execution stops, whether variable state is visible, whether edits take effect on continue, and whether manual intervention leaves a trace. - Use Case: After adding new Blockly blocks to a course, run this Skill to confirm the blocks actually appear in the toolbox, render correctly when dragged out, and round-trip through code conversion without loss. ## Quick Start Verify the feature I just finished by opening it in the browser, clearing localStorage, enumerating the toolbox programmatically, and screenshotting each category.

Frequently Asked Questions about verify-in-browser

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

FAQPage Schema
How do I verify a web feature in the browser after tests pass?

Start the dev server, clear localStorage, then programmatically enumerate UI contents through the app's own assembly functions rather than counting visually. Screenshot every category, drag out a real element, and round-trip real code through the feature before declaring it done.

How to paste code into a Monaco editor with browser automation?

Typing breaks auto-indentation and clipboard APIs hang on permission prompts, so dispatch a synthetic ClipboardEvent with a DataTransfer payload to the editor's textarea. Select all first to avoid appending to existing skeleton code, and wait for HMR reloads to settle.

Why do browser automation scripts freeze on alert or confirm dialogs?

Native dialogs like alert, confirm, and prompt block the entire page, so automation tools stop receiving events. Replace them with in-page dialog components, which also keeps the feature working inside VSCode webviews where window.prompt is disabled.

Why does programmatically created Blockly content not trigger event handlers?

Blocks created via programmatic newBlock calls do not fire the events that user interactions trigger. Features gated on user actions must be verified with real drag operations in the browser instead of scripted block creation.

What should I check when changing code execution or pause behavior?

Verify four things: the stopped node is visually highlighted, the variable panel is populated, edits made during a pause affect subsequent output, and manual intervention leaves a visible trace. Also grep all registration points for the handler family, since real inputs may route through a differently named variant.