Skip to content
cccskills
FreePublished on GitHub

screenshot-validation

Check screenshots and viewer HTML used as evidence in pull requests. Inspect image dimensions, file size, and blank areas, then use Playwright to catch rendering failures, JavaScript errors, and exposed raw data.

OriginalShow the original description

Validate screenshot and viewer HTML quality for PR evidence. Run this after adding or modifying images under .agents/evidence/pr/ or .agents/recordings/, or after generating a new viewer HTML file. Combines image quality checks (resolution, blankness, file size) with Playwright-based viewer rendering verification.

Works withPlaywright
See how to install

Good for

  • Check screenshot quality before committing PR evidence
  • Validate staged PNG and JPG images
  • Verify generated viewer HTML renders correctly
  • Detect blank images and exposed error output

Files included (1)

  • SKILL.md2.8 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Screenshot Validation

Validate that evidence images and viewer HTML files meet quality standards before committing. This catches issues that would otherwise fail CI or produce misleading PR evidence.

Image quality check

Checks PNG/JPG/GIF/WEBP files for:

  • Minimum dimensions: 400x400 pixels (hard fail)
  • Desktop viewport width: >= 1280px (warning if narrower)
  • File size: <= 5MB (warning if larger)
  • Blankness detection (PNG only): fails if > 90% of pixels are white/transparent

Run on specific files or directories

uv run python scripts/check_screenshots.py .agents/evidence/pr/
uv run python scripts/check_screenshots.py .agents/recordings/
uv run python scripts/check_screenshots.py path/to/specific-image.png

Run on git-staged images

scripts/check_screenshots.sh

This shell wrapper automatically finds staged PNG/JPG files and runs the quality check on them — useful as a pre-commit sanity check.

Viewer HTML rendering verification

Uses Playwright (headless Chromium) to verify that generated viewer HTML files actually render correctly — not just raw JSON or Python errors.

Checks:

  • No JavaScript errors on page load
  • Normal traces render a sidebar with entries and a detail panel
  • Empty embedded traces render the explicit "No API calls captured" state
  • Body text doesn't contain raw JSON dumps or Python tracebacks

Run

uv run python scripts/verify_screenshots.py .traces/trace_*.html

Requires Playwright to be installed (uv pip install playwright && playwright install chromium).

Typical workflow

After generating new evidence for a PR:

# 1. Check image quality
uv run python scripts/check_screenshots.py .agents/evidence/pr/

# 2. If you generated new viewer HTML, verify it renders
uv run python scripts/verify_screenshots.py .traces/trace_*.html

# 3. If all passes, stage and commit
git add .agents/evidence/pr/

Fixing common failures

FailureFix
very small image (WxH; minimum is 400x400)Retake screenshot at a larger viewport or higher resolution
narrow desktop viewport (Wpx < 1280px)Resize browser window to >= 1280px wide before capturing
mostly blank/white imageEnsure the screenshot captures actual content, not an empty page
No sidebar — viewer not renderedViewer HTML is broken; regenerate from trace JSONL
JS errorsCheck viewer.html for syntax errors in embedded data

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

codex-e2e-test

FreeSummary

Test real Codex CLI sessions through claude-tap, including resumed conversations, multiple tool calls, and image input. Check captured API activity and viewer behavior, then collect screenshots as evidence for a pull request.

  • Validate API capture and proxy changes
  • Test resumed conversations with image input
  • Check message rendering and tool call order
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

demo-video

FreeSummary

Create demo GIFs and MP4 videos from real terminal test runs recorded with tmux and asciinema. Capture HTML viewer screenshots through Playwright, with guidance for selecting visible controls and scrolling the correct page containers.

  • Record a real terminal test run as a demo
  • Convert a terminal recording into GIF and MP4 files
  • Capture HTML viewer entries and diff screens
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

e2e-test

FreeSummary

Run pytest tests for claude-tap after core changes to check the workflow from end to end. Review results for proxy processing, trace storage, cleanup, and viewers, with guidance on where to investigate failures.

  • Check the full workflow after proxy changes
  • Verify trace cleanup behavior
  • Check that startup avoids update network requests
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

Test JavaScript embedded in HTML with two complementary layers: Python unit tests for algorithms and Playwright browser tests for page behavior. Check calculations, button states, keyboard input, and navigation using prepared test data.

  • Checking algorithms embedded in HTML
  • Testing button states and overlay visibility
  • Verifying keyboard and click navigation
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

legibility-check

FreeSummary

Check maintainer documentation locally before automated CI checks run. Find missing metadata, outdated review dates, nonexistent paths in the architecture manifest, and completed plans that still contain unfinished tasks, with guidance for correcting common failures.

  • Check required metadata after updating standards
  • Find outdated review dates
  • Verify paths listed in the architecture manifest
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

Record Playwright browser test actions as .webm videos for pull request reviews, bug fix comparisons, and regression evidence. Combine readable pauses, assertions, and terminal logs to show interface behavior alongside automated checks.

  • Recording before-and-after behavior for a bug fix
  • Sharing interface changes in a pull request review
  • Saving video evidence of regression test paths
liaohch3/claude-tap3.3KUpdated Oct 22, 2026

See all skills by liaohch3

Report a problem with this skill