Does it support accessibility checking?

Yes, it includes rigorous WCAG 2.1/2.2 verification, including color contrast ratios, focus indicators, and text scaling validation.

How does this skill differ from standard unit testing?

Unlike unit testing which checks logic, this skill focuses on visual evidence, ensuring that code changes translate to the correct UI presentation across different devices and screen sizes.

Can I use it with tools like Playwright or Percy?

Absolutely. It is designed to work alongside and provide expert guidance for modern visual testing frameworks like Percy, Chromatic, and Playwright.

Does it handle responsive design and mobile views?

Yes, it specifically validates UI consistency across multiple breakpoints, mobile-first implementations, and cross-platform environments to ensure a seamless user experience.

UI Visual Validator

Name: UI Visual Validator
Author: boisenoise

byboisenoise

•

セキュリティとテスト

Performs rigorous visual validation of UI components, design system compliance, and accessibility standards to ensure pixel-perfect implementations.

The UI Visual Validator skill transforms Claude into a specialized gatekeeper for frontend quality assurance. It focuses on verifying that UI modifications accurately reflect design intentions through systematic visual analysis rather than just code inspection. The skill excels at identifying layout shifts, verifying design system token usage, and ensuring WCAG accessibility compliance across various breakpoints and themes. By adopting a skeptical, evidence-based approach, it helps developers catch subtle regressions in responsive design, color contrast, and interactive states before they reach production.

主な機能

01Pixel-perfect visual diffing and regression analysis

02Comprehensive WCAG 2.1/2.2 accessibility and contrast auditing

03Design system and component library compliance verification

04Cross-browser and responsive breakpoint validation

053 GitHub stars

06Integration guidance for tools like Percy, Chromatic, and Playwright

ユースケース

01Ensuring new UI features strictly adhere to established design system tokens and spacing

02Auditing complex layouts for accessibility compliance and focus state visibility

03Verifying that a component refactor hasn't introduced visual regressions across themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add boisenoise/skills-collections antigravity-ui-visual-validator

For use in Claude.ai and ChatGPT

主な機能

01Pixel-perfect visual diffing and regression analysis

02Comprehensive WCAG 2.1/2.2 accessibility and contrast auditing

03Design system and component library compliance verification

04Cross-browser and responsive breakpoint validation

053 GitHub stars

06Integration guidance for tools like Percy, Chromatic, and Playwright

ユースケース

01Ensuring new UI features strictly adhere to established design system tokens and spacing

02Auditing complex layouts for accessibility compliance and focus state visibility

03Verifying that a component refactor hasn't introduced visual regressions across themes

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add boisenoise/skills-collections antigravity-ui-visual-validator

For use in Claude.ai and ChatGPT