skills.rest
agwacom
agwacomOFFICIAL
Explore all skills by this author →
GitHub

avad-design-review

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
One-click install
npx skills add https://github.com/agwacom/avadbot --skill avad-design-review
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
curielmccurielmc

design-review

Audit live UI for visual consistency, spacing, hierarchy, and interaction latency.

Community
Advanced
sajalsuhanesajalsuhane

design-review

Audit UI designs for visual inconsistencies and apply atomic fixes with before/after verification.

Community
Advanced
Kushal9889Kushal9889

design-review

Identify and fix design issues in source code.

Community
Advanced
anilveersingh1308anilveersingh1308

gstack-design-review

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

Community
Advanced