skills.rest
VertaKhan
VertaKhanCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Identify and fix visual design issues across live sites or design systems.

Updated Apr 5, 2026
Search Tags:#typography#frontend#spacing#visual-qa#design-review#before-after
One-click install
npx skills add https://github.com/VertaKhan/cs_gstack --skill design-review-vertakhan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/VertaKhan/cs_gstack/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/VertaKhan/cs_gstack --skill design-review-vertakhan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual QA identifies and fixes visual inconsistencies, spacing issues, and hierarchy problems across interfaces, reducing rework and UX drag.

Core Features & Use Cases

  • Visual QA audits for alignment, typography, rhythm, and contrast across pages or components.
  • Atomic commits of fixes with before/after verification to keep design changes auditable.
  • Plan-mode support: run a design audit before implementation and propose concrete polish suggestions.

Quick Start

Run a design audit on the current project to get a prioritized list of fixes with before/after screenshots.

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 a live frontend site?▼

A visual QA audit identifies and fixes spacing, typography, alignment, and visual hierarchy issues across your live site. It applies fixes to the source, commits each change atomically, and verifies results with before/after screenshots.

What is design review plan-mode and when do I need it?▼

Design review plan-mode runs an audit before implementation to propose concrete polish suggestions. You need it to proactively catch visual inconsistencies and hierarchy problems, reducing rework and UX drag before committing interface changes.

Can I verify typography and spacing fixes with before and after screenshots?▼

Yes, you can verify typography and spacing fixes with before/after screenshots. The visual QA process captures evidence across multiple pages or components to demonstrate quality and keep design changes auditable.

Does this visual QA process support atomic commits for design system changes?▼

Yes, visual QA supports atomic commits for design system changes. It applies fixes directly to the source and commits each change individually, ensuring spacing and typography adjustments remain auditable and verifiable.

What is the best way to fix visual hierarchy and alignment issues across components?▼

The best way to fix visual hierarchy and alignment issues is running a visual QA audit that identifies inconsistencies and applies atomic source commits. It verifies fixes with before/after screenshots across multiple components.

Related Skills

Explore More Design & Creative Skills→
EhsaanArkEhsaanArk

design-review

Audit live site visual design and propose atomic fixes for typography, spacing, color, and hierarchy.

Community
Advanced
EmeaAppGbbEmeaAppGbb

web-design-reviewer

Inspect websites for responsive, accessibility, and visual issues and propose code fixes.

Official
Intermediate
wensiawensia
2

template-lint

Lint HTML/SVG poster templates with an 8-check workflow and generate remediation reports.

Community
Advanced
hffmnnjhffmnnj
39

visual-regression

Compare screenshots pixel-by-pixel to detect unintended UI changes.

Community
Intermediate