design-review

Audit codebases and UI assets for visual inconsistencies and spacing issues.

Updated Mar 27, 2026
One-click install
npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill design-review-alejandrofigini
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/AlejandroFigini/artist-portfolio/tree/main/.agent/skills/design-review
Command: npx skills add https://github.com/AlejandroFigini/artist-portfolio --skill design-review-alejandrofigini

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Visual consistency, spacing, and hierarchy quality are critical for usable designs, yet drift happens during development. This skill detects and fixes these issues, improving UI polish.

Core Features & Use Cases

  • Automated visual QA across components and layouts
  • Atomic fixes with commit-friendly changes and before/after verification
  • Design-system alignment checks and responsive layout sanity

Quick Start

Ask me to run a design-review on the current project to detect visual issues and propose fixes 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 an automated visual QA audit on my frontend codebase?

To run a visual QA audit, the design-review skill scans your codebase and UI assets to detect visual inconsistencies, spacing issues, and hierarchy problems across breakpoints. It enforces an end-to-end workflow with plan-mode checks before proposing fixes.

Can I automatically fix UI spacing and typography inconsistencies in a design system?

Yes, you can fix UI spacing and typography inconsistencies in a design system by applying atomic fixes generated by the skill. It provides commit-friendly changes and surfaces before/after screenshots to verify layout and typography quality.

What is the best way to verify responsive layout quality across different breakpoints?

The best way to verify responsive layout quality is to audit frontend projects and component libraries for visual drift. The skill detects spacing and hierarchy issues across breakpoints, then provides before/after screenshots for direct visual verification.

Does the visual UI audit workflow support atomic commits for layout fixes?

Yes, the visual UI audit workflow supports atomic commits by generating isolated, commit-friendly changes for detected layout and typography issues. This ensures that design-system alignment checks and fixes are tracked cleanly in version control.

When do I need an automated design review for my component library?

You need an automated design review for your component library when layout and typography quality must be verified across multiple breakpoints. It detects slow interactions and visual drift that occurs during development, ensuring UI polish.

How does a visual QA tool handle design-system alignment checks?

A visual QA tool handles design-system alignment checks by auditing UI assets against expected spacing and hierarchy rules, detecting visual inconsistencies. It then applies atomic fixes and provides before/after screenshots to confirm compliance.