skills.rest
gonzalezpazmonica
gonzalezpazmonicaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/gonzalezpazmonica/pm-workspace --skill visual-quality
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
zinohomezinohome
1

visual-regression-tester

Capture and compare UI screenshots with Playwright and Chromatic.

Community
Advanced
henrycashe26henrycashe26

triage

Categorize and route GitHub issues through a defined state machine.

Community
Advanced
Ayushman-11Ayushman-11

ui-visual-validator

Validate UI modifications through visual regression testing and design system compliance.

Community
Advanced
CENKSSSCENKSSS

qe-visual-accessibility

Automate visual regression testing, responsive design validation, and WCAG 2.2 compliance audits.

Community
Advanced