skills.rest
shihwesley
shihwesleyCOMMUNITY
Explore all skills by this author →
GitHub

qa-design-review

Audit live site typography, spacing, color, and interactive states across desktop and mobile.

Updated Mar 16, 2026
Search Tags:#design#responsive#design-system#design-audit#web-audit#visual qa
One-click install
npx skills add https://github.com/shihwesley/shihwesleys-harness --skill qa-design-review-shihwesley
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-design-review
Source: https://github.com/shihwesley/shihwesleys-harness/tree/main/skills/gstack/qa-design-review
Command: npx skills add https://github.com/shihwesley/shihwesleys-harness --skill qa-design-review-shihwesley

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Analyze live sites to identify visual inconsistencies, spacing issues, hierarchy problems, and AI slop patterns; propose concrete fixes and verify with before/after visuals.

Core Features & Use Cases

  • Perform an end-to-end design audit across pages reachable from a target URL, including a design-system extraction pass.
  • Generate a detailed report with visual findings, quick wins, and regression-ready baselines; supports responsive checks and diff-aware scopes.

Quick Start

Provide a target URL and scope, then run the skill to perform a full design audit and generate a report.

Frequently Asked Questions about qa-design-review

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

FAQPage Schema
How do I run a visual design audit on a live website?▼

A visual design audit analyzes live sites by checking typography, spacing, color, and interactive states across desktop and mobile views, generating a report with findings and quick wins.

What is a design-system extraction pass and when do I need it?▼

Design-system extraction identifies and catalogs visual patterns from live pages during a full audit, needed when standardizing inconsistencies across multiple pages to establish a unified baseline.

Can I audit responsive design issues across both desktop and mobile?▼

Yes, the visual QA process performs responsive checks across desktop and mobile views, identifying hierarchy problems and spacing issues specific to different viewport sizes during the page audit phase.

How do I fix visual inconsistencies and verify the changes?▼

You fix visual inconsistencies using the guided Fix Loop phase which proposes concrete fixes, verifying changes with before/after visuals and an optional regression-ready baseline.

Does the web audit work with feature branches and diff-aware scopes?▼

Yes, the web audit supports diff-aware workflows for feature branches, allowing you to scope visual QA to specific changes rather than scanning the entire site every time.

What's the best way to identify AI slop patterns in visual design?▼

The best way to identify AI slop patterns is through a structured First Impression phase within the design audit, which analyzes live sites to detect visual inconsistencies and hierarchy problems.

Related Skills

Explore More Design & Creative Skills→
mahou-labsmahou-labs
1

web-perf

Audit target URLs for Core Web Vitals and render-blocking resources.

Official
Advanced
yunseo-kimyunseo-kim
1

issue-analysis

Gather and analyze issue context, attachments, media, and effort estimates.

Community
Advanced
jpoutrinjpoutrin
14

design-system

Detect hard-coded values and generate design system component structures.

Community
Basic
carayacaraya
1

css-testing

Detect visual regressions and accessibility issues in CSS across browsers and viewports.

Community
Advanced