skills.rest
phrazzld
phrazzldCOMMUNITY
Explore all skills by this author →
GitHub

visual-qa

Capture browser screenshots across viewports to detect layout and styling issues.

13|3|Updated Mar 2, 2026
Search Tags:#browser automation#visual testing#screenshot#ui ux#frontend qa#css validation
One-click install
npx skills add https://github.com/phrazzld/agent-skills --skill visual-qa-phrazzld
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/phrazzld/agent-skills/tree/main/core/visual-qa
Command: npx skills add https://github.com/phrazzld/agent-skills --skill visual-qa-phrazzld

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires agent-browser, npx, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of visually inspecting frontend changes in a browser, identifying layout, styling, and UX issues before they reach users.

Core Features & Use Cases

  • Automated Browser Testing: Opens the running application in a browser to capture screenshots of affected pages.
  • Visual Issue Detection: Analyzes screenshots for common UI/UX problems like overflow, clipping, inconsistent spacing, and contrast failures.
  • Trivial Fixes: Automatically corrects minor visual issues when the --fix flag is enabled.
  • Use Case: After deploying a new feature, run /visual-qa to ensure all new elements render correctly across different viewports and that no existing layouts are broken.

Quick Start

Run the visual-qa skill to check the staging environment for any frontend issues.

Frequently Asked Questions about visual-qa

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual testing for frontend changes across different viewports?▼

Automate visual testing by running a browser-based tool that captures screenshots of affected routes across specified viewports to identify layout, styling, and UX discrepancies. This Skill analyzes the screenshots for common UI issues like overflow and clipping.

Can I automatically fix CSS validation issues detected during a UI UX visual check?▼

Yes, you can automatically fix CSS validation issues by enabling the `--fix` flag. This allows the browser automation process to automatically correct minor visual problems and styling discrepancies it detects.

What is browser-based visual QA and when do I need it for my application?▼

Browser-based visual QA is the process of automatically inspecting rendered frontend changes to catch layout and UX issues before they reach users. You need it after deploying new features to ensure existing layouts are not broken.

Do I need agent-browser and npx installed to run automated frontend visual tests?▼

Yes, you need agent-browser and npx installed to run automated frontend visual tests. These dependencies provide the necessary environment for browser automation and executing the screenshot capture scripts.

Does this visual testing approach integrate with existing build and PR workflows?▼

Yes, this visual testing approach integrates with build and PR workflows. It automates frontend QA by capturing screenshots of affected pages and reporting visual discrepancies directly within your development pipeline.

Related Skills

Explore More Software Engineering Skills→
bianhaifeng789-huebianhaifeng789-hue

harness-browser-test

Automate headless Chromium browser tests with scripted actions and screenshots.

Community
Intermediate
collinpeterscollinpeters
1

github-pr-comment-reviewer

Classify GitHub pull request comments and suggest fixes for trivial issues.

Community
Intermediate
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate