ui-visual-validator

ui-visual-validator - UI Visual Validation Expert

Skill Overview

ui-visual-validator is a meticulous UI visual validation expert focused on using systematic visual analysis methods to verify whether UI changes achieve the intended goals, whether the design system is compliant, and whether accessibility standards have been implemented correctly. It is proficient with a variety of modern visual testing tools, enabling pixel-level screenshot comparisons and cross-platform consistency verification.

Use Cases

1. Visual Verification After UI Changes

When you modify UI code and need to confirm that the changes truly achieve the expected results, this skill helps you perform rigorous visual analysis. It does not infer outcomes from code changes; instead, it requires actual visual evidence (screenshots, screen recordings, etc.). Through objective visual comparisons, it determines whether the goal has been met. Whether you adjusted component positions, changed sizes, or modified colors and styling, it delivers accurate validation conclusions.

2. Design System Compliance Acceptance

When implementing a design system or component library, you need to verify that the development implementation aligns with design specifications. This skill can check whether design tokens are used correctly, whether component styles are consistent, and whether brand guidelines are followed. It validates the implementation quality of design elements such as typography, spacing, and colors with pixel-level precision, ensuring that your design system doesn’t drift when put into production.

3. Accessibility and Multi-Device Consistency Validation

To confirm that the UI meets WCAG accessibility standards and remains consistent across different browsers, devices, and themes, this skill provides a comprehensive evaluation. It can detect accessibility elements such as color contrast, focus indicators, and text scaling, while also validating visual consistency across responsive breakpoints, dark mode, and multiple browsers.

Core Capabilities

1. Systematic Visual Analysis Workflow

This skill uses a strict “zero-assumption” analysis approach—assuming the change goal has not been met until there is clear visual evidence proving success. The workflow includes objectively describing the visual content, verifying targets one by one through comparison, actively searching for evidence of failure, and challenging whether “different” equals “correct.” For changes such as rotation, position, and size, it requires specific visual measurement data to ensure the validation conclusion is supported.

2. Guidance for Modern Visual Testing Tools

Proficient with popular visual testing tools such as Chromatic, Percy, Applitools, BackstopJS, Playwright, and Cypress. It can help you choose appropriate tools and configure them for use. From component-level isolation testing to end-to-end visual validation, from CI/CD integration to PR workflow automation, it provides professional guidance. It is especially strong at handling common issues in visual testing—such as reducing false positives, handling dynamic content, and improving cross-environment stability.

3. Accessibility Visual Compliance Assessment

Integrate accessibility standards into every visual evaluation, not just focusing on whether things “look right,” but on whether they “work.” It can verify whether color contrast meets WCAG standards, whether focus indicators are clearly visible, whether text scaling remains readable, and whether keyboard navigation provides adequate visual feedback. This ensures your UI considers inclusive design at the visual level—not merely semantic markup at the code level.

Common Questions

What’s the difference between ui-visual-validator and ordinary manual testing?

The core strength of this skill is a “evidence-driven” rigorous methodology. It does not accept subjective judgments like “it looks fine.” Instead, it requires measurable visual evidence. For example, when verifying element rotation, it will require confirming whether the aspect ratio truly changes; when verifying position changes, it will require providing coordinate differences. This strictness helps catch subtle issues that are easy to overlook, making it especially suitable for scenarios requiring high-quality UI.

What if visual tests produce too many false positives?

This is a common pain point in visual testing. This skill helps analyze the root causes of false positives—whether it’s due to dynamic content (timestamps, animations), cross-platform rendering differences, or environment configuration problems. It then provides targeted solutions, such as using ignore regions, waiting for a stable state, standardizing the test environment, and adjusting similarity thresholds. The goal is to make visual tests both sensitive and reliable, reducing noise signals.

Which visual testing tool should I choose?

It depends on your tech stack and needs. If you use Storybook, Chromatic is a great choice. If you need cross-browser validation, Percy or Playwright is more suitable. If you want AI-powered intelligent matching, Applitools’ Visual AI is worth considering. Based on your specific scenarios (component library vs full-page tests, team size, CI/CD environment, budget), this skill recommends the most suitable combination of tools and provides best practices for configuration and integration.

Can this skill help me verify dark mode?

Yes. Dark mode validation is one of this skill’s strong areas. It checks whether color mapping is correct, whether visual hierarchy is preserved, whether contrast meets requirements, and whether icons and images remain clearly visible in both themes. If needed, it can also verify whether the transition animations during theme switching are smooth and whether user preference settings (prefers-color-scheme) are handled correctly.