skills.rest
TumeloRamaphosa
TumeloRamaphosaCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit UI layout, spacing, and hierarchy, then apply code fixes with screenshot verification.

Updated May 7, 2026
Search Tags:#frontend#design review#spacing#hierarchy#ui polish#visual qa#screenshot verification
One-click install
npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill design-review-tumeloramaphosa
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/TumeloRamaphosa/StudEx-Valley-OS/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/TumeloRamaphosa/StudEx-Valley-OS --skill design-review-tumeloramaphosa

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistency and UI rough edges make a product feel unfinished even when it works. This Skill finds spacing, hierarchy, and visual polish issues, then applies fixes directly in the source code and re-checks results with before and after screenshots.

Core Features & Use Cases

  • Visual QA for UI polish: Detects layout and design slop patterns like spacing drift, weak hierarchy, and interaction sluggishness, then corrects them.
  • Iterative fixes with verification: Applies changes atomically, and re-verifies each fix using before and after screenshot evidence to avoid regressions.
  • Plan-mode design review: Uses a plan-oriented workflow for design review before implementation, helping you decide what to build with lower churn.

Quick Start

Use the design-review skill when you want to audit the look of a live UI and confirm it is consistent, aligned, and responsive.

Frequently Asked Questions about design-review

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

FAQPage Schema
What is visual design QA and how does it fix UI spacing issues?▼

Visual design QA audits UI layout, spacing, hierarchy, and interaction polish to detect visual inconsistency. It corrects these issues by applying source code fixes directly and re-verifying results using before and after screenshots to prevent regressions.

How do I run a UI polish check on an existing frontend page?▼

To run UI polish checks on an existing page, use a guided workflow that detects layout slop patterns like spacing drift and weak hierarchy. It applies atomic code fixes to the repository and produces before and after screenshot evidence for verification.

Can I use a plan-mode design review before starting frontend implementation?▼

Yes, plan-mode design review checks UI layout and visual consistency before implementation. This plan-oriented workflow helps you decide what to build with lower churn by auditing spacing and hierarchy constraints safely before writing code.

Does visual design QA require deterministic tooling access to the repository?▼

Yes, visual design QA requires deterministic tooling access for reading and writing repository code changes. This access enables the workflow to apply source code fixes atomically and follow plan-mode safety constraints during screenshot verification.

What is the best way to verify visual consistency fixes without introducing regressions?▼

The best way to verify visual consistency fixes is by capturing before and after screenshots. This screenshot verification process re-checks each atomic code change applied to the UI layout, ensuring spacing and hierarchy corrections do not introduce visual regressions.

Why does my live site look unfinished even when the frontend functionality works?▼

A live site looks unfinished when visual inconsistency and UI rough edges exist, such as spacing drift, weak hierarchy, and interaction sluggishness. Visual design QA identifies these layout slop patterns and applies code fixes to polish the interface.

Related Skills

Explore More Design & Creative Skills→
Ronin15Ronin15
14

hammer-benchmark-regression

Compare SDL3 HammerEngine metrics against baselines to flag performance regressions.

Community
Intermediate
cwilliams5cwilliams5
1

review-professionalism

Review AutoHotkey application polish, text quality, and native Windows behavior.

Community
Advanced
neuron-oneneuron-one
25

browser-testing

Automate browser UI verification and visual regression checks across viewports.

Community
Intermediate
abretonc7sabretonc7s

visual-testing

Capture screenshots before and after UI interactions to detect visual regressions.

Community
Intermediate