skills.rest
nocnocgroup
nocnocgroupOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-review

Audit live websites for visual inconsistencies and produce commit-ready fixes.

Updated Mar 21, 2026
Search Tags:#typography#design audit#visual QA#before-after#live-site#interaction polish
One-click install
npx skills add https://github.com/nocnocgroup/gstack --skill design-review-nocnocgroup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/nocnocgroup/gstack/tree/main/design-review
Command: npx skills add https://github.com/nocnocgroup/gstack --skill design-review-nocnocgroup

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The design-review skill helps designers and frontend engineers perform rigorous live-site visual audits, identifying visual inconsistencies, spacing issues, typographic problems, and slow interactions, and applying fixes with atomic commits and before/after verification.

Core Features & Use Cases

  • End-to-end visual QA: audit live sites, surface layout and typography problems, and propose concrete, implementable fixes.
  • Plan-mode design review: provide guidance before implementation to ensure design intent is preserved.
  • Before/after verification: capture screenshots, compare states, and verify improvements.

Quick Start

Navigate to the target URL and begin a structured visual audit, then implement fixes and re-verify with before/after captures.

Frequently Asked Questions about design-review

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I perform a visual QA audit on a live website?▼

Visual QA on a live site involves navigating to the target URL to audit layout, typography, and interaction polish, then proposing concrete fixes. You can run full-site audits or focus on specific pages using a structured plan-design-review workflow.

Can I verify visual fixes with before and after screenshots on live pages?▼

Yes, before/after verification captures screenshots to compare states and verify improvements on live pages. This ensures that applied spacing, typography, and interaction fixes actually resolve the identified visual issues.

What is the best way to fix spacing and typography inconsistencies in a live site?▼

The best way is to audit live sites to surface spacing and typography problems, then apply fixes with atomic commits. This Skill produces actionable fixes that can be committed directly to source control with optional references to support the corrections.

Do I need a design system to audit visual inconsistencies on live pages?▼

A design system is not strictly required, but the audit includes design-system alignment checks to ensure consistency. Providing optional references and assets helps generate more accurate, implementable fixes for the identified visual problems.

Can visual design audit fixes be committed directly to source control?▼

Yes, the design review produces actionable fixes that can be committed to source control with atomic commits. This allows frontend engineers to implement visual polish corrections and verify them with before/after captures seamlessly.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

extract-design

Extract design tokens from live websites using Dembrandt.

Community
Advanced
kk20300113-pngkk20300113-png

design-review

Detect and fix visual design inconsistencies in web interfaces with atomic commits.

Community
Advanced
magic3007magic3007
10

frontend-design

Translate frontend requirements into production-ready UI with code samples.

Community
Advanced
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate