1. Parse Arguments & Get Repo Info
```bash
# Get current repo info (works in any repo)
REPO=$(gh repo view --json nameWithOwner -q .nameWithOwner)
# Get PR info
gh pr view --json headRefName,title,body
# Checkout the PR branch
git checkout
```
2. Start Dev Server
```bash
pnpm dev &
sleep 5
# Note the port (usually 3000 or 3001 if 3000 is in use)
```
3. Take Screenshots with agent-browser
```bash
# Open the page
agent-browser open "http://localhost:3000/path/to/feature"
# Wait for page load
sleep 2
# Get interactive elements
agent-browser snapshot -i
# Login if needed (check CLAUDE.md for credentials)
agent-browser fill @e1 "email"
agent-browser fill @e2 "password"
agent-browser click @e3
# Navigate to the feature
agent-browser click @eN
# For expandable sections, use JavaScript
agent-browser eval "document.querySelector('details summary').click()"
# Scroll to show relevant content
agent-browser eval "document.querySelector('selector').scrollIntoView({ block: 'start' })"
# Take screenshot
agent-browser screenshot docs/screenshot/feature-name.png
```
4. Save Screenshots
All screenshots must be saved to docs/screenshot/:
```bash
mkdir -p docs/screenshot
# Screenshot directly to: docs/screenshot/.png
```
Naming convention:
feature-overview.png - main viewfeature-expanded.png - expanded/detailed viewfeature-empty.png - empty statefeature-loading.png - loading state
5. Commit & Push
```bash
git add docs/screenshot/
git commit -m "$(cat <<'EOF'
docs: add screenshots for [feature]
Co-Authored-By: Claude Opus 4.5
EOF
)"
git push
```
6. Update PR Body with Screenshots
IMPORTANT: Use GitHub CDN URL format with ?raw=true:
```
https://github.com//blob//docs/screenshot/.png?raw=true
```
Where nameWithOwner from step 1 (e.g., owner/repo-name).
Update PR body:
```bash
gh pr edit --body "$(cat <<'EOF'
# PR Title
|