skills.rest
g4rcez
g4rcezCOMMUNITY
Explore all skills by this author →
Website𝕏@garcez_allanGitHub

qa-design-review

Identify visual inconsistencies and fix them with atomic commits and before/after evidence.

48|2|Updated Dec 23, 2017
Search Tags:#screenshots#usability#design-system#design-review#visual qa#iterative-fix
One-click install
npx skills add https://github.com/g4rcez/dotfiles --skill qa-design-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: qa-design-review
Source: https://github.com/g4rcez/dotfiles/tree/main/.ai/skills/qa-design-review
Command: npx skills add https://github.com/g4rcez/dotfiles --skill qa-design-review

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For report-only mode, use /plan-design-review instead.

Core Features & Use Cases

  • Live-site visual QA to identify layout, typography, and interaction inconsistencies
  • Atomic commits for each fix with before/after evidence
  • Plan/design-review support via the /plan-design-review workflow for non-implementation reviews

Quick Start

Run qa-design-review on the target site and follow prompts to generate a before/after visual audit.

Frequently Asked Questions about qa-design-review

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

FAQPage Schema
How do I fix visual inconsistencies and spacing issues on my live website?▼

A visual QA design review identifies visual inconsistencies, spacing issues, and hierarchy problems on live sites, then fixes them in source code with atomic commits and before/after screenshots for iterative verification.

What is the best way to automate design reviews for layout and typography flaws?▼

Automated design reviews detect typography and layout inconsistencies on live sites, aligning outputs against design-system guidelines. The process commits fixes atomically and produces a shareable, reproducible audit report with visual evidence.

Can I get a design review report without modifying my source code?▼

Yes, for report-only mode without source code modifications, use the /plan-design-review workflow. It provides non-implementation design reviews, whereas the standard visual QA process applies iterative fixes directly to the codebase with atomic commits.

How do I verify that visual fixes actually improve usability across multiple pages?▼

Iterative verification confirms usability improvements by re-checking fixes across multiple pages and interactions using before/after screenshots. This ensures visual hierarchy and spacing issues are fully resolved and align with design-system guidelines.

Does visual QA help remove AI slop patterns from my web design?▼

Visual QA design reviews specifically identify AI slop patterns alongside visual inconsistencies and slow interactions on live sites. The tool fixes these flaws in source code and generates before/after evidence to confirm the patterns are removed.

Related Skills

Explore More Design & Creative Skills→
agwacomagwacom

avad-design-review

Audits live-site visuals and fixes design inconsistencies with atomic commits.

Official
Advanced
ekrishguptaekrishgupta
1

design-review

Audit live sites for visual consistency and fix issues with atomic commits.

Community
Advanced
getcrew44getcrew44
358

visual-system-review

Evaluate UI screens for visual consistency, hierarchy, and design-system token adherence.

Official
Basic
anilveersingh1308anilveersingh1308

gstack-design-review

Audit live UI design and apply source code fixes with screenshot verification.

Community
Advanced