skills.rest
HCMUTE-RTIC
HCMUTE-RTICOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/HCMUTE-RTIC/fit-hcmute --skill ui-visual-validator-hcmute-rtic
Or copy as Structured Prompt for Agent▼
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?▼

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.

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.

Related Skills

Explore More Software Engineering Skills→
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate
Wike-CHIWike-CHI
2

agent-browser

Automate browser interactions and extract structured page content via CLI.

Community
Intermediate
himaxxhimaxx
1

ui-visual-validator

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

Community
Advanced