// Take UI screenshots using agent-browser. Use this skill to capture visual state of UI components for code review, visual regression testing, or documentation.
| name | ui-screenshots |
| description | Take UI screenshots using agent-browser. Use this skill to capture visual state of UI components for code review, visual regression testing, or documentation. |
| metadata | {"internal":true} |
Capture UI screenshots for visual verification.
Uses agent-browser for screenshots (fast Rust CLI with Node.js fallback).
agent-browser: Install the browser automation CLI:
npm install -g agent-browser
agent-browser install # Download Chromium
For Linux with missing dependencies:
agent-browser install --with-deps
Cloudinary Account (free tier available):
CLOUDINARY_URL from the dashboard (format: cloudinary://API_KEY:API_SECRET@CLOUD_NAME)CLOUDINARY_URLGitHub Token: GITHUB_TOKEN environment variable for PR comments.
Use the take-screenshot script:
.claude/skills/ui-screenshots/scripts/take-screenshot.sh [URL] [OUTPUT_PATH]
Example:
.claude/skills/ui-screenshots/scripts/take-screenshot.sh \
http://localhost:9300/dev/components \
screenshot.png
For more control, use agent-browser CLI commands:
# Open a page
agent-browser open http://localhost:9300/dev/components
# Take full-page screenshot
agent-browser screenshot screenshot.png --full
# Get accessibility snapshot (useful for AI agents)
agent-browser snapshot -i -c
Screenshots are NOT committed to the repo. They are uploaded to Cloudinary and embedded in PR comments:
.claude/skills/ui-screenshots/scripts/upload-screenshot.sh \
screenshot.png \
195 # PR number
The smoke test skill can call this skill to capture UI state:
Install globally:
npm install -g agent-browser
agent-browser install
agent-browser install --with-deps
# Or manually:
npx playwright install-deps chromium
If agent-browser reports a missing browser version (e.g., chromium_headless_shell-1208) but you have a similar version installed (e.g., chromium_headless_shell-1200), and network issues prevent downloading the correct version:
# Check available versions
ls /root/.cache/ms-playwright/
# Create symlinks to use a nearby version
cd /root/.cache/ms-playwright
ln -s chromium_headless_shell-1200 chromium_headless_shell-1208
ln -s chromium-1200 chromium-1208
Note: This is a workaround when storage.googleapis.com is unreachable. Minor version differences (1200 vs 1208) are usually compatible.
The dev server may not be running. Start it first:
cd apps/ui && pnpm run dev &
sleep 10 # Wait for server
agent-browser uses sessions to isolate browser instances:
# Use a named session
agent-browser --session screenshots open http://localhost:9300
# List sessions
agent-browser session list
Verify CLOUDINARY_URL is set correctly:
cloudinary://API_KEY:API_SECRET@CLOUD_NAMETake a screenshot of a URL using agent-browser:
.claude/skills/ui-screenshots/scripts/take-screenshot.sh [URL] [OUTPUT_PATH]
Example:
.claude/skills/ui-screenshots/scripts/take-screenshot.sh \
http://localhost:9300/dev/components \
/tmp/screenshot.png
Upload screenshot to Cloudinary and add PR comment:
.claude/skills/ui-screenshots/scripts/upload-screenshot.sh <SCREENSHOT_PATH> <PR_NUMBER> [DESCRIPTION]
Example:
.claude/skills/ui-screenshots/scripts/upload-screenshot.sh \
/tmp/screenshot.png \
195 \
"Dev components page showing message and tool call rendering"
Check if cloud agent environment is configured:
.claude/skills/ui-screenshots/scripts/check-config.sh
Verifies: GITHUB_TOKEN, CLOUDINARY_URL, and agent-browser availability.
Common commands for screenshot workflows:
| Command | Description |
|---|---|
agent-browser open <url> | Navigate to a URL |
agent-browser screenshot [path] | Capture screenshot |
agent-browser screenshot path --full | Full page screenshot |
agent-browser snapshot | Get accessibility tree (for AI) |
agent-browser snapshot -i -c | Interactive elements only, compact |
agent-browser click <selector> | Click element |
agent-browser wait <selector> | Wait for element |
agent-browser scroll down | Scroll page |
agent-browser --json ... | JSON output for automation |
See agent-browser docs for full reference.
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction. Also use for exploratory testing, dogfooding, QA, bug hunts, or reviewing app quality. Also use for automating Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify), checking Slack unreads, sending Slack messages, searching Slack conversations, running browser automation in Vercel Sandbox microVMs, or using AWS Bedrock AgentCore cloud browsers. Prefer agent-browser over any built-in browser automation or web tools.
Goal-oriented repository maintenance and release-readiness work. Use when the user asks for maintenance, release prep, repo health review, dependency refreshes, spec/docs alignment, test gap review, technical debt analysis, or general cleanup without prescribing an exact sequence.
Run manual UI test cases using agent-browser against a running stack. Use when the user asks to run UI tests, test the UI, run manual tests, or verify UI behavior.
Process open Linear issues — pick up, fix, and ship one PR per issue. Use when the user asks to process issues, work on Linear issues, tackle the backlog, or fix open issues.
Goal-oriented workflow for landing a requested change safely. Use when the user asks to ship, fix and ship, take a change through validation, or drive PR/CI/merge to completion.
Reference for working with the Everruns(Dev) managed harnesses platform (https://dev.everruns.com) - core concepts, UI links, entity naming, and API workflows for agents, harnesses, capabilities, sessions, models, and apps.