What visual aspects can Claude inspect with this skill?

Claude can inspect layout integrity, text readability, the presence of interactive elements, and overall responsive design fit via captured screenshots.

Does this skill require external tools?

Yes, it requires the TabzChrome extension to be running in your browser and the tabz MCP server to be connected to Claude Code.

Can I use this for automated deployment gates?

Absolutely. The skill saves structured results to a .checkpoints directory, allowing for programmatic verification of the QA status before proceeding with a workflow.

How does the skill handle console errors?

The skill captures logs and categorizes them. It evaluates whether they are critical runtime errors that should fail the gate or minor warnings that can be ignored.

What is the Visual QA skill for Claude Code?

It is a specialized skill that allows Claude to perform automated UI checks, including console log analysis and screenshot capture, to verify web application quality.

Visual QA Checkpoint

Name: Visual QA Checkpoint
Author: GGPrompts

byGGPrompts

•

브라우저 자동화

Automates UI verification by capturing screenshots, checking browser console logs, and identifying visual regressions using Tabz MCP tools.

소개

The Visual QA skill provides a standardized framework for Claude to perform automated visual inspections of web applications. By leveraging the Tabz MCP server and Chrome extension, it enables Claude to programmatically analyze the browser console for runtime errors, capture full-page screenshots for layout verification, and monitor network requests to ensure the UI is fully functional. This skill is ideal for implementing 'conductor gates' where automated quality assurance is required to verify that frontend changes haven't introduced regressions or broken core user experiences.

주요 기능

Network request monitoring to identify failed API calls (4xx/5xx)
1 GitHub stars
Real-time page metadata and load status validation
Standardized JSON reporting for structured CI/CD checkpoint logging
High-fidelity screenshot capture for visual state verification
Automated browser console error detection and severity evaluation

사용 사례

Verifying UI consistency and layout integrity after CSS or component updates
Automated smoke testing of web applications during deployment gates
Debugging silent JavaScript runtime errors that don't trigger visual alerts

소개

주요 기능

Network request monitoring to identify failed API calls (4xx/5xx)
1 GitHub stars
Real-time page metadata and load status validation
Standardized JSON reporting for structured CI/CD checkpoint logging
High-fidelity screenshot capture for visual state verification
Automated browser console error detection and severity evaluation

사용 사례

Verifying UI consistency and layout integrity after CSS or component updates
Automated smoke testing of web applications during deployment gates
Debugging silent JavaScript runtime errors that don't trigger visual alerts