ui-visual-validator

Validate UI modifications for design system compliance and accessibility via screenshot analysis.

Updated Feb 21, 2026

Search Tags:#accessibility #design system #regression testing #visual testing #ui validation #pixel perfect

Ready to run

npx skills add https://github.com/HCMUTE-RTIC/fit-hcmute --skill ui-visual-validator-hcmute-rtic

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui-visual-validator
Source: https://github.com/HCMUTE-RTIC/fit-hcmute/tree/main/.agent/skills/ui-visual-validator
Command: npx skills add https://github.com/HCMUTE-RTIC/fit-hcmute --skill ui-visual-validator-hcmute-rtic

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill rigorously verifies that UI modifications meet design specifications and accessibility standards, preventing visual bugs and ensuring a consistent user experience.

Core Features & Use Cases

Visual Regression Testing: Detects unintended visual changes between design iterations.
Design System Compliance: Validates that UI elements adhere to established design tokens and guidelines.
Accessibility Verification: Assesses visual aspects of accessibility, such as color contrast and focus indicators.
Use Case: After a developer implements a new button style, use this Skill to confirm it matches the design mockups precisely, including its hover and disabled states, and that its color contrast meets WCAG AA standards.

Quick Start

Validate that the new button component meets accessibility contrast requirements.

Frequently Asked Questions about ui-visual-validator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I run visual regression testing to detect unintended UI changes?▼

Design system compliance validates that UI elements adhere to established design tokens and guidelines. It rigorously verifies that UI modifications match design specifications precisely, preventing visual bugs and maintaining a consistent user experience.

Can I verify WCAG color contrast and accessibility focus indicators automatically?▼

Visual regression testing detects unintended visual changes by analyzing screenshots between design iterations. It masters pixel-perfect precision and cross-browser consistency to prevent visual bugs and ensure a uniform user experience across updates.

What is the best way to validate design system compliance for a new UI component?▼

How do I verify WCAG color contrast and accessibility focus indicators automatically?▼

Accessibility verification assesses visual aspects like color contrast and focus indicators. It confirms that components meet WCAG AA standards by rigorously checking visual accessibility traits through screenshot analysis.

Does visual testing work with automated integrations for cross-browser consistency?▼

Visual testing supports automated integrations to ensure cross-browser consistency. It masters pixel-perfect precision by performing rigorous visual validation of UI modifications, detecting unintended changes across different environments.

When should I not use pixel-perfect visual validation for UI modifications?▼

Pixel-perfect visual validation is not ideal for dynamic content layouts where slight rendering shifts are expected. It is specialized for testing design system compliance and accessibility through strict screenshot analysis and visual regression.