메뉴
Take visual verification screenshots using agent-browser. Use for UI verification.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Cross-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.
| 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 captures