avad-design-review

Name: avad-design-review
Availability: InStock
Author: agwacom

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

Updated Mar 18, 2026

Search Tags:#design-system #atomic-commits #design-review #visual QA #ui-polish #before-after-screenshots

Ready to run

npx skills add https://github.com/agwacom/avadbot --skill avad-design-review

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: avad-design-review
Source: https://github.com/agwacom/avadbot/tree/main/skills/avad-design-review
Command: npx skills add https://github.com/agwacom/avadbot --skill avad-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 plan-mode design review (before implementation), use /avad-plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish".

Core Features & Use Cases

Visual QA across live sites to detect layout and typography issues.
Iterative fixes with atomic commits and before/after verification screenshots.
Plan-mode design review workflow via /avad-plan-design-review.

Quick Start

Provide a design audit by specifying the target URL, scope, and depth in a live project.

Frequently Asked Questions about avad-design-review

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

FAQPage Schema

How do I run a visual QA audit on a live site to find UI design flaws?▼

Visual QA audits live-site visuals to detect layout, typography, and spacing inconsistencies. You provide a target URL, scope, and depth to identify design-system validation issues and AI slop patterns across pages and components.

What is the best way to fix visual inconsistency and spacing issues in source code?▼

Fixing visual inconsistency requires iteratively updating source code and committing each design fix atomically. The process ensures visual polish by re-verifying changes with before and after screenshots for reliable UI regression tracking.

Can I review UI design and hierarchy problems before implementation?▼

You can review UI hierarchy problems before implementation using a plan-mode design review workflow. This evaluates proposed visual design and interactions without modifying live source code directly.

Does design-system validation work for individual components and interactions?▼

Design-system validation works across pages, components, and interactions on a live site. It checks for visual inconsistencies and spacing issues, ensuring UI polish and consistent design patterns throughout the entire project.