skills.rest
abdulazeezoj
abdulazeezojCOMMUNITY
Explore all skills by this author →
Website𝕏@abdulazeezojGitHub

design-review

Audits live web pages for visual inconsistencies and fixes design issues in source code.

Updated Sep 13, 2026
Search Tags:#screenshots#design review#spacing#ui audit#design polish#gstack#visual qa
One-click install
npx skills add https://github.com/abdulazeezoj/monovella-poc --skill design-review-abdulazeezoj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/abdulazeezoj/monovella-poc/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/abdulazeezoj/monovella-poc --skill design-review-abdulazeezoj

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Visual QA on a live site is slow and subjective: spacing drift, broken hierarchy, AI-generated slop patterns, and sluggish interactions slip through code review. This Skill gives a designer's-eye audit that finds those issues, then fixes them directly in source code with atomic commits and before/after screenshot verification. ## Core Features & Use Cases - Visual inconsistency detection: Finds spacing problems, hierarchy issues, and AI slop patterns across a running site. - Iterative fix loop: Fixes each issue in source, commits atomically, and re-verifies with before/after screenshots. - Interaction performance review: Flags slow interactions that degrade the feel of the page. - Use Case: After shipping a new landing page, ask for a design audit; the Skill screenshots the page, lists concrete issues with file and line references, and fixes them one commit at a time. ## Quick Start Ask the AI to run a design review on the current page and fix any visual issues it finds.

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 design audit on my website?▼

Invoke the design-review skill against the running site. It screenshots the page, identifies spacing, hierarchy, and consistency issues, then fixes each one in source code with an atomic commit and a before/after screenshot comparison.

What design issues does an automated design QA check catch?▼

It catches visual inconsistency, spacing and alignment drift, weak typographic hierarchy, AI slop patterns, and slow interactions. Each finding is tied to concrete files and lines rather than vague style opinions.

Can I use design review before writing any code?▼

No. This skill is for post-implementation review of a live page. For plan-mode design review before implementation, use the companion /plan-design-review skill instead.

How are design fixes verified after each change?▼

Every fix is committed atomically and re-verified with before/after screenshots of the affected page. This confirms the visual change landed as intended before moving to the next issue.

Does the design review skill work in headless or spawned sessions?▼

Yes. In spawned sessions it auto-chooses recommended options at decision points instead of prompting, and records each auto-chosen decision in its completion report. Destructive options always fall back to the conservative choice.

Related Skills

Explore More Design & Creative Skills→
Srajangpt1Srajangpt1

write-docs

Generate BrowserOS feature MDX docs from source code and screenshots.

Community
Intermediate
ByronWilliamsCPAByronWilliamsCPA

git

Generates conventional commit messages, PR descriptions, and validates branch naming for Git workflows.

Official
Advanced
coreyonecoreyone
1

a11y-debugging

Audit web pages for WCAG AA accessibility violations using Lighthouse and browser accessibility trees.

Community
Intermediate
GenEducationGenEducation

plan-design-review

Review design plans and identify missing UI decisions before implementation.

Official
Advanced