Menü
Take visual verification screenshots using agent-browser. Use for UI verification.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | screenshot |
| description | Take visual verification screenshots using agent-browser. Use for UI verification. |
| disable-model-invocation | true |
| allowed-tools | Read, Write, Bash |
Capture and document UI implementations using agent-browser for visual verification.
Ensure agent-browser is installed and dev server is running:
cd frontend
pnpm exec agent-browser install # Once after fresh clone
pnpm run dev # In separate terminal
cd frontend
pnpm exec agent-browser open http://localhost:3000/<page>
Common pages:
/ - Home page/dashboard - Dashboard (if exists)To find clickable elements:
pnpm exec agent-browser snapshot --interactive --compact
Returns element references like @e5 for clicking.
# Click by reference
pnpm exec agent-browser click @e5
# Click by text
pnpm exec agent-browser click "Button Text"
# Wait for navigation
sleep 1
# Standard screenshot
pnpm exec agent-browser screenshot frontend/.dev-screenshots/<name>.png
# Full page screenshot
pnpm exec agent-browser screenshot frontend/.dev-screenshots/<name>.png --full
| Pattern | Example |
|---|---|
<feature>-<view>.png | inbox-overview.png |
<feature>-<state>.png | decision-loading.png |
<date>-<feature>.png | 2026-01-21-header.png |
After taking screenshots, update the HTML gallery:
File: frontend/.dev-screenshots/index.html
Add new screenshot card:
<article class="screenshot-card">
<div class="screenshot-header">
<span class="screenshot-title">N. Feature Name</span>
<span class="screenshot-date">filename.png</span>
</div>
<img src="filename.png" alt="Description" class="screenshot-img" onclick="openLightbox(this.src)">
<div class="screenshot-footer">
<ul>
<li>Verified element 1</li>
<li>Verified element 2</li>
</ul>
</div>
</article>
Open in browser:
file://[project-path]/frontend/.dev-screenshots/index.html
Or use VS Code Live Server.
# Full workflow for a page
cd frontend
pnpm exec agent-browser open http://localhost:3000/
pnpm exec agent-browser snapshot --interactive --compact
pnpm exec agent-browser screenshot .dev-screenshots/homepage.png --full
After capturing screenshots, provide:
## Screenshots Captured
**Page:** [URL]
**Screenshots:**
- `filename.png` - [Description]
### Verified Elements
- [ ] Element 1 matches PRD
- [ ] Element 2 matches PRD
### Gallery Link
[file://.../.dev-screenshots/index.html]
.dev-screenshots/)--full flag for full page capturesCross-project audit and sync. Backs up, bootstraps, promotes, syncs, and verifies all downstream projects.
Structured pre-planning research. Explores codebase, asks clarifying questions, and produces a brainstorm output file for /plan-feature input.
Capture knowledge from development sessions. Debug patterns, architecture decisions, framework gotchas, and integration learnings compound over time.
Load project context and show current status. Use at the start of a session or when context is needed.
Run parallel code reviews using specialized agents (security, performance, simplicity, nextjs-react). Produces a structured report.
Initialize a new project from Agent Kit boilerplate. Use when creating a new downstream project.