Review Local UI Screenshots
xiaocang/easydict_win32
Review Easydict UI automation screenshot artifacts already present in local artifacts/ui-screenshots, screenshots, or a user-provided artifact directory.
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests.
Install Visual QA Testing
$ npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing --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/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/resources/visual-qa-testing .claude/skills/visual-qa-testing && 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 "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .claude/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testingType 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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/resources/visual-qa-testing .agents/skills/visual-qa-testing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .agents/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/resources/visual-qa-testing .cursor/skills/visual-qa-testing && 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 "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .cursor/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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/spencerpauly/awesome-cursor-skills.git --path resources/visual-qa-testing--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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/resources/visual-qa-testing .gemini/skills/visual-qa-testing && 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 "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .gemini/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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 spencerpauly/awesome-cursor-skills visual-qa-testingInstalls 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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/resources/visual-qa-testing .github/skills/visual-qa-testing && 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 "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .github/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install spencerpauly/awesome-cursor-skills visual-qa-testing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/spencerpauly/awesome-cursor-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/resources/visual-qa-testing .opencode/skills/visual-qa-testing && 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 "visual-qa-testing" agent skill from https://github.com/spencerpauly/awesome-cursor-skills/tree/main/resources/visual-qa-testing into .opencode/skills/visual-qa-testing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "visual-qa-testing", 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
visual-qa-testing- GitHub stars
- 842
- Token cost
- ~669 tokens
- SKILL.md length
- 294 words
- Files
- 1
- Skills in repo
- 57
- Repo updated
- First seen
- Licence
- CC0-1.0
At a glance
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests.
- Works in 7 steps: Ensure the dev server is running — check… → Navigate to the page — use… → Take a screenshot — capture the current… → …
- Tasks that involve Visual regression testing
- SKILL.md covers How It Works, Steps and Notes
- Calls npm
What it does
Visual QA Testing is an agent skill from spencerpauly/awesome-cursor-skills. Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
Its SKILL.md is about 670 tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Testing & QA, covering Visual regression testing. The repository describes itself as: A curated list of awesome skills for Cursor. The licence is CC0-1.0.
When your agent uses it
- Tasks that involve Visual regression testing
Example prompts
- “/visual-qa-testing”
Workflow steps
7 steps, taken from the first numbered list in SKILL.md.
- Ensure the dev server is running — check if there's already a terminal running the dev server. If not, start one in the background
- Navigate to the page — use browser_navigate to open the relevant page
- Take a screenshot — capture the current state
- Check console for errors — look for JavaScript errors or warnings
- Audit network requests — check for failed API calls or unexpected requests
- Interact if needed — if the change involves interactive elements (buttons, forms, modals), use browser_click, browser_fill, or…
- Report findings — summarize
What it can do on your machine
Read from SKILL.md and the folder at commit 99cd265. 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:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, 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
Visual QA Testing loads about 669 tokens when it runs. Until then it costs about 57 tokens; SKILL.md has 294 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 spencerpauly/awesome-cursor-skills at commit 99cd265, republished under its CC0-1.0 licence (© spencerpauly). 294 words, ~669 tokens.
Download SKILL.mdSave it as
.claude/skills/visual-qa-testing/SKILL.md (or your agent's skills folder).- name
- visual-qa-testing
- description
- Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Use after making UI changes to verify they look correct.
Visual QA
Use this skill after making UI changes to visually verify the result, catch console errors, and audit network requests — all without leaving Cursor.
How It Works
Cursor has a built-in browser (cursor-ide-browser MCP) that can navigate to URLs, take screenshots, read console messages, inspect network requests, and interact with page elements. This skill uses those tools to do a quick visual QA pass.
Steps
Ensure the dev server is running — check if there's already a terminal running the dev server. If not, start one in the background:
bash npm run devWait for the server to be ready (watch for the "ready" or localhost URL in the output).
Navigate to the page — use
browser_navigateto open the relevant page:Tool: browser_navigate Arguments: { "url": "http://localhost:3000", "take_screenshot_afterwards": true }If the change is on a specific route, navigate directly to it (e.g.,
/settings,/dashboard).Take a screenshot — capture the current state:
Tool: browser_take_screenshot Arguments: { "fullPage": true }Review the screenshot for visual issues: layout breaks, missing content, wrong colors, misaligned elements.
Check console for errors — look for JavaScript errors or warnings:
Tool: browser_console_messagesReport any errors, especially
TypeError,ReferenceError, failed imports, or React hydration mismatches.Audit network requests — check for failed API calls or unexpected requests:
Tool: browser_network_requestsLook for: 4xx/5xx status codes, CORS errors, excessively large responses, unnecessary duplicate requests.
Interact if needed — if the change involves interactive elements (buttons, forms, modals), use
browser_click,browser_fill, orbrowser_hoverto test the interaction, then take another screenshot to verify.Report findings — summarize:
- Screenshot shows the UI looks correct (or what's wrong)
- Console is clean (or list errors found)
- Network requests are healthy (or list failures)
Notes
- Always use
browser_snapshotbefore clicking elements to get the correct element refs. - For responsive testing, use
browser_resizeto check different viewport sizes. - Use
browser_navigatewithposition: "side"to open the browser beside your code.
© spencerpauly, CC0-1.0. 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 resources/visual-qa-testing of spencerpauly/awesome-cursor-skills.
Open the folder on GitHubat commit 99cd265
Compare with similar skills
Visual QA Testing 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 |
|---|---|---|---|---|---|---|
| Visual QA Testing this skillspencerpauly/awesome-cursor-skills | 842 | — | ~669 | Automated safety check: Pass | CC0-1.0 | |
| Review Local UI Screenshotsxiaocang/easydict_win32 | 101 | — | ~1.1k | Automated safety check: Pass | GPL-3.0 | |
| Handsontable Visual Test Demoshandsontable/handsontable | 22k | — | ~1.3k | Automated safety check: Pass | Custom licence | |
| Kc Screenshotimran31415/kube-coder | 388 | — | ~870 | Automated safety check: Notes | MIT | |
| Visual QAliangdabiao/Godogen | 127 | — | ~1.4k | Automated safety check: Pass | MIT | |
| Meticulous FixFlintSH/Flare | 135 | — | ~2.3k | Automated safety check: Pass | MIT |
Similar skills
Handsontable Visual Test Demos
handsontable/handsontable
Explains how to add or change the demo pages that Handsontable's visual regression suite photographs, including per-feature routes in the js demo and the shared grid.
Kc Screenshot
imran31415/kube-coder
Capture desktop + mobile, dark + light screenshots of the kube-coder dashboard SPA for visual QA of a UI change.
Visual QA
liangdabiao/Godogen
Visual quality assurance — analyze game screenshots for defects, compare against reference, check motion in frame sequences.
Meticulous Fix
FlintSH/Flare
Fix the visual diffs that have been reviewed and rejected on a Meticulous test run, following their review comments if given.
Visual QA For Web And Terminal UIs
code-yeongyu/oh-my-openagent
Checks a built UI against a human-interface checklist and any reference image, pairing day and night screenshots at two screen widths.
More from spencerpauly/awesome-cursor-skills
All 57 skills in this repoBabysitting PR
spencerpauly/awesome-cursor-skills
Monitor a pull request for CI failures, review comments, and merge conflicts — then fix them automatically.
Best Of N Solving
spencerpauly/awesome-cursor-skills
Solve a hard problem by trying multiple approaches in parallel using isolated git worktrees.
Grinding Until Pass
spencerpauly/awesome-cursor-skills
Keep iterating on code changes until the tests pass, the build succeeds, or linting is clean.
Parallel CI Triage
spencerpauly/awesome-cursor-skills
When GitHub Actions fails, fetch failing job logs and assign each failing job to a separate subagent that fixes its slice of the problem in parallel.
Parallel Exploring
spencerpauly/awesome-cursor-skills
Explore a large codebase in parallel by launching multiple explore subagents that each investigate a different area simultaneously.
Profiling Performance
spencerpauly/awesome-cursor-skills
Profile a running web application's CPU performance using Cursor's built-in browser profiler.
Related
Categories
Questions about Visual QA Testing
What does Visual QA Testing do?
Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests. Visual QA Testing is an agent skill from spencerpauly/awesome-cursor-skills. Visually QA a web application by launching it in Cursor's built-in browser, taking screenshots, checking console errors, and auditing network requests.
When should I use Visual QA Testing?
Visual QA Testing fits situations like: tasks that involve Visual regression testing.
How do I install Visual QA Testing in Claude Code?
Run `npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a claude-code`. Or copy the skill folder (resources/visual-qa-testing in spencerpauly/awesome-cursor-skills) into .claude/skills/visual-qa-testing in your project. Claude Code loads it when a task matches its description.
How do I install Visual QA Testing in Codex?
Run `npx skills add spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a codex`. Or copy the skill folder (resources/visual-qa-testing in spencerpauly/awesome-cursor-skills) into .agents/skills/visual-qa-testing in your project. Codex loads it when a task matches its description.
Can I use Visual QA Testing 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 spencerpauly/awesome-cursor-skills --skill visual-qa-testing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/visual-qa-testing, .gemini/skills/visual-qa-testing, .github/skills/visual-qa-testing and .opencode/skills/visual-qa-testing in your project.
What does Visual QA Testing need to run?
Going by SKILL.md and its folder, Visual QA Testing needs the command-line tools its instructions call (npm).
Does Visual QA Testing access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Visual QA Testing 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 Visual QA Testing use?
Visual QA Testing is published under the CC0-1.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Visual QA Testing use?
About 669 tokens (SKILL.md is roughly 2.7k 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 Visual QA Testing?
Skills that share tags, products or a category with Visual QA Testing: Review Local UI Screenshots (xiaocang/easydict_win32, 101 stars), Handsontable Visual Test Demos (handsontable/handsontable, 22k stars), Kc Screenshot (imran31415/kube-coder, 388 stars) and Visual QA (liangdabiao/Godogen, 127 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Visual QA Testing?
spencerpauly (a GitHub user) maintains it in spencerpauly/awesome-cursor-skills, which has 842 GitHub stars. The repository holds 57 skills in this directory. The repository was last updated on August 2, 2026.
Source: spencerpauly/awesome-cursor-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.