ui-screenshot-review

Analyze UI screenshots for typography, contrast, spacing, layout, and accessibility.

Updated Nov 14, 2025
One-click install
npx skills add https://github.com/automata-network/claude-plugins --skill ui-screenshot-review
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: ui-screenshot-review
Source: https://github.com/automata-network/claude-plugins/tree/main/plugins/frontend-testing/skills/ui-screenshot-reviewer/skills/screenshot-review
Command: npx skills add https://github.com/automata-network/claude-plugins --skill ui-screenshot-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure screenshot assets meet pixel-perfect UI standards by providing structured design critiques that pinpoint critical issues and actionable fixes.

Core Features & Use Cases

  • Picky UI/UX critique of typography, color, spacing, layout, and accessibility
  • Regression-aware review with optional baseline comparisons
  • Generates a design review report with evidence and fixes

Quick Start

Provide the path to your screenshot directory to initiate a detailed design review.

Frequently Asked Questions about ui-screenshot-review

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

FAQPage Schema
How do I run a visual QA review on UI screenshots to check for design regressions?

Visual QA review of UI screenshots analyzes typography, color contrast, spacing, layout, and accessibility against design guidelines. It produces a structured design review report containing evidence and actionable fixes for pixel-perfect quality.

What is screenshot-based UX analysis and how does it improve accessibility?

Screenshot-based UX analysis evaluates UI elements against accessibility standards and design tokens. It identifies contrast, spacing, and typography issues, generating evidence-based reports with actionable fixes to ensure your interface meets a11y requirements.

Can I compare new UI screenshots against a regression baseline?

Yes, you can compare new UI screenshots against a regression baseline. The tool operates with or without a baseline, performing regression-aware reviews to pinpoint critical visual deviations and ensure pixel-perfect UI standards are maintained.

Does UI screenshot design review require design tokens to assess color contrast?

UI screenshot design review aligns its assessments with design tokens and accessibility standards to evaluate color contrast, typography, and spacing. It ensures outputs meet structured design requirements and generates a report suitable for integration.

What is the best way to automate design critique for pixel-perfect UI standards?

The best way to automate design critique for pixel-perfect UI standards is providing a screenshot directory path. The tool delivers a structured design review report with evidence and actionable fixes, suitable for direct integration into your workflow.

When should I not use automated screenshot analysis for visual QA?

You should not use automated screenshot analysis for visual QA when you lack a screenshot directory or need interactive functional testing. The tool specifically assesses static visual properties like typography, color contrast, and layout against design guidelines.