Web Application Testing
anthropics/skills
Tests local web applications with Python Playwright scripts, checking frontend behavior, capturing screenshots and reading browser console logs.
Agent skill
Quality Engineering Visual Baseline
Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change.
Install Quality Engineering Visual Baseline
$ npx skills add HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install HoangNguyen0403/agent-skills-standard quality-engineering-visual-baseline --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/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .claude/skills/quality-engineering-visual-baseline && 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 "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .claude/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baselineType 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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install HoangNguyen0403/agent-skills-standard quality-engineering-visual-baseline --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .agents/skills/quality-engineering-visual-baseline && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .agents/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install HoangNguyen0403/agent-skills-standard quality-engineering-visual-baseline --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .cursor/skills/quality-engineering-visual-baseline && 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 "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .cursor/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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/HoangNguyen0403/agent-skills-standard.git --path skills/quality-engineering/quality-engineering-visual-baseline--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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install HoangNguyen0403/agent-skills-standard quality-engineering-visual-baseline --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .gemini/skills/quality-engineering-visual-baseline && 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 "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .gemini/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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 HoangNguyen0403/agent-skills-standard quality-engineering-visual-baselineInstalls 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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .github/skills/quality-engineering-visual-baseline && 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 "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .github/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install HoangNguyen0403/agent-skills-standard quality-engineering-visual-baseline --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/HoangNguyen0403/agent-skills-standard.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/quality-engineering/quality-engineering-visual-baseline .opencode/skills/quality-engineering-visual-baseline && 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 "quality-engineering-visual-baseline" agent skill from https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/quality-engineering/quality-engineering-visual-baseline into .opencode/skills/quality-engineering-visual-baseline/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "quality-engineering-visual-baseline", 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
quality-engineering-visual-baseline- GitHub stars
- 572
- Token cost
- ~852 tokens
- SKILL.md length
- 378 words
- Files
- 5 (incl. references)
- Skills in repo
- 211
- Repo updated
- First seen
- Licence
- MIT
At a glance
Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change.
- A screenshot assertion fails
- SKILL.md covers Priority: P1 (HIGH), Capture, Mask, Then Threshold and Classify a Failure, plus 4 more sections
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
- A baseline needs updating
What it does
Quality Engineering Visual Baseline is an agent skill from HoangNguyen0403/agent-skills-standard. Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change. Use when a screenshot assertion fails, a baseline needs updating, or visual checks are being added; not for deciding what to verify.
Its SKILL.md is about 850 tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `evals/evals.json`, `references/baseline-update-review.md` and `references/masking-and-thresholds.md`).
It sits in Testing & QA. The repository describes itself as: A collection of Agent Skills Standard and Best Practice for Programming Languages, Frameworks that help our AI Agent follow best practies on frameworks and programming laguages. The licence is MIT.
When your agent uses it
- A screenshot assertion fails
- A baseline needs updating
- Visual checks are being added
- Not for deciding what to verify
Example prompts
- “/quality-engineering-visual-baseline”
What it can do on your machine
Read from SKILL.md and the folder at commit b529c2d. 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
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
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
Quality Engineering Visual Baseline loads about 852 tokens when it runs, and up to ~2.1k if it reads all its reference files. Until then it costs about 84 tokens; SKILL.md has 378 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 HoangNguyen0403/agent-skills-standard at commit b529c2d, republished under its MIT licence (© HoangNguyen0403). 378 words, ~852 tokens.
Download SKILL.mdSave it as
.claude/skills/quality-engineering-visual-baseline/SKILL.md (or your agent's skills folder). This skill also uses 4 other files; get the full folder from GitHub.- name
- quality-engineering-visual-baseline
- description
- Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change. Use when a screenshot assertion fails, a baseline needs updating, or visual checks are being added; not for deciding what to verify.
- guardrail
- true
Quality Engineering: Visual Baseline
Priority: P1 (HIGH)
Capture
- One baseline per scenario, viewport, theme, and locale that the plan names; never one baseline per developer machine. Capture in the CI image only; a locally captured baseline is a draft.
- Freeze animations and the clock before capture; wait for network idle and fonts loaded.
- Name baselines
<screen>-<state>-<viewport>[-dark][-<locale>].pngnext to the spec in the tool's snapshot folder.
Mask, Then Threshold
- Mask every dynamic region before comparing: clocks, counters, avatars, ads, maps, third-party embeds, randomised ids. A masked region is compared as a solid block, so a layout shift inside it still fails.
- Thresholds are per region and small: text and controls
0.1%max diff pixels, images and charts1%. A suite-wide threshold above1%is a disabled check. - Full detail in Masking and Thresholds.
Classify a Failure
A screenshot diff is VISUAL_DIFF. It is REAL_REGRESSION unless the whole diff lies inside a region that should have been masked or thresholded (then fix the mask, not the baseline). Layout shift, missing element, wrong color, or clipped text is a product change until the product owner says otherwise.
Update a Baseline
- A baseline changes only through a reviewed diff: before and after images in the PR, the intended product change linked, and an approver named in the commit. See Baseline Update Review.
- Never blind
--update-snapshots: it approves every diff in the run, including the regression you have not seen yet. - Update only the baselines whose diff was reviewed, scoped with
--grepand the spec path; regenerate the rest from the same commit so unrelated drift stays visible.
Show full SKILL.md (115 more words)Show less
Red Flags
"just update the snapshots" · "bump the threshold to 5%" · "mask the whole header" · "it looks the same to me" — each accepts a regression sight unseen. Stop; review the diff image, name the intended change, then update the one baseline.
Anti-Patterns
- No blind snapshot update:
--update-snapshotswithout a reviewed diff approves an unreviewed visual regression. - No threshold inflation: raising the threshold to make a diff pass disables the check for every future diff.
- No mask as fix: masking the region that regressed hides the regression; mask only genuinely dynamic content.
- No local baselines: a baseline captured outside the CI image fails on the next runner.
References
© HoangNguyen0403, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 4 other files (references) in skills/quality-engineering/quality-engineering-visual-baseline of HoangNguyen0403/agent-skills-standard.
- SKILL.md
- evals/evals.json
- references/baseline-update-review.md
- references/masking-and-thresholds.md
- references/tool-matrix.md
Open the folder on GitHubat commit b529c2d
Compare with similar skills
Quality Engineering Visual Baseline 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 |
|---|---|---|---|---|---|---|
| Quality Engineering Visual Baseline this skillHoangNguyen0403/agent-skills-standard | 572 | — | ~852 | Automated safety check: Pass | MIT | |
| Web Application Testinganthropics/skills | 180k | 51 repos | ~966 | Automated safety check: Pass | Apache-2.0 | |
| Diagnosing Bugsfossasia/eventyay-interpretation | 1.6k | 32 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| TDDpietheinstrengholt/rssmonster | 564 | 30 repos | ~906 | Automated safety check: Pass | MIT | |
| TDD WorkflowhellangleZ/burn-in-cceverywhere-ralph | 112 | 11 repos | ~2.4k | Automated safety check: Pass | None | |
| TDDsanity-io/sanity | 6.4k | 20 repos | ~1k | Automated safety check: Pass | MIT |
Similar skills
- Official
Diagnosing Bugs
fossasia/eventyay-interpretation
Diagnosis loop for hard bugs and performance regressions. An agent skill from fossasia/eventyay-interpretation.
TDD
pietheinstrengholt/rssmonster
Test-driven development. An agent skill from pietheinstrengholt/rssmonster.
TDD Workflow
hellangleZ/burn-in-cceverywhere-ralph
A skill your agent uses when writing new features, fixing bugs, or refactoring code.
- Official
TDD
sanity-io/sanity
Test-driven development with red-green-refactor loop. An agent skill from sanity-io/sanity.
Context Driven Development
Ibrahim-3d/orchestrator-supaconductor
A skill your agent uses when working with Conductor's context-driven development methodology, managing project context artifacts, or understanding the relationship between product.md, tech-stack.md…
More from HoangNguyen0403/agent-skills-standard
All 211 skills in this repoSubagent-Driven Development
HoangNguyen0403/agent-skills-standard
Runs a multi-task implementation plan by sending each task to a fresh implementer subagent, reviewing it independently, then reviewing the whole branch.
draw.io Architecture Diagramming
HoangNguyen0403/agent-skills-standard
Draws architecture diagrams as editable draw.io files from a JSON spec, with a fixed house style, one C4 level per diagram and evidence-tagged shapes.
Android Navigation 3 Guide
HoangNguyen0403/agent-skills-standard
Implements and migrates to Jetpack Navigation 3 in Compose: NavDisplay, typed route objects, a state-list back stack, deep links, multiple back stacks and dialog scenes.
Angular HttpClient Standards
HoangNguyen0403/agent-skills-standard
Sets rules for Angular HTTP code: functional interceptors, typed requests, services that own every call, and httpResource for reactive data loading in Angular 17+.
Angular Tooling
HoangNguyen0403/agent-skills-standard
Angular CLI usage, code generation, build configuration, and bundle optimization.
Common Code Review
HoangNguyen0403/agent-skills-standard
Conduct high-quality, persona-driven code reviews. An agent skill from HoangNguyen0403/agent-skills-standard.
Related
Categories
Questions about Quality Engineering Visual Baseline
What does Quality Engineering Visual Baseline do?
Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change. Quality Engineering Visual Baseline is an agent skill from HoangNguyen0403/agent-skills-standard. Captures, masks, compares, and updates screenshot baselines for web and mobile suites, with per-region thresholds and a reviewed-diff rule for every baseline change.
When should I use Quality Engineering Visual Baseline?
Quality Engineering Visual Baseline fits situations like: A screenshot assertion fails; A baseline needs updating; visual checks are being added; not for deciding what to verify.
How do I install Quality Engineering Visual Baseline in Claude Code?
Run `npx skills add HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a claude-code`. Or copy the skill folder (skills/quality-engineering/quality-engineering-visual-baseline in HoangNguyen0403/agent-skills-standard) into .claude/skills/quality-engineering-visual-baseline in your project. Claude Code loads it when a task matches its description.
How do I install Quality Engineering Visual Baseline in Codex?
Run `npx skills add HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a codex`. Or copy the skill folder (skills/quality-engineering/quality-engineering-visual-baseline in HoangNguyen0403/agent-skills-standard) into .agents/skills/quality-engineering-visual-baseline in your project. Codex loads it when a task matches its description.
Can I use Quality Engineering Visual Baseline 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 HoangNguyen0403/agent-skills-standard --skill quality-engineering-visual-baseline -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/quality-engineering-visual-baseline, .gemini/skills/quality-engineering-visual-baseline, .github/skills/quality-engineering-visual-baseline and .opencode/skills/quality-engineering-visual-baseline in your project.
What does Quality Engineering Visual Baseline need to run?
SKILL.md names no scripts, command-line tools or credentials: Quality Engineering Visual Baseline is instructions for the agent only.
Does Quality Engineering Visual Baseline access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Quality Engineering Visual Baseline 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 Quality Engineering Visual Baseline use?
Quality Engineering Visual Baseline 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 Quality Engineering Visual Baseline use?
About 852 tokens (SKILL.md is roughly 3.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 1.2k tokens, read only when the agent opens those files.
What are the alternatives to Quality Engineering Visual Baseline?
Skills that share tags, products or a category with Quality Engineering Visual Baseline: Web Application Testing (anthropics/skills, 180k stars), Diagnosing Bugs (fossasia/eventyay-interpretation, 1.6k stars), TDD (pietheinstrengholt/rssmonster, 564 stars) and TDD Workflow (hellangleZ/burn-in-cceverywhere-ralph, 112 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Quality Engineering Visual Baseline?
HoangNguyen0403 (a GitHub user) maintains it in HoangNguyen0403/agent-skills-standard, which has 572 GitHub stars. The repository holds 211 skills in this directory. The repository was last updated on October 9, 2026.
Source: HoangNguyen0403/agent-skills-standard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.