visual-quality

Analyze UI screenshots against Figma exports for visual quality.

47|10|Updated Feb 22, 2026

Search Tags:#accessibility #UI/UX #design system #regression testing #layout analysis #visual quality

Ready to run

npx skills add https://github.com/gonzalezpazmonica/pm-workspace --skill visual-quality

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: visual-quality
Source: https://github.com/gonzalezpazmonica/pm-workspace/tree/main/.claude/skills/visual-quality
Command: npx skills add https://github.com/gonzalezpazmonica/pm-workspace --skill visual-quality

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill automates the rigorous analysis of visual elements in user interfaces, ensuring adherence to design specifications, accessibility standards, and overall aesthetic quality.

Core Features & Use Cases

Layout & Alignment Checks: Verifies grid alignment, element positioning, and container integrity.
Color & Typography Validation: Extracts color palettes, checks contrast ratios, and validates font consistency.
Accessibility Audits: Assesses contrast, touch target sizes, and focus indicator visibility against WCAG standards.
Use Case: Before releasing a new feature, use this Skill to automatically compare the staging environment's UI against the design mockups, flagging any deviations in layout, color, or typography.

Quick Start

Analyze the visual quality of the provided screenshot against the reference Figma export.

Frequently Asked Questions about visual-quality

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

FAQPage Schema

How do I automate visual regression testing against Figma design mockups?▼

Automate visual regression testing by comparing your staging UI screenshots against reference Figma exports to flag deviations in layout, color, or typography before release.

What is the best way to check WCAG accessibility contrast and touch target sizes?▼

Check WCAG accessibility standards by auditing UI contrast ratios, touch target sizes, and focus indicator visibility to ensure interfaces meet compliance requirements.

How do I verify UI layout alignment and spacing against design system specifications?▼

Verify UI layout alignment by analyzing grid positioning, container integrity, and spacing against your design system specifications using objective weighted scoring.

Can I use design adherence verification without setting up dependencies?▼

Yes, you can perform design adherence verification without external dependencies by directly comparing your UI screenshots against wireframes or previous build references.

How does visual quality analysis extract and validate color palettes and typography?▼

Visual quality analysis extracts color palettes, checks contrast ratios, and validates font consistency to ensure your interface strictly adheres to typographic and color guidelines.

What limitations exist when validating UI typography using reference wireframes?▼

When validating UI typography against wireframes, limitations include the inability to detect dynamic rendering issues or runtime font loading errors not captured in static reference formats.