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

design-review

Audit live sites for visual design defects and apply atomic fixes.

Updated Mar 30, 2026
Search Tags:#typography#design-system#spacing#design-review#visual QA#before-after
One-click install
npx skills add https://github.com/agwacom/adeel --skill design-review-agwacom
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/agwacom/adeel/tree/main/skills/design-review
Command: npx skills add https://github.com/agwacom/adeel --skill design-review-agwacom

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

MANUAL TRIGGER ONLY: invoke only when user types /design-review. 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 /adeel: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: audit typography, spacing, hierarchy, color, and interaction patterns on live sites.
  • Atomic fixes: apply small, auditable changes and verify with before/after comparisons.
  • Plan-mode support: perform audits prior to implementation with a defined plan.

Quick Start

Run a design audit on the target site, identify visual issues, and apply atomic fixes with before/after verification.

Frequently Asked Questions about 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 my live website's design system?▼

Visual QA audits live sites by identifying typography, spacing, hierarchy, and interaction defects. It iteratively applies atomic fixes to source code and verifies each change with before/after screenshots to ensure polished interfaces.

Can I use this to fix spacing and typography issues in my source code?▼

Yes, it fixes spacing and typography issues directly in the source code. Each visual defect correction is committed atomically as a small, auditable change, followed by before/after verification to confirm the visual fix.

What is the best way to perform a design review before implementation?▼

The best way to perform a design review before implementation is using plan-mode support. This allows you to execute a design audit and define a structured plan prior to writing code, ensuring design system consistency before development begins.

Does this visual design review tool work with existing design systems at scale?▼

Yes, it works with existing design systems at scale by auditing visual consistency across live sites. It identifies hierarchy problems, slow interactions, and AI slop patterns, then iteratively fixes issues to help teams ship polished interfaces.

Why should I use atomic commits when fixing visual design defects?▼

Atomic commits ensure each visual design fix is small and auditable. By isolating corrections for typography, spacing, or interaction clarity, you can safely track modifications in source code and verify results with before/after comparisons.

Related Skills

Explore More Design & Creative Skills→
shihwesleyshihwesley

plan-design-review

Audit live sites for visual design issues and export DESIGN.md.

Community
Advanced
GenEducationGenEducation

design-review

Detect visual inconsistencies, spacing, hierarchy, and slow interactions in live web pages.

Official
Advanced
nsuberinsuberi

normalize

Audit and realign UI components, spacing, tokens, and accessibility to a design system.

Community
Advanced
imonmiimonmi

design-review

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

Community
Advanced