Does it support accessibility testing?

Yes, it specifically assesses WCAG compliance, including color contrast ratios, focus indicators, and screen reader compatibility.

What is the UI Visual Validator skill?

It is a specialized extension for Claude Code that focuses on rigorous visual testing, ensuring UI changes meet design standards and accessibility requirements through objective analysis.

How does it differ from standard code reviews?

Unlike code reviews that look at implementation details, this skill ignores code hints and focuses solely on visual evidence to confirm if the final UI output is correct.

Which visual testing tools can this skill work with?

It is designed to complement tools like Chromatic, Percy, Applitools, Playwright, and Cypress for automated and manual visual audits.

UI Visual Validator

Name: UI Visual Validator
Author: xiangteng007

byxiangteng007

0•

Security & Testing

Validates UI modifications and design system compliance through rigorous visual analysis and accessibility verification.

This skill transforms Claude into a specialized UI validation expert that prioritizes objective visual evidence over code implementation. It is designed to perform pixel-perfect analysis, check for design system consistency, and ensure WCAG accessibility compliance across various breakpoints and themes. By integrating with modern testing tools like Chromatic and Playwright, it helps developers catch visual regressions, layout shifts, and styling inconsistencies early in the development lifecycle, acting as a final gatekeeper for high-quality frontend deployments.

Key Features

010 GitHub stars

02Cross-browser and responsive breakpoint consistency auditing

03Comprehensive WCAG 2.1/2.2 accessibility and color contrast verification

04Pixel-perfect screenshot analysis and visual regression detection

05Design system token and component library compliance checking

06Automated integration with tools like Percy, Applitools, and Playwright

Use Cases

01Automating visual regression tests within a CI/CD pipeline to catch unintended styling changes

02Auditing a new feature for accessibility violations and dark mode consistency

03Verifying that a UI refactor matches the original design specifications exactly

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiangteng007/xxt-agent ui-visual-validator

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Cross-browser and responsive breakpoint consistency auditing

03Comprehensive WCAG 2.1/2.2 accessibility and color contrast verification

04Pixel-perfect screenshot analysis and visual regression detection

05Design system token and component library compliance checking

06Automated integration with tools like Percy, Applitools, and Playwright

Use Cases

01Automating visual regression tests within a CI/CD pipeline to catch unintended styling changes

02Auditing a new feature for accessibility violations and dark mode consistency

03Verifying that a UI refactor matches the original design specifications exactly

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add xiangteng007/xxt-agent ui-visual-validator

For use in Claude.ai and ChatGPT