What is the UI Visual Validator skill for Claude Code?

It is a specialized capability that enables Claude to perform rigorous visual audits, including regression testing, accessibility checks, and design system verification.

Can this skill find bugs that unit tests miss?

Yes, it identifies visual bugs like layout shifts, overlapping elements, and incorrect styling that standard logic-based unit tests often fail to detect.

Does it support modern testing frameworks?

The skill provides expert guidance and implementation patterns for tools like Playwright, Chromatic, Percy, Applitools, and Cypress.

Should I use this for mobile app testing?

Yes, the skill includes methodologies for cross-platform visual consistency, including mobile-first design and native app visual guidelines.

How does it handle accessibility?

It systematically evaluates visual accessibility markers such as WCAG color contrast ratios, focus indicator visibility, and text readability.

UI Visual Validator

Name: UI Visual Validator
Author: rmyndharis

byrmyndharis

•

552

•

セキュリティとテスト

Performs rigorous visual validation and accessibility audits to ensure UI modifications meet design system standards and functional requirements.

The UI Visual Validator skill acts as a meticulous gatekeeper for frontend development, ensuring that UI changes align perfectly with design specifications and accessibility standards. By employing a skeptical methodology that prioritizes direct visual evidence over code implementation, it detects regressions, layout shifts, and design inconsistencies. Whether you are validating a complex CSS refactor, ensuring WCAG 2.1 compliance, or auditing a component library for design token adherence, this skill provides the systematic framework needed to guarantee pixel-perfect, accessible user interfaces across all devices and themes.

主な機能

01Responsive design validation across multiple breakpoints and devices

02Design system and token implementation accuracy auditing

03552 GitHub stars

04Automated visual testing integration for CI/CD workflows

05WCAG 2.1/2.2 visual compliance and color contrast verification

06Pixel-perfect visual regression testing and change detection

ユースケース

01Validating dark mode and theme consistency during a brand refresh

02Verifying that a global CSS update didn't cause unintended layout shifts in legacy components

03Auditing new UI components for accessibility compliance including focus states and contrast ratios

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rmyndharis/antigravity-skills ui-visual-validator

For use in Claude.ai and ChatGPT

Download Skill