skills.rest
SakshamKandel
SakshamKandelCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit web UI code and live sites for visual inconsistencies and deliver fixes.

Updated Apr 24, 2026
Search Tags:#design#ui#consistency#accessibility#qa#visual#design-review
One-click install
npx skills add https://github.com/SakshamKandel/Salt-Route-Consulting- --skill design-review-sakshamkandel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/SakshamKandel/Salt-Route-Consulting-/tree/main/.agents/skills/design-review
Command: npx skills add https://github.com/SakshamKandel/Salt-Route-Consulting- --skill design-review-sakshamkandel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual design QA identifies and fixes subtle inconsistencies that degrade user experience, such as spacing gaps, misaligned elements, and questionable hierarchy, ensuring a cohesive interface.

Core Features & Use Cases

  • Iterative visual QA: identify and fix spacing, alignment, typography, color contrast, and motion inconsistencies with atomic commits for traceability.
  • Design polish in code reviews: run quick audits on source/design files, propose concrete changes, and verify with before/after screenshots.
  • Plan-mode guidance: when needed, stage a plan-quality review with a plan-design-review flow before implementing changes, then apply fixes.
  • Automated verification: re-run checks and generate visual diffs to confirm improvements.

Quick Start

Audit a component or page for visual issues, apply fixes, and verify results 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 design QA audit on a web UI?▼

Visual design QA audits a web UI by identifying visual inconsistencies, spacing issues, and hierarchy problems, then delivering targeted fixes with before/after verification and atomic commits.

What is the best way to fix spacing and alignment inconsistencies in a live web application?▼

Fix spacing and alignment inconsistencies by running iterative visual QA to detect misaligned elements, apply concrete code changes, and verify improvements using automated visual diff screenshots.

Can I audit accessibility constraints and color contrast issues in source code?▼

Yes, you can audit source code and design files to identify accessibility constraints and color contrast issues, coordinating fixes with project styling rules to produce deterministic changes.

Does the design review process support plan-mode guidance before implementing UI fixes?▼

Plan-mode guidance stages a plan-quality review flow before implementing changes, ensuring visual fixes are strategized and verified against performance considerations before applying code updates.

How do visual diffs verify UI polish improvements during a code review?▼

Visual diffs verify UI polish by re-running automated checks after applying fixes, comparing before and after screenshots to confirm that spacing, typography, and motion inconsistencies are resolved.

What limitations exist when automating design consistency checks across live sites?▼

Automating design consistency checks requires coordinating with project styling rules to ensure deterministic changes; complex dynamic interactions may limit automated visual diff accuracy on live sites.

Related Skills

Explore More Design & Creative Skills→
truongnattruongnat

web-design-guidelines

Evaluate web UI source files against Web Interface Guidelines and accessibility requirements.

Community
Intermediate
kunalrawat425kunalrawat425

design-review

Audit visual design inconsistencies and fix them with atomic commits.

Community
Advanced
phananhtuan09phananhtuan09

frontend-design-fundamentals

Standardize UI visuals with responsive layouts, typography, spacing, and WCAG-compliant color contrast.

Community
Intermediate
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced