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

design-review

Audits live websites for visual inconsistencies and fixes issues in source code with atomic commits.

Updated Apr 5, 2026
Search Tags:#screenshots#frontend#browser automation#design review#UI audit#atomic commits#visual QA
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? Live sites accumulate visual inconsistencies, spacing issues, hierarchy problems, and AI slop patterns that erode design quality. This Skill performs a designer's-eye QA audit of a live site, then iteratively fixes each issue in source code, committing every fix atomically and re-verifying with before/after screenshots. ## Core Features & Use Cases - Visual QA Audit: Reviews live pages for typography, spacing, visual hierarchy, and generic AI-generated-looking interface patterns. - Iterative Fix Loop: Fixes each issue in source code with its own atomic commit, then re-verifies visually with before/after screenshots. - Diff-Aware Mode: When run on a feature branch without a URL, automatically scopes the review to pages changed in the branch. - Use Case: Before shipping a feature branch, run the audit against your local dev server to catch misaligned layouts, inconsistent spacing, and slow interactions, then get each fix committed separately for clean review. ## Quick Start Ask the AI to audit the design of your local dev site 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 audit a website's design for visual inconsistencies?▼

Run the design review against a target URL or let it auto-detect your dev server. It reviews pages for typography, spacing, and hierarchy issues, then fixes each problem in source code with an atomic commit and verifies with before/after screenshots.

What is diff-aware design review on a feature branch?▼

When no URL is given and you are on a feature branch, the review automatically scopes itself to pages changed in your branch. This focuses the audit on the UI your changes actually touched instead of the whole site.

Does design review work with authenticated pages?▼

Yes. You can sign in as a user or import cookies for authenticated pages. In CDP mode, where the browser connects to your real browser session, cookie import steps are skipped because existing auth sessions are reused.

Why does design review require a clean git working tree?▼

Each design fix gets its own atomic commit, so uncommitted changes would mix with fix commits. If the tree is dirty, the skill stops and offers to commit your changes, stash them, or abort before starting.

When should I use plan-design-review instead of design-review?▼

Use plan-design-review before implementation, during plan mode, to catch UI/UX gaps in a proposed design. Use design-review after implementation to audit and fix a live, running site.

Related Skills

Explore More Design & Creative Skills→
andrewcodesitandrewcodesit

verify-ui

Verify local UI changes in a real browser by exercising flows and inspecting console and network errors.

Community
Intermediate
serhii-baksheievserhii-baksheiev

pr-ship

Runs pre-merge gate checks, reviewer fan-out, and DoD walk to return a SHIP or HOLD verdict.

Community
Advanced
atelier-fashionatelier-fashion
159

reflect

Audit recent code changes for correctness, conventions, architecture, and testing.

Official
Advanced
1toe1toe

shape

Run a structured discovery interview and produce a design brief.

Community
Advanced