skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

ui-visual-validator

Validates UI modifications through systematic visual analysis and accessibility compliance checks.

1|Updated Aug 17, 2025
Search Tags:#accessibility#responsive design#design system#wcag#visual testing#visual regression#ui validation
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-visual-validator-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-visual-validator
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/ui-visual-validator
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill ui-visual-validator-ratnesh-maurya

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI changes often look done in code but fail in the browser. This Skill provides a rigorous, skeptical visual verification process that confirms whether UI modifications actually achieved their goals, catching design system violations, accessibility gaps, and cross-browser inconsistencies before they ship. ## Core Features & Use Cases - Visual Regression & Diff Analysis: Detect pixel-level changes, layout shifts, and unintended side effects using tools like Chromatic, Percy, BackstopJS, and Playwright visual comparisons. - Design System Compliance: Verify component implementations against design tokens, typography scales, spacing systems, and brand guidelines. - Accessibility Verification: Assess WCAG 2.1/2.2 compliance including color contrast ratios, focus indicators, text scaling, and keyboard navigation visuals. - Use Case: After restyling a checkout button, use this Skill to confirm the new contrast ratio meets WCAG AA, the hover state renders correctly across browsers, and the responsive layout holds at mobile breakpoints. ## Quick Start Validate that the updated navigation menu collapses correctly at mobile breakpoints and 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 validate UI changes with visual regression testing?▼

Capture baseline screenshots, apply the UI change, then compare using tools like Chromatic, Percy, or BackstopJS to detect pixel-level differences. Verify each detected difference against the stated modification goal rather than assuming any change equals success.

What tools work best for automated visual testing?▼

Chromatic suits Storybook component testing, Percy handles cross-browser screenshot comparison, and Playwright visual comparisons integrate with end-to-end tests. BackstopJS works as an open-source automated regression framework for CI pipelines.

How do I check color contrast for WCAG compliance?▼

Measure the contrast ratio between text and background colors and compare against WCAG 2.1 thresholds: 4.5:1 for normal text and 3:1 for large text. Also verify focus indicators remain visible and test in high contrast mode.

Does visual testing work across different browsers and devices?▼

Yes, cross-browser matrix testing captures screenshots in Chrome, Firefox, Safari, and Edge at multiple viewport sizes. Responsive breakpoint validation confirms layouts adapt correctly from mobile through desktop widths.

Why does visual validation fail even when code changes are correct?▼

Code changes do not guarantee visual results due to CSS specificity conflicts, font loading issues, caching, or animation timing. Validation must rely solely on observed visual evidence, never on inferred effects from implementation details.

When should I not rely on automated visual testing alone?▼

Automated pixel diffs miss semantic issues like misleading hierarchy, poor readability, or incorrect interaction feedback. Manual inspection is still needed for edge cases, error states, loading transitions, and subjective design quality assessment.

Related Skills

Explore More Design & Creative Skills→
samjhechtsamjhecht
4

frontend-visual-regression-testing

Compare UI component screenshots against baselines to detect visual regressions.

Community
Advanced
bybren-llcbybren-llc
395

release-patterns

Automate PR creation, CI validation, and release coordination in rebase-first workflows.

Official
Intermediate
aroidoaroido

qa-testing

Automate end-to-end testing, visual regression, accessibility audits, and GitHub issue creation with Playwright.

Official
Advanced
OM-bit-hubOM-bit-hub

visual-regression

Capture and compare screenshots across pages and viewports with Playwright.

Community
Advanced