skills.rest
zhsks311
zhsks311COMMUNITY
Explore all skills by this author →
GitHub

ui-qa

Capture and analyze screenshots to validate visual and accessibility issues.

Updated Aug 27, 2026
Search Tags:#ui#accessibility#qa#browser-automation#visual-testing#multimodal-analysis
One-click install
npx skills add https://github.com/zhsks311/cc-orchestrator --skill ui-qa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-qa
Source: https://github.com/zhsks311/cc-orchestrator/tree/main/skills/ui-qa
Command: npx skills add https://github.com/zhsks311/cc-orchestrator --skill ui-qa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables automated visual QA for web UIs by combining browser automation with AI-driven screenshot analysis to identify visual and accessibility issues, reducing manual QA effort.

Core Features & Use Cases

  • Visual QA & Consistency: verify color, typography, spacing, and layout across pages and states.
  • Accessibility Checks: assess contrast, focus states, and touch targets for WCAG AA compliance.
  • Multimodal Analysis: leverage AI to interpret screenshots and provide actionable insights for frontend teams.

Quick Start

Use the UI QA skill to test a page by providing a full URL after the command, e.g.: /ui-qa http://localhost:3000 /ui-qa http://localhost:5173/dashboard If no URL is provided, the tool will attempt to auto-detect a dev server on common ports.

Frequently Asked Questions about ui-qa

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

FAQPage Schema
How do I automate visual UI QA for a React or Vue app?▼

Automate visual UI QA by capturing screenshots via browser automation and analyzing them with multimodal AI to validate visuals, accessibility, and responsive behavior across frontend frameworks like React, Vue, and Angular.

How do I check web accessibility and WCAG AA compliance automatically?▼

Automated accessibility checks assess contrast, focus states, and touch targets for WCAG AA compliance by capturing page screenshots and using multimodal AI to interpret visual elements and provide actionable frontend insights.

Do I need a specific browser extension to run automated visual testing?▼

Automated visual testing requires the Claude-in-Chrome extension, a CC Orchestrator MCP server, and a running dev server on common local ports to capture and analyze your web application UI.

Can I test UI layout and typography consistency without providing a URL?▼

UI layout and typography consistency can be tested without a URL by allowing the tool to auto-detect a running dev server on common ports, though providing a full localhost URL is recommended for targeted page validation.

What is the best way to verify responsive behavior and visual consistency across pages?▼

The best way to verify responsive behavior and visual consistency is using multimodal AI to analyze captured screenshots, identifying layout, spacing, and color deviations across various application pages and states.

Related Skills

Explore More Software Engineering Skills→
GraffiohGraffioh

web-browser

Automate Chrome browser interactions via the Chrome DevTools Protocol.

Community
Advanced
CES-LtdCES-Ltd
28

skill-visual-feedback

Analyze screenshot-based UI feedback to identify visual issues and plan fixes.

Official
Advanced
VCnoCVCnoC
117

gemini-frontend

Convert design drafts and UI screenshots into React, Vue, and Flutter components.

Community
Advanced
curiositechcuriositech
181

playwright-screenshot-inspector

Capture web page screenshots and analyze them with multimodal AI for visual regression testing.

Official
Advanced