visual-review

Visual Review

Purpose

Agents cannot see rendered web pages, presentations, or UI. This skill bridges that gap by using Playwright to capture screenshots of web pages (local files, localhost servers, or deployed URLs) so agents can visually inspect their work, identify layout issues, and iterate.

This is especially useful for:

• Reveal.js presentations — capture each slide individually
• Web UIs — verify layout, styling, and responsiveness
• Landing pages — check visual design matches intent
• Email templates — verify rendering

Prerequisites

This skill requires Playwright to be available. Before first use, check and install if needed:

# Check if Playwright is available
npx playwright --version 2>/dev/null

# If not available, install it (one-time setup)
npx playwright install chromium

Important: Only the chromium browser is needed. Do not install all browsers — it wastes disk space and time.

If npx playwright fails entirely, the user may need to install it:

npm install -g playwright
npx playwright install chromium

Workflow

Phase 1: Setup

1. Verify Playwright is available — run npx playwright --version
2. If not installed — run npx playwright install chromium and inform the user
3. Create output directory — mkdir -p /tmp/visual-review
4. Determine the target — local file path, localhost URL, or deployed URL

Phase 2: Capture Screenshots

For a single page:

npx playwright screenshot \
  --browser chromium \
  --viewport-size "1456,816" \
  --wait-for-timeout 3000 \
  "<URL_OR_FILE_PATH>" \
  /tmp/visual-review/page.png

Parameters:

• --viewport-size "1456,816" — 16:9 aspect ratio, good for presentations
• --wait-for-timeout 3000 — wait 3 seconds for fonts, images, and animations to settle
• Use file:///absolute/path/to/file.html for local files
• Use full URLs for deployed sites

For Reveal.js presentations (multiple slides):

Capture each slide by appending the slide hash to the URL: