Does this require specific tools to run?

For best results, it uses the Tabz MCP to interact with the Chrome browser, allowing for advanced actions like network capture and log retrieval.

When is the best time to run the visual-qa skill?

It is designed to be run by a conductor after code has been merged to the main branch, ensuring that the extension is fully rebuilt and ready for testing.

Why should I use tab groups for visual QA?

Tab groups provide mandatory isolation, ensuring the AI targets specific windows without interfering with your active browsing or conflicting with other background workers.

Can this skill detect specific UI regressions?

Yes, by triggering specific UI paths and capturing screenshots or console logs, it can identify visual breaks or functional errors in the frontend.

What happens if no UI files are changed?

The skill uses a heuristic check to identify changes in extension directories or styling files; if none are found, it records a 'passed' status and skips the browser test to save resources.

Visual QA Checkpoint

Name: Visual QA Checkpoint
Author: GGPrompts

byGGPrompts

•

122

•

Browser Automation

Performs automated smoke tests and visual inspections on Chrome extension UI changes to ensure frontend integrity.

The Visual QA Checkpoint skill provides a structured framework for verifying user interface changes within Chrome extensions and web applications. It automatically detects UI-facing file modifications—such as changes to JSX, TSX, or CSS—and executes lightweight smoke tests including screenshot capture and console error logging. By enforcing mandatory tab group isolation, the skill ensures that automated browser operations do not interfere with the user's active session or other concurrent workers, providing a reliable and non-disruptive way to verify deployments before finalizing tasks.

Key Features

01Diagnostic capture of browser console logs and network requests

02122 GitHub stars

03Automated detection of UI-facing file changes in the codebase

04Automated screenshot generation for visual verification

05Standardized JSON checkpoint reporting for CI/CD integration

06Isolated browser testing via dynamic Tab Group creation

Use Cases

01Capturing visual evidence of frontend changes for documentation or review

02Detecting console errors or failed network requests in the extension side panel

03Verifying that a new UI feature renders correctly after merging to the main branch

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ggprompts/tabzchrome visual-qa

For use in Claude.ai and ChatGPT

Download Skill