screenshot-validation

Solid

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.

Code & Development 1,067 stars 111 forks Updated today MIT

Install

View on GitHub

Quality Score: 96/100

Stars 20%
100
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# 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 ```bash 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 ```bash 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 ```bash uv run python scripts/verify_screenshots.py .traces/trace_*.html ``` Requires Playwr...

Details

Author
liaohch3
Repository
liaohch3/claude-tap
Created
3 months ago
Last Updated
today
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

AI & Automation Listed

verify-visual

Use chrome-devtools MCP to screenshot the local site (or a specific element) and visually verify it matches the design intent. Required after every UI-affecting change before marking work done.

0 Updated today
jajupmochi
Web & Frontend Listed

visual-review

Visually verify rendered output for web pages, PRs, CLI commands, and TUIs. Use when the user asks for "visual review", "visual QA", "screenshot this", "check how this PR looks", "review CLI output", "capture a terminal command", or "record this TUI". Inputs - target URL or PR number, mode (browser / CLI / TUI / regression), and routes / commands / viewports to check. Do not use when the user wants functional QA (use a testing skill), brand-taste judgment (this verifies rendered output, not design taste), frontend-stack migration (out of scope), or wants to push commits (this is read-only). Produces a screenshot or recording set + a visible-issues report listing artifact paths, routes/commands/viewports inspected, and any layout/overflow/state-coverage gaps found. Escalate if the target is unreachable, the PR is too large for a single review pass (recommend scope reduction), or the local dev server cannot start.

1 Updated today
Naoray
Testing & QA Listed

visual-qa

Visual quality assurance: analyze game screenshots for defects, compare against reference, check motion in frame sequences. Supports runtime-native inspection plus Gemini or OpenAI API-backed VQA.

2 Updated yesterday
RandallLiuXin
AI & Automation Solid

visual-verdict

Screenshot comparison QA for frontend development. Takes a screenshot of the current implementation, scores it across multiple visual dimensions, and returns a structured PASS/REVISE/FAIL verdict with concrete fixes. Use when implementing UI from a design reference or verifying visual correctness.

496 Updated 1 months ago
vibeeval
AI & Automation Listed

verify

Verifies the running application against PRD screen specs and acceptance criteria in a browser. This skill should be used when the user asks to "run visual verification", "verify the app against the PRD", "run Stage 6V", "check the running app", "verify screens match specs", "run live app verification", "test the running application", or "verify acceptance criteria in the browser", or when the transmute-pipeline agent reaches Stage 6V of the pipeline.

4 Updated yesterday
masterleopold