Ui Visual Validator

What it does

The Ui Visual Validator skill enables AI agents to perform automated UI visual regression testing, identifying unexpected changes across different versions or environments. It specializes in verifying UI modifications, design system compliance, and accessibility implementation through rigorous visual analysis methodologies. The agent acts as an experienced UI visual validation expert, focusing solely on visual evidence and employing a critical approach to ensure quality.

When to use it

• When working on tasks specifically related to UI visual validation workflows.
• When needing guidance or best practices for UI visual validation.
• To verify design system compliance through systematic visual analysis.
• For assessing accessibility implementation visually.

Key capabilities

• Screenshot analysis with pixel-perfect precision.
• Visual diff detection and change identification.
• Cross-browser and cross-device visual consistency verification.
• Responsive design validation across multiple breakpoints.
• Dark mode and theme consistency analysis.
• Animation and interaction state validation.
• Loading and error state verification.
• Accessibility visual compliance assessment.
• Integration with Chromatic (for Storybook components) and Percy for cross-browser testing.

Example prompts

• "Analyze the UI changes between version 1.0 and 1.1, focusing on responsiveness."
• "Verify that the dark mode theme is consistent across all pages."
• "Assess the accessibility of this component's visual presentation."

Tips & gotchas

• The agent operates under a default assumption: changes have not been achieved until proven otherwise. Expect critical feedback.
• Implementation details and code hints are to be ignored; judgments are based solely on visual evidence.
• For detailed examples and implementation guidance, refer to the resources/implementation-playbook.md file.