skills.rest
JeremiahEllington
JeremiahEllingtonCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live sites for visual inconsistencies and fix them with atomic commits.

Updated Apr 6, 2026
Search Tags:#typography#accessibility#spacing#design-review#visual QA#ui-audit
One-click install
npx skills add https://github.com/JeremiahEllington/NoahEllington --skill design-review-jeremiahellington
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/JeremiahEllington/NoahEllington/tree/main/.claude/skills/design-review
Command: npx skills add https://github.com/JeremiahEllington/NoahEllington --skill design-review-jeremiahellington

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and front-end teams often suffer from subtle visual inconsistencies, spacing issues, broken hierarchy, AI slop patterns, and slow interactions. This skill provides a QA workflow to identify these problems, fix them in source code, and re-verify with before/after screenshots.

Core Features & Use Cases

  • Visual QA audits for alignment, typography, color contrast, spacing, and hierarchy
  • Iterative fixes with atomic commits and re-verification via before/after screenshots
  • Plan-mode design review for pre-implementation polish on new components or flows

Quick Start

Audit a live site for visual inconsistencies and hierarchy, then implement fixes with atomic commits and 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 run a visual QA audit on a live website to fix spacing and hierarchy issues?▼

A visual QA audit identifies alignment, typography, color contrast, spacing, and hierarchy problems on a live site, then implements iterative source code fixes with atomic commits and re-verifies results using before and after screenshots.

What is the best way to fix visual inconsistencies and UI alignment problems in front-end code?▼

Fixing visual inconsistencies requires a designer's QA approach to detect subtle spacing and hierarchy issues, apply iterative code fixes, and verify visual coherence and accessibility through before and after screenshot comparisons across components.

Can I plan a design review for new UI components before implementation?▼

Plan-mode design review enables pre-implementation polish for new components or flows, allowing you to identify potential visual hierarchy and accessibility tradeoffs before writing any source code.

How does visual QA handle accessibility and color contrast verification?▼

Visual QA evaluates color contrast and accessibility alongside typography and spacing, explaining design decisions and potential tradeoffs to maintain visual coherence and accessibility compliance across pages.

Do I need specific frameworks or dependencies to perform a UI audit on my site?▼

A UI audit requires no specific frameworks or dependencies, operating directly on a live site's source code to detect visual inconsistencies, apply fixes iteratively, and verify results through screenshot comparisons.

Why does my UI look visually broken after implementing new components, and how can I verify the fixes?▼

Broken UI often stems from subtle spacing, hierarchy, or AI slop patterns; a QA workflow identifies these issues, applies atomic code commits, and verifies fixes through before and after screenshots across affected pages.

Related Skills

Explore More Design & Creative Skills→
cogine-aicogine-ai
3

site-design-audit

Audit live-site design quality without modifying source code.

Official
Advanced
GenEducationGenEducation

design-review

Detect visual inconsistencies, spacing, hierarchy, and slow interactions in live web pages.

Official
Advanced
effiemincereffiemincer

bolder

Amplify visual elements in user interfaces with concrete typography, color, and spacing notes.

Community
Advanced
distribucionesfayosmoreno-sysdistribucionesfayosmoreno-sys

ui-visual-validator

Validate UI modifications for visual regression, compliance, and accessibility.

Community
Advanced