Skills

Web Verify

Use after a user-visible UI edit to verify your OWN change on an isolated loopback server.

Install

npx skills add kirodotdev/KiroCrew --skill web-verify -g -a claude-code -y
Repository
kirodotdev/KiroCrew4.7k
Category
Design
Updated
3d ago
License
Apache-2.0
Context cost
Mediumabout 2,703 tokens
Runs scripts
Yes, review before use

What it does

Use after a user-visible UI edit to verify your OWN change on an isolated loopback server. Capture, read and show real screenshots. Backends: playwright-cli (live Browser panel), agent-browser (annotated frames, pixel diff, a11y), or scripted Playwright. Not web-preview or external-page web-browse.

Web Verify: look at your own front-end change

Tests prove the code runs; they do not prove the pixels are right. A passing vitest run is compatible with a clipped label, a wrapped flex row, a blank panel behind a gate, or an empty state that never mounts. When you change UI, open it and look at it, then put the frame in chat so the user sees the same thing you did.

This is the self-verification path: the screenshot is evidence, not decoration. It is view-only (navigate plus screenshot); clicking and typing through a flow uses the same CLI with more verbs. Keep the frame count bounded (see below). Restraint here is about context cost, not permission.

Three ways to capture, and name the one you used

Not a backend here: the browser MCP tool. Its screenshot op renders in the Browser panel and hands you no image file to read, and it refuses loopback unless the operator listed that exact host:port in the dashboard's local-origins setting (every URL in this skill is loopback). So playwright-cli is the local-verification path by design, not by preference.

Read the whole SKILL.md on GitHub

More in Design