lucidlabs-hq/screenshot

Visual Verification Screenshots

Capture and document UI implementations using agent-browser for visual verification.

Prerequisites

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

Step 1: Navigate to Page

cd frontend
pnpm exec agent-browser open http://localhost:3000/<page>

Common pages:

• / - Home page
• /dashboard - Dashboard (if exists)
• Custom routes as specified

Step 2: Get Interactive Elements (Optional)

To find clickable elements:

pnpm exec agent-browser snapshot --interactive --compact

Returns element references like @e5 for clicking.

Step 3: Interact (If Needed)

# Click by reference
pnpm exec agent-browser click @e5

# Click by text
pnpm exec agent-browser click "Button Text"

# Wait for navigation
sleep 1

Step 4: Take Screenshot

# 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

Naming Convention

| Pattern | Example | |---------|---------| | <feature>-<view>.png | inbox-overview.png | | <feature>-<state>.png | decision-loading.png | | <date>-<feature>.png | 2026-01-21-header.png |

Step 5: Update Gallery

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>

Step 6: View Gallery

Open in browser:

file://[project-path]/frontend/.dev-screenshots/index.html

Or use VS Code Live Server.

Quick Workflow (Copy-Paste)

# 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

Output Report

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]

Notes

• Screenshots are gitignored (.dev-screenshots/)
• Always update gallery HTML after new captures
• Use --full flag for full page captures
• Reference PRD for verification checklist
• Link screenshots in chat for user review
• ALWAYS ask user before taking screenshots