skills.rest
VanL
VanLCOMMUNITY
Explore all skills by this author →
Website𝕏@VanLGitHub

design-review

Detect visual inconsistencies and spacing issues in source code or designs.

1|Updated Jul 6, 2025
Search Tags:#UI design#visual QA#design polish#layout consistency#visual bugs
One-click install
npx skills add https://github.com/VanL/simplebroker --skill design-review-vanl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/VanL/simplebroker/tree/main/.agents/skills/gstack/design-review
Command: npx skills add https://github.com/VanL/simplebroker --skill design-review-vanl

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill helps designers and developers quickly identify visual inconsistencies and layout issues, streamlining the quality assurance process.

Core Features & Use Cases

  • Visual Inconsistency Detection: Finds spacing, hierarchy, and design slop issues across web pages or prototypes.
  • Iterative Source Fixing: Offers step-by-step fixes to source code, with before/after screenshots for validation.
  • Use Case: When a team wants to polish a website’s look before launch, they can run this Skill to catch layout bugs and suggest precise adjustments.

Quick Start

Use the design-review skill to analyze the main page of your project and generate a visual report for the last iteration.

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 to fix layout consistency and spacing issues?▼

Visual QA audits detect inconsistencies and spacing issues by analyzing source files and comparing screenshots to identify design hierarchy problems. This skill suggests step-by-step source code corrections and validates them using before and after screenshots.

What is the best way to catch visual bugs and design slop before a website launch?▼

Catching visual bugs before launch involves running automated visual inconsistency detection across web pages to find layout issues. The skill analyzes your project files to catch layout bugs and suggests precise adjustments for UI polish.

How do I automate finding visual inconsistencies in my frontend source code?▼

Automating visual inconsistency detection requires analyzing frontend source files to pinpoint spacing, hierarchy, and design slop issues. The skill supports iterative fixing by offering step-by-step source code adjustments with visual verification.

Can I use screenshot comparisons to validate iterative UI design fixes?▼

Screenshot comparisons validate iterative UI design fixes by providing before and after visual verification of source code corrections. The skill uses these comparisons to confirm that identified layout bugs and spacing issues have been resolved.

Does visual quality assurance for design polish work without external dependencies?▼

Visual quality assurance for design polish works without external dependencies, utilizing internal scripts and references to analyze source files. It requires source code and screenshot inputs to detect layout inconsistencies and suggest corrections.

Related Skills

Explore More Design & Creative Skills→
parisgroup-aiparisgroup-ai
1

design-critic

Analyze and auto-fix visual design issues in web applications.

Official
Advanced
Ikki-GroupIkki-Group

arrange

Assess and improve layout spacing and visual hierarchy in frontend UI designs.

Official
Advanced
parhummparhumm
25

frontend-component-fix

Diagnose frontend UI bugs and generate patch artifacts for React-like components.

Community
Advanced
williamzujkowskiwilliamzujkowski
17

e2e-testing

Automate end-to-end web app testing with Playwright or Cypress in CI/CD pipelines.

Community
Intermediate