skills.rest
dylanfeltus
dylanfeltusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

visual-qa

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

178|10|Updated Feb 5, 2026
Search Tags:#qa#ui-testing#visual#design-review#screenshot-analysis#vision-models
One-click install
npx skills add https://github.com/dylanfeltus/skills --skill visual-qa-dylanfeltus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-qa
Source: https://github.com/dylanfeltus/skills/tree/main/visual-qa
Command: npx skills add https://github.com/dylanfeltus/skills --skill visual-qa-dylanfeltus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Self-review of UI designs using vision models to catch layout, typography, color, responsive, and accessibility gaps before shipping.

Core Features & Use Cases

  • Seven priority review categories: layout, typography, color, hierarchy, components, polish, and responsive
  • Structured output formats for full reviews, quick reviews, and mockup comparisons
  • Vision model prompts tuned for different review types
  • Build workflow integration for design QA in development pipelines
  • Use cases include reviewing a page, comparing to a mockup, and checking mobile responsiveness

Quick Start

Review this UI screenshot for design quality using a vision-model QA prompt.

Frequently Asked Questions about visual-qa

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

FAQPage Schema
How do I automate visual QA for UI screenshots?▼

Automate visual QA by applying vision-model prompts to UI screenshots to assess design conformance across layout, typography, color, and responsive categories.

Can I use vision models to compare a UI mockup against a live page?▼

Yes, vision models compare UI mockups against live pages using structured output formats specifically tuned for mockup comparisons to identify design gaps.

What UI design issues can screenshot analysis catch before shipping?▼

Screenshot analysis catches layout, typography, color, hierarchy, component, polish, and responsive gaps across seven priority review categories before shipping.

Do I need vision-capable models to run automated design reviews?▼

Yes, automated design reviews require access to vision-capable models and screenshot capture tools, with prompts and structured outputs configured in the SKILL.md.

How do I integrate UI testing into a development pipeline?▼

Integrate UI testing into development pipelines using build workflow integration to automate design QA tasks like page reviews and mobile responsiveness checks.

What is the best way to check mobile responsiveness in a mockup?▼

Check mobile responsiveness by running screenshot analysis through vision-model QA prompts tuned for responsive layout reviews and structured output formats.

Related Skills

Explore More Design & Creative Skills→
rafael-faerafael-fae
5

gemini-vision-analysis

Extract UI state, labels, controls, and layout details from screenshots.

Community
Advanced
DmitrL-devDmitrL-dev
107

QA Fix Loop

Coordinate Reviewer and Fixer agents to detect issues, apply fixes, and re-review.

Community
Advanced
mintuzmintuz
21

eyes

Capture UI screenshots and compare states using Playwright MCP tools.

Community
Basic
jlawsjlaws
2

agent-frontend-engineer

Design accessible, responsive UI components for frontend frameworks like React, Next.js, and Vue.

Community
Advanced