skills.rest
TioSavich
TioSavichCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Audit live-site design for visual inconsistencies and generate remediation reports.

Updated Sep 10, 2024
Search Tags:#typography#accessibility#design-system#spacing#visual-qa#design-review#ui-polish
One-click install
npx skills add https://github.com/TioSavich/UMEDCTA --skill design-review-tiosavich
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/TioSavich/UMEDCTA/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/TioSavich/UMEDCTA --skill design-review-tiosavich

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual inconsistencies, misaligned spacing, and unclear typography slow down design polish and can erode user trust; this skill provides automated audits and actionable fixes to bring live sites in line with design intent.

Core Features & Use Cases

  • Automated visual QA passes that detect spacing, hierarchy, color, and typography issues against a design system or brand guidelines.
  • Iterative fix workflow: apply atomic changes, commit each fix, and re-verify with before/after comparisons.
  • Plan-design-review support: perform front-loaded audits before implementation to align stakeholders on visual direction.

Quick Start

Run a full site audit on the target pages and generate an actionable remediation report.

Frequently Asked Questions about design-review

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

FAQPage Schema
How do I run an automated visual QA pass to find spacing and typography issues on a live site?▼

Automated visual QA audits detect spacing, hierarchy, color, and typography issues against your design system. You can run a full-site or targeted page scope audit to generate an actionable remediation report with proposed atomic fixes.

What is a design review workflow that verifies UI polish with before and after evidence?▼

A design review workflow iteratively applies atomic changes, commits each fix, and re-verifies the results with before/after comparisons. This ensures visual inconsistencies are resolved and aligned with design intent before finalizing.

Can I perform front-loaded design audits to align stakeholders before implementation?▼

Yes, plan-design-review support performs front-loaded audits before implementation. This helps align stakeholders on the visual direction early by identifying potential design-system, spacing, and accessibility constraints.

Does automated design review check for accessibility and color consistency constraints?▼

Automated design review meets design-system, typography, color, spacing, accessibility, and consistency constraints. It evaluates your live site against these brand guidelines to ensure comprehensive visual compliance.

What's the best way to fix visual inconsistencies and misaligned spacing at scale?▼

The best way to fix visual inconsistencies at scale is automating comprehensive live-site design audits. This identifies misaligned spacing and unclear typography, proposing atomic fixes to restore user trust and design intent.

When do I need to generate an actionable design audit report for remediation guidance?▼

You need an actionable design audit report when visual inconsistencies erode user trust or slow down design polish. It provides remediation guidance and atomic fixes to bring live sites in line with brand guidelines.

Related Skills

Explore More Design & Creative Skills→
lucas-flatwhitelucas-flatwhite
43

design-review

Audit live sites for visual inconsistencies and implement fixes with before/after verification.

Community
Advanced
viraatdasviraatdas

qa

Simulate user interactions to test web apps and generate QA reports.

Community
Advanced
trungdo9trungdo9
3

ui-styling

Create React-based user interfaces with shadcn/ui components and Tailwind CSS.

Community
Advanced
robit-manrobit-man

regression-visual

Compare screenshots and analyze pixel differences across browsers and viewports.

Community
Advanced