skills.rest
apeejay-education
apeejay-educationOFFICIAL
Explore all skills by this author →
GitHub

design-review

Audit UI designs for visual inconsistencies and spacing issues.

1|Updated Mar 26, 2026
Search Tags:#design#ui#screenshots#frontend#audit#polish#visualqa
One-click install
npx skills add https://github.com/apeejay-education/cadencesprout --skill design-review-apeejay-education
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/apeejay-education/cadencesprout/tree/main/.agents/skills/gstack-design-review
Command: npx skills add https://github.com/apeejay-education/cadencesprout --skill design-review-apeejay-education

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistencies, spacing issues, and slow interactions across UI surfaces slow design reviews and reduce perceived quality. This skill provides a designer's eye QA to identify these problems and guide concrete fixes in source assets and code.

Core Features & Use Cases

  • Visual QA pass across designs and implemented UI
  • Hierarchy, spacing, contrast, and typography audits with actionable fixes
  • Plan-mode design review for pre-implementation polish and team alignment

Quick Start

Review the current UI, identify at least three visual issues, and deliver before/after screenshots with concise recommendations.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I audit UI designs for visual inconsistencies and spacing issues?▼

Run a visual QA pass on live web and mobile UI to identify spacing, hierarchy, contrast, and typography issues, then apply concrete fixes directly in source code and assets.

What is a design QA pass and when do I need it for frontend projects?▼

A design QA pass is a visual review of implemented frontend UI to catch inconsistencies before release. You need it when UI surfaces show spacing problems, poor contrast, or slow interactions that reduce perceived quality.

How do I fix visual hierarchy and typography issues in frontend code?▼

Fix visual hierarchy and typography issues in frontend code by identifying the problems during a UI audit, then updating source assets and code with actionable recommendations and verifying changes with before and after screenshots.

Can I use plan-mode design review for pre-implementation UI polish?▼

Yes, you can use plan-mode design review for pre-implementation UI polish to align teams and identify visual issues early. It guides atomic commits, captures before and after screenshots, and performs re-verification steps.

Does automated UI screenshot verification work for web and mobile projects?▼

Automated UI screenshot verification works for both web and mobile projects by capturing before and after states during visual QA. This verifies that code and asset fixes successfully resolve the identified spacing and interaction issues.

Related Skills

Explore More Design & Creative Skills→
krzemienskikrzemienski
1

ui-experience-audit

Audit UI screens across web and mobile for visual, interaction, and content issues.

Community
Advanced
ekrishguptaekrishgupta
1

design-review

Audit live sites for visual consistency and fix issues with atomic commits.

Community
Advanced
VirtoCommerceVirtoCommerce
2

qa-storybook

Detect visual and behavioral regressions in Storybook components through structured QA testing.

Official
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced