skills.rest
xoai
xoaiCOMMUNITY
Explore all skills by this author →
𝕏@xoaiGitHub

visual-review

Analyze UI screenshots at multiple breakpoints against design specifications and web standards.

25|7|Updated Mar 16, 2026
Search Tags:#accessibility#responsive design#ui review#visual testing#design validation#screenshot analysis
One-click install
npx skills add https://github.com/xoai/sage --skill visual-review-xoai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-review
Source: https://github.com/xoai/sage/tree/main/core/capabilities/review/visual-review
Command: npx skills add https://github.com/xoai/sage --skill visual-review-xoai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automatically evaluates the visual implementation of UI components against design specifications, ensuring consistency, responsiveness, and adherence to standards across different screen sizes.

Core Features & Use Cases

  • Automated Screenshot Analysis: Captures screenshots at multiple breakpoints (mobile, tablet, desktop).
  • Visual Validation: Compares screenshots against design conventions, responsiveness requirements, and accessibility guidelines.
  • Before/After Comparison: Identifies improvements and regressions when previous screenshots are available.
  • Use Case: After a developer implements a new feature, this Skill can be used to automatically verify that the UI looks exactly as intended on all target devices before it's merged.

Quick Start

Use the visual-review skill to evaluate the UI implementation for the new user profile page.

Frequently Asked Questions about visual-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my UI implementation matches the design spec across different breakpoints?▼

Visual validation compares screenshots captured at multiple breakpoints against design conventions and web standards. It evaluates layout, hierarchy, spacing, and responsiveness to ensure the implemented UI matches the original design specifications.

What is automated screenshot analysis for visual testing?▼

Automated screenshot analysis for visual testing captures UI images at mobile, tablet, and desktop breakpoints, then evaluates them against design conventions and accessibility guidelines to validate visual implementation quality.

How do I perform a visual review after redesigning a web component?▼

Provide screenshots of the redesigned UI at target breakpoints. The review process analyzes layout, hierarchy, and accessibility, comparing before and after screenshots when available to identify visual improvements and regressions.

Do I need screenshot capture tools to validate UI responsiveness and accessibility?▼

Yes, screenshot capture tools are required. The visual validation process depends on analyzing captured screenshots at various breakpoints to evaluate responsiveness, spacing, and adherence to accessibility guidelines.

Can I compare before and after screenshots to identify UI regressions?▼

Yes, before and after comparison is supported. When previous screenshots are available, the visual review identifies specific visual improvements and regressions by comparing the updated implementation against prior versions.

What layout and accessibility issues does a visual review catch?▼

A visual review catches layout misalignments, spacing inconsistencies, hierarchy problems, responsiveness failures across breakpoints, and deviations from defined accessibility guidelines and web standards.

Related Skills

Explore More Design & Creative Skills→
testdriveraitestdriverai
238

testdriver:screenshot

Capture screenshots during test execution and store them by test file.

Official
Basic
cedricfarinazzocedricfarinazzo

merge-update-pr

Rebase a PR branch on main and push only when a merge commit is created.

Community
Advanced
dylanfeltusdylanfeltus
178

visual-qa

Automate visual QA of UI screenshots with vision models for design conformance.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

arrange

Assess web interface layouts for spacing, hierarchy, and grid structure.

Community
Intermediate