skills.rest
MFS-code
MFS-codeCOMMUNITY
Explore all skills by this author →
Website𝕏@miguelfsernaGitHub

design-review

Audit live web pages for visual design issues and verify fixes with screenshots.

8|2|Updated Mar 24, 2026
Search Tags:#typography#responsive design#ui/ux#design audit#visual QA#screenshot verification#spacing hierarchy
One-click install
npx skills add https://github.com/MFS-code/gstack --skill design-review-mfs-code
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/MFS-code/gstack/tree/main/design-review
Command: npx skills add https://github.com/MFS-code/gstack --skill design-review-mfs-code

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you catch and correct UI/UX problems in a live design—things like inconsistent spacing, weak visual hierarchy, and AI-looking “slop”—then verifies fixes with before/after screenshots.

Core Features & Use Cases

  • Design audit with strict visual standards: Scans pages for hierarchy, typography, color/contrast, spacing rhythm, interaction states, and responsive behavior.
  • Fix-and-verify loop: Makes targeted code edits, commits them atomically, and re-verifies with screenshots to ensure the changes actually improved the UI.
  • Manual trigger for intentional use: Runs only when you explicitly ask (e.g., “audit the design” or “design polish”), and supports a plan-stage workflow via /plan-design-review.

Quick Start

Invoke design-review by typing /design-review and telling it the URL (or confirming it should use diff-aware mode on your feature branch) and the scope (full site or specific pages).

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 web pages?▼

Run a visual QA audit by triggering the review tool with a specific URL or feature branch diff to scan live web pages for hierarchy, typography, spacing, and responsive design issues. It then applies targeted code fixes and re-verifies the UI with screenshots.

What does a design audit check for in a web application?▼

A design audit checks live web pages for visual hierarchy, typography consistency, color contrast, spacing rhythm, interaction states, and responsive behavior to identify and correct UI inconsistencies and visual slop.

Can I automatically fix UI inconsistencies and verify the changes?▼

Yes, you can automatically fix UI inconsistencies through a fix-and-verify loop that makes targeted code edits, commits them atomically, and re-verifies the applied changes with before and after screenshots to ensure actual UI improvement.

How do I review UI changes on a feature branch before merging?▼

Review UI changes on a feature branch by using diff-aware mode during the design audit, which checks a clean repo tree and scans only the routes affected by your recent code diffs for visual polish and interaction state issues.

Does the design review tool run automatically in the background?▼

No, the design review tool requires explicit manual triggering to run and supports a proactive-suggestion opt-out behavior, ensuring it only executes when you intentionally request a visual QA or design polish workflow.

Related Skills

Explore More Design & Creative Skills→
ibalasiteibalasite

qa

Run automated and interactive QA sessions to test, fix, and re-verify web applications.

Community
Advanced
Mesh-LLMMesh-LLM
3.1k

metrics-server

Ingest OTLP telemetry into DuckDB and export benchmark reports via HTTP API.

Official
Intermediate
taewook486taewook486

moai-domain-uiux

Guide UI/UX design systems with W3C DTCG 2025.10 tokens and WCAG 2.2 compliance.

Community
Advanced
zhifengzhang-szzhifengzhang-sz

design-review

Audit UI designs for typography, spacing, hierarchy, and interaction latency issues.

Community
Advanced