skills.rest
mgher668
mgher668COMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live websites for visual inconsistencies and apply fixes with before/after verification.

Updated Apr 13, 2026
Search Tags:#typography#frontend#contrast#spacing#visual-qa#web-design#design-review
One-click install
npx skills add https://github.com/mgher668/surf-ai --skill design-review-mgher668
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/mgher668/surf-ai/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/mgher668/surf-ai --skill design-review-mgher668

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design quality often lags during development, leaving inconsistencies in spacing, typography, and hierarchy that degrade user experience. This skill provides a structured approach to identify and fix visual defects across a site or app, delivering consistently polished UI.

Core Features & Use Cases

  • Visual QA audits across pages to detect misalignment, typography mismatch, and spacing errors.
  • Systematic fixes in source code and design tokens, followed by before/after verification.
  • Use cases include polishing dashboards, marketing pages, and product UIs before release.

Quick Start

Start a design audit on the target URL, analyze typography, spacing, and hierarchy, apply fixes, then verify the improvements with before/after visuals.

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 to fix spacing and typography inconsistencies on my live website?▼

Run a visual QA audit on a target URL to detect misalignment, typography mismatch, and spacing errors. The skill analyzes live pages, enforces typography scales and spacing tokens, then proposes and applies fixes to source code and design tokens.

What is the best way to enforce accessible contrast and grid alignment across a web UI before release?▼

Enforce accessible contrast and grid alignment by auditing the live UI for hierarchy and visual defects. The skill applies targeted fixes across pages and components, validating improvements with snapshot comparisons and designer-approved checks.

Can I audit a focused set of product pages instead of running a full site visual design review?▼

Apply visual design reviews across a defined scope, whether a full site or focused pages. The skill audits targeted components for spacing and typography issues, applying fixes and verifying improvements with before/after visuals.

How do I verify UI improvements after applying design token fixes for spacing and typography?▼

Verify UI improvements using snapshot comparisons that generate before/after visuals. The skill enforces typography scales, spacing tokens, and grid alignment, ensuring applied fixes pass designer-approved checks and resolve visual inconsistencies.

Why does my web UI still look misaligned after development, and how do I polish the visual hierarchy?▼

Visual design quality lags during development when spacing, typography, and hierarchy degrade user experience. Polish the UI by auditing live pages for visual defects, applying systematic fixes to design tokens, and verifying results with before/after snapshots.

Related Skills

Explore More Design & Creative Skills→
curielmccurielmc

design-review

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

Community
Advanced
romiluz13romiluz13
161

ui-design

Design UI layouts with visual hierarchy, spacing, color, and state design.

Community
Basic
nsuberinsuberi

normalize

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

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced