Capture All Pages

Capture all pages of the manual viewer at high resolution (2000x1600) for visual verification of translations.

Purpose

This skill captures screenshots of all pages in the manual viewer to verify that:

• Translations match the page images
• Layout is correct
• No content mismatches or missing translations

Quick Start

Prerequisites:

• Dev server running on port 3100 (pnpm dev)
• Playwright installed globally or in project

Usage:

bash
1# Capture all pages (default: 30 pages)
2node .claude/skills/capture-all-pages/scripts/capture.js
3
4# Capture specific number of pages
5node .claude/skills/capture-all-pages/scripts/capture.js --pages 280
6
7# Custom base URL
8node .claude/skills/capture-all-pages/scripts/capture.js --base-url http://zmanuals.localhost:3100/manuals/oxi-one-mk2/page

Configuration

The capture script supports these options:

• --pages <number> - Total pages to capture (default: 30)
• --base-url <url> - Base URL for pages (default: http://zmanuals.localhost:3100/manuals/oxi-one-mk2/page)
• --output-dir <path> - Custom output directory (default: __inbox/captures-{timestamp})

Default settings:

• Viewport: 2000x1600 (high resolution for detail)
• Output: __inbox/captures-{YYYYMMDD}-{HHMMSS}/
• Format: PNG files named page-001.png to page-NNN.png
• Timeout: 15 seconds per page
• Wait after load: 2 seconds

Execution Workflow

1. Verify dev server is running

   bash
   1curl -s -o /dev/null -w "%{http_code}" http://zmanuals.localhost:3100/manuals/oxi-one-mk2/page/1
   2# Should return 200

2. Run capture script

   bash
   1node .claude/skills/capture-all-pages/scripts/capture.js

   The script will:

   • Create timestamped output directory
   • Launch headless browser
   • Capture each page sequentially
   • Report progress and errors
   • Save summary.json with results

3. Check results

   bash
   1ls -lh __inbox/captures-*/page-*.png

Output Structure

__inbox/captures-20260103-163245/
├── page-001.png (2000x1600)
├── page-002.png (2000x1600)
├── page-003.png (2000x1600)
...
├── page-030.png (2000x1600)
└── summary.json (capture results)

summary.json contains:

• Timestamp and configuration
• Success/failure counts
• Error details for failed captures

Notes

• All screenshots saved to project's __inbox/ directory (gitignored)
• Session timestamp prevents overwriting previous captures
• Script uses headless Chromium (no visible browser window)
• Failed page captures are logged but don't stop the script
• High resolution (2000x1600) allows detailed inspection of translations