Web Application Testing
anthropics/skills
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
Validates PR evidence screenshots for size, width and blankness, and checks that generated viewer HTML renders in headless Chromium without errors.
Install Screenshot Validation
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install liaohch3/claude-tap screenshot-validation --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/screenshot-validation .claude/skills/screenshot-validation && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .claude/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validationType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install liaohch3/claude-tap screenshot-validation --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/screenshot-validation .agents/skills/screenshot-validation && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .agents/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install liaohch3/claude-tap screenshot-validation --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/screenshot-validation .cursor/skills/screenshot-validation && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .cursor/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/liaohch3/claude-tap.git --path .agents/skills/screenshot-validation--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install liaohch3/claude-tap screenshot-validation --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/screenshot-validation .gemini/skills/screenshot-validation && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .gemini/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install liaohch3/claude-tap screenshot-validationInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/screenshot-validation .github/skills/screenshot-validation && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .github/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add liaohch3/claude-tap --skill screenshot-validation -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install liaohch3/claude-tap screenshot-validation --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/liaohch3/claude-tap.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/screenshot-validation .opencode/skills/screenshot-validation && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "screenshot-validation" agent skill from https://github.com/liaohch3/claude-tap/tree/main/.agents/skills/screenshot-validation into .opencode/skills/screenshot-validation/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "screenshot-validation", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
screenshot-validation- GitHub stars
- 3.3k
- Token cost
- ~716 tokens
- SKILL.md length
- 252 words
- Files
- 1
- Skills in repo
- 11
- Repo updated
- First seen
- Licence
- MIT
At a glance
Validates PR evidence screenshots for size, width and blankness, and checks that generated viewer HTML renders in headless Chromium without errors.
- Before committing screenshots or recordings that serve as PR evidence
- SKILL.md covers Image quality check, Viewer HTML rendering…, Typical workflow and Fixing common failures
- Calls uv, git and playwright
- After generating a new trace viewer HTML file
What it does
Run it after adding or changing images under `.agents/evidence/pr/` or `.agents/recordings/`, or after generating a new viewer HTML file. The image check reads PNG, JPG, GIF and WEBP files and fails anything under 400x400 pixels, warns when a desktop capture is narrower than 1280 pixels or larger than 5MB, and, for PNG only, fails when more than 90 percent of the pixels are white or transparent.
It runs through `uv run python scripts/check_screenshots.py` on files or folders, or through `scripts/check_screenshots.sh` for staged images as a pre-commit check. A second script, `scripts/verify_screenshots.py`, uses Playwright with headless Chromium on trace viewer HTML to confirm there are no JavaScript errors, that a sidebar and detail panel appear, that empty traces show the explicit no-calls state, and that no raw JSON or Python traceback shows in the page body. A table maps each failure message to its fix.
When your agent uses it
- Before committing screenshots or recordings that serve as PR evidence
- After generating a new trace viewer HTML file
- Diagnosing why CI rejects an evidence image as too small or blank
Example prompts
- “Validate the screenshots I added under .agents/evidence/pr/.”
- “Check that the viewer HTML in .traces renders correctly and has no JS errors.”
- “Run the image quality check on my staged PNGs before I commit.”
Requirements
- uv and Python
- Playwright with Chromium installed
- The repository's check_screenshots and verify_screenshots scripts
What it can do on your machine
Read from SKILL.md and the folder at commit 4cc867d. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
uvgitplaywright
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use uv and git, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Screenshot Validation loads about 716 tokens when it runs. Until then it costs about 84 tokens; SKILL.md has 252 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from liaohch3/claude-tap at commit 4cc867d, republished under its MIT licence (© liaohch3). 252 words, ~716 tokens.
Download SKILL.mdSave it as
.claude/skills/screenshot-validation/SKILL.md (or your agent's skills folder).- name
- screenshot-validation
- 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.
- user_invocable
- true
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.pngRun on git-staged images
scripts/check_screenshots.shThis 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_*.htmlRequires 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
| Failure | Fix |
|---|---|
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 image | Ensure the screenshot captures actual content, not an empty page |
No sidebar — viewer not rendered | Viewer HTML is broken; regenerate from trace JSONL |
JS errors | Check viewer.html for syntax errors in embedded data |
© liaohch3, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in .agents/skills/screenshot-validation of liaohch3/claude-tap.
Open the folder on GitHubat commit 4cc867d
Compare with similar skills
Screenshot Validation next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Screenshot Validation this skillliaohch3/claude-tap | 3.3k | — | ~716 | Automated safety check: Pass | MIT | |
| Web Application Testinganthropics/skills | 180k | 51 repos | ~966 | Automated safety check: Pass | Apache-2.0 | |
| RStudio Selenium to Playwright Migrationrstudio/rstudio | 5.1k | — | ~3.6k | Automated safety check: Pass | Custom licence | |
| Brightdata Proxybrightdata/skills | 264 | — | ~5.1k | Automated safety check: Pass | MIT | |
| Hands On Testktnyt/cclsp | 675 | — | ~1.7k | Automated safety check: Pass | MIT | |
| Dogfoodredf0x1/camofox-browser | 412 | — | ~1.2k | Automated safety check: Pass | MIT |
Similar skills
- Official
RStudio Selenium to Playwright Migration
rstudio/rstudio
Converts RStudio Python Selenium electron tests into TypeScript Playwright tests, checking each against a live RStudio before counting it as migrated.
Brightdata Proxy
brightdata/skills
Generate working code that routes HTTP requests through Bright Data proxy networks (Datacenter, ISP, Residential, Mobile) and help users decide which network and IP pool type to use (shared pool…
Hands On Test
ktnyt/cclsp
Performs manual hands-on testing of a web application using playwright-cli.
Dogfood
redf0x1/camofox-browser
QA testing workflow for CamoFox Browser — systematic testing with console capture, error detection, and Playwright tracing.
Windows QA Engineer
CodeAlive-AI/ai-driven-development
A skill your agent uses when testing Windows 11 desktop apps (WinForms/WPF/UWP) via UFO UIA/Win32 automation MCP.
More from liaohch3/claude-tap
All 11 skills in this repoCodex E2E Trace Validation
liaohch3/claude-tap
Runs a real Codex CLI session through claude-tap and produces trace evidence and viewer screenshots for pull requests that touch capture, proxying or the viewer.
Terminal Demo Video Recorder
liaohch3/claude-tap
Records a real tmux end-to-end run with asciinema, converts it to a GIF and MP4, and captures trace viewer screenshots with Playwright.
JS-in-HTML Testing
liaohch3/claude-tap
Tests JavaScript embedded in an HTML file in two layers: pytest checks of the logic ported to Python, and Playwright runs in a real browser for the DOM.
Maintainer Docs Legibility Check
liaohch3/claude-tap
Runs local checks on maintainer docs for stale review dates, missing manifest paths and plan state drift, matching what the CI workflow enforces.
Playwright Screen Recording
liaohch3/claude-tap
Records headless Playwright sessions as .webm videos to show a bug fix working or to give pull request reviewers visual evidence.
PR Preflight Check
liaohch3/claude-tap
Runs a single merge-readiness check on a pull request: metadata, GitHub Actions status, local lint, format and test gates, and PR body rules, ending in READY or NOT_READY.
Related
Works with
Categories
Questions about Screenshot Validation
What does Screenshot Validation do?
Validates PR evidence screenshots for size, width and blankness, and checks that generated viewer HTML renders in headless Chromium without errors. agents/recordings/`, or after generating a new viewer HTML file. The image check reads PNG, JPG, GIF and WEBP files and fails anything under 400x400 pixels, warns when a desktop capture is narrower than 1280 pixels or larger than 5MB, and, for PNG only, fails when more than 90 percent of the pixels are white or transparent.
When should I use Screenshot Validation?
Screenshot Validation fits situations like: before committing screenshots or recordings that serve as PR evidence; after generating a new trace viewer HTML file; diagnosing why CI rejects an evidence image as too small or blank.
How do I install Screenshot Validation in Claude Code?
Run `npx skills add liaohch3/claude-tap --skill screenshot-validation -a claude-code`. Or copy the skill folder (.agents/skills/screenshot-validation in liaohch3/claude-tap) into .claude/skills/screenshot-validation in your project. Claude Code loads it when a task matches its description.
How do I install Screenshot Validation in Codex?
Run `npx skills add liaohch3/claude-tap --skill screenshot-validation -a codex`. Or copy the skill folder (.agents/skills/screenshot-validation in liaohch3/claude-tap) into .agents/skills/screenshot-validation in your project. Codex loads it when a task matches its description.
Can I use Screenshot Validation in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add liaohch3/claude-tap --skill screenshot-validation -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/screenshot-validation, .gemini/skills/screenshot-validation, .github/skills/screenshot-validation and .opencode/skills/screenshot-validation in your project.
What does Screenshot Validation need to run?
Going by SKILL.md and its folder, Screenshot Validation needs the command-line tools its instructions call (uv, git and playwright). Our summary lists: uv and Python; Playwright with Chromium installed; The repository's check_screenshots and verify_screenshots scripts.
Does Screenshot Validation access the network?
SKILL.md contains no URLs. Its commands use uv and git, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Screenshot Validation safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Screenshot Validation use?
Screenshot Validation is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Screenshot Validation use?
About 716 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Screenshot Validation?
Skills that share tags, products or a category with Screenshot Validation: Web Application Testing (anthropics/skills, 180k stars), RStudio Selenium to Playwright Migration (rstudio/rstudio, 5.1k stars), Brightdata Proxy (brightdata/skills, 264 stars) and Hands On Test (ktnyt/cclsp, 675 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Screenshot Validation?
liaohch3 (a GitHub user) maintains it in liaohch3/claude-tap, which has 3,271 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on September 22, 2026.
Source: liaohch3/claude-tap on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.