browser-screenshot

Browser Screenshot

Capture screenshots of the web application for visual verification during UI/CSS iteration.

Setup

1. Install playwright in the project (if not already):

npm install playwright
npx playwright install chromium

1. Symlink the screenshot script into the project's scripts/ directory:

SKILLS_DIR="${SKILLS_DIR:-${CODEX_HOME:-$HOME/.codex}/skills}"
if [[ ! -d "$SKILLS_DIR" ]]; then
  SKILLS_DIR="${CLAUDE_HOME:-$HOME/.claude}/skills"
fi
ln -sfn "$SKILLS_DIR/browser-screenshot/scripts/screenshot.sh" scripts/screenshot

Usage

/browser-screenshot
/browser-screenshot http://localhost:3000
/browser-screenshot http://localhost:3000 mobile

Instructions

1. Determine the URL to screenshot:

   • If $ARGUMENTS contains a URL, use it
   • Otherwise use the SCREENSHOT_URL env var if set
   • Default: http://localhost:3000

2. Determine the viewport:

   • If $ARGUMENTS contains mobile, use mobile viewport (375x812)
   • If $ARGUMENTS contains tablet, use tablet viewport (768x1024)
   • If $ARGUMENTS contains a custom size like 1024x768, use those dimensions
   • Default: desktop viewport (1280x900)
   • If $ARGUMENTS contains both, take two screenshots (desktop and mobile)
   • Keep both dimensions under 2000px to avoid image limit errors

3. Run the screenshot script via the project symlink:

scripts/screenshot <url> <viewport>

If the symlink doesn't exist yet, create it first (see Setup above).

Screenshots are saved to a fresh private directory (mode 0700) created per run, unless you pass an explicit output path as the third argument. The script prints the full path it wrote — read it from the output rather than assuming a location. Screenshots may capture authenticated pages, which is why the directory is not a predictable shared one.

1. Read the screenshot using the available image-reading tool to view the captured image. This is the critical step because the model can inspect the captured UI directly.