skills.rest
kinetas
kinetasCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live UI and design systems for visual inconsistencies and spacing issues.

Updated Mar 11, 2026
Search Tags:#typography#design-system#spacing#visual-qa#design-review#ui-polish
One-click install
npx skills add https://github.com/kinetas/ai_coding_web --skill design-review-kinetas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/kinetas/ai_coding_web/tree/main/gstack/design-review
Command: npx skills add https://github.com/kinetas/ai_coding_web --skill design-review-kinetas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps designers and front-end engineers catch visual inconsistencies, spacing issues, typographic rhythm problems, and slow interactions that reduce perceived quality. It provides an end-to-end workflow to audit a live site or design system, propose fixes, and verify improvements with before/after screenshots, then commit each fix atomically and re-check.

Core Features & Use Cases

  • Visual QA audit: identify spacing, typography, rhythm, and visual inconsistencies across pages.
  • Iterative fixes: implement atomic changes in source, commit each fix, and re-verify with before/after screenshots.
  • Plan-mode design review: perform audits before implementation and align on design polish milestones.

Quick Start

Scan a live site for visual issues, propose fixes, and commit them atomically with before/after verification.

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 UI?▼

Visual QA audits identify spacing inconsistencies, typographic rhythm problems, and slow interactions on live UI. This requires access to source CSS and HTML to apply fixes, commit changes atomically, and verify improvements using before and after screenshots.

What is the best way to fix visual inconsistencies in a design system?▼

Fixing visual inconsistencies requires auditing live UI to detect spacing and typographic rhythm problems. You implement atomic changes in the source code, commit each fix individually, and re-verify the visual polish with before and after evidence.

Can I use a plan-mode review for UI polish before implementation?▼

Plan-mode design reviews perform visual audits before implementation to align on design polish milestones. This approach identifies AI slop patterns and visual inconsistencies early, ensuring spacing and typographic rhythm issues are resolved before shipping.

How do I verify typographic rhythm and spacing fixes after committing?▼

Verifying typographic rhythm and spacing fixes requires taking before and after screenshots after each atomic commit. This visual QA process ensures the source CSS and HTML changes successfully resolve the identified UI inconsistencies and interaction delays.

Does visual QA require access to source CSS and HTML?▼

Yes, visual QA requires access to source CSS and HTML to implement fixes for spacing and typographic issues. This access allows you to commit each visual improvement atomically and re-verify the live UI with before and after evidence.

Related Skills

Explore More Design & Creative Skills→
stayconnectquickstayconnectquick

design-review

Audits UI spacing, typography and interaction inconsistencies in live sites and commits atomic fixes with before/after screenshots.

Community
Advanced
howdeployhowdeploy
15

design-review

Audit UI for visual inconsistencies, spacing issues, and typographic hierarchy.

Community
Advanced
lucaspedrozaemlucaspedrozaem
1

design-system

Define design tokens, components, and governance for SaaS front-end stacks.

Community
Advanced
apeejay-educationapeejay-education

design-review

Audit UI designs for visual inconsistencies and spacing issues.

Official
Advanced