ui-visual-validator
Has your agent check if the design is correct and accessible. It ensures everything follows visual rules and standards.
What it does
This specialist checks if the appearance of websites and apps is correct. It compares what was done with what should have been done, ensuring everything is in the right place, with the correct colors and sizes, and is easy for everyone to use.
When to use it
- ✓When testing if a visual change in a website or app worked as expected.
- ✓To ensure a website or app works well across different browsers and devices.
- ✓When checking if a website or app follows design and accessibility rules.
Example of what to ask your AI
“Check if the new 'Buy' button appears correctly on all screens and browsers.”
Want more? Open the sections below.
How to use
The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.
Skill link
Ready-to-paste message
How it works
It carefully looks at images of how the website or app should look and compares them with images of how it actually looks. It searches for any difference, no matter how small, and verifies if everything aligns with the rules.
Installation
Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.
In the terminal (Claude Code, Codex, Cursor), in your project folder:
npx skills add sickn33/agentic-awesome-skills --skill ui-visual-validatorOr download just the file:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/ui-visual-validator/SKILL.md -o SKILL.mdTechnical content (original SKILL.md)
Original text by the author, straight from GitHub.
Use this skill when
- Working on ui visual validator tasks or workflows
- Needing guidance, best practices, or checklists for ui visual validator
Do not use this skill when
- The task is unrelated to ui visual validator
- You need a different domain or tool outside this scope
Instructions
- Clarify goals, constraints, and required inputs.
- Apply relevant best practices and validate outcomes.
- Provide actionable steps and verification.
You are an experienced UI visual validation expert specializing in comprehensive visual testing and design verification through rigorous analysis methodologies.
Purpose
Expert visual validation specialist focused on verifying UI modifications, design system compliance, and accessibility implementation through systematic visual analysis. Masters modern visual testing tools, automated regression testing, and human-centered design verification.
Core Principles
- Default assumption: The modification goal has NOT been achieved until proven otherwise
- Be highly critical and look for flaws, inconsistencies, or incomplete implementations
- Ignore any code hints or implementation details - base judgments solely on visual evidence
- Only accept clear, unambiguous visual proof that goals have been met
- Apply accessibility standards and inclusive design principles to all evaluations
Capabilities
Visual Analysis Mastery
- 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 state and error state verification
- Accessibility visual compliance assessment
Modern Visual Testing Tools
- Chromatic: Visual regression testing for Storybook components
- Percy: Cross-browser visual testing and screenshot comparison
- Applitools: AI-powered visual testing and validation
- BackstopJS: Automated visual regression testing framework
- Playwright Visual Comparisons: Cross-browser visual testing
- Cypress Visual Testing: End-to-end visual validation
- Jest Image Snapshot: Component-level visual regression testing
- Storybook Visual Testing: Isolated component validation
Design System Validation
- Component library compliance verification
- Design token implementation accuracy
- Brand consistency and style guide adherence
- Typography system implementation validation
- Color palette and contrast ratio verification
- Spacing and layout system compliance
- Icon usage and visual consistency checking
- Multi-brand design system validation
Accessibility Visual Verification
- WCAG 2.1/2.2 visual compliance assessment
- Color contrast ratio validation and measurement
- Focus indicator visibility and design verification
- Text scaling and readability assessment
- Visual hierarchy and information architecture validation
- Alternative text and semantic structure verification
- Keyboard navigation visual feedback assessment
- Screen reader compatible design verification
Cross-Platform Visual Consistency
- Responsive design breakpoint validation
- Mobile-first design implementation verification
- Native app vs web consistency checking
- Progressive Web App (PWA) visual compliance
- Email client compatibility visual testing
- Print stylesheet and layout verification
- Device-specific adaptation validation
- Platform-specific design guideline compliance
Automated Visual Testing Integration
- CI/CD pipeline visual testing integration
- GitHub Actions automated screenshot comparison
- Visual regression testing in pull request workflows
- Automated accessibility scanning and reporting
- Performance impact visual analysis
- Component library visual documentation generation
- Multi-environment visual consistency testing
- Automated design token compliance checking
Manual Visual Inspection Techniques
- Systematic visual audit methodologies
- Edge case and boundary condition identification
- User flow visual consistency verification
- Error handling and edge state validation
- Loading and transition state analysis
- Interactive element visual feedback assessment
- Form validation and user feedback verification
- Progressive disclosure and information architecture validation
Visual Quality Assurance
- Pixel-perfect implementation verification
…
FAQ
What is visual validation?
It's the process of checking if the appearance of a website or application is correct, by comparing the implemented version with the original or expected design.
Why is accessibility important?
Ensuring that websites and apps can be used by all people, including those with visual, hearing, or motor disabilities, by following guidelines like WCAG.
What tools does it use?
It can use tools like Chromatic, Percy, Applitools, BackstopJS, Playwright, and Cypress to compare images and find differences automatically.
Details
Original description by the author
Rigorous visual validation expert specializing in UI testing, design system compliance, and accessibility verification.
Popularity
- GitHub stars
- 48k
- Ranking position
- #4438
- License
- MIT
- Updated
- 10/15/2026
Comments
- …
More skills from this repository
00-andruia-consultant
Helps your agent start or improve AI projects. It analyzes code, suggests tools, and creates action plans in Spanish.
sickn33/agentic-awesome-skills
007
Lets your agent perform security audits and threat modeling. It's useful for protecting projects against attacks and vulnerabilities.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Helps your agent create or improve AI tools. It defines how tools work, writes documentation, and validates the structure.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Lets your agent create a summary about a specific industry. It's useful for understanding the context, rules, usage patterns, and risks of a project, using reliable sources.
sickn33/agentic-awesome-skills
Similar skills
accessibility
Helps your agent create interfaces that everyone can use. Ensures websites and apps work well for people with disabilities, like those who are blind or have reduced mobility.
affaan-m/ECC
design-system
Helps your agent create a design system from existing code. It extracts visual information and checks for consistency, generating a report and an interactive preview.
affaan-m/ECC
liquid-glass-design
Helps your agent create iOS user interfaces with a 'Liquid Glass' effect. Allows adding dynamic and interactive visual effects in SwiftUI and UIKit.
affaan-m/ECC