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.

主要功能

01Network request monitoring to identify failed API calls (4xx/5xx)

021 GitHub stars

03Real-time page metadata and load status validation

04Standardized JSON reporting for structured CI/CD checkpoint logging

05High-fidelity screenshot capture for visual state verification

06Automated browser console error detection and severity evaluation

使用场景

01Verifying UI consistency and layout integrity after CSS or component updates

02Automated smoke testing of web applications during deployment gates

03Debugging silent JavaScript runtime errors that don't trigger visual alerts

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/my-plugins visual-qa

For use in Claude.ai and ChatGPT

Download Skill