skills.rest
tropeks
tropeksCOMMUNITY
Explore all skills by this author →
GitHub

design-review

Analyze live sites for visual inconsistencies and propose concrete fixes.

Updated Mar 26, 2026
Search Tags:#screenshots#frontend#audit#design-system#design-review#visual QA#diff-aware
One-click install
npx skills add https://github.com/tropeks/Vitali --skill design-review-tropeks
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/tropeks/Vitali/tree/main/.claude/skills/gstack-design-review
Command: npx skills add https://github.com/tropeks/Vitali --skill design-review-tropeks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designers and frontend engineers waste time chasing visual inconsistencies across live sites. This Skill spots layout spacing issues, typographic misalignment, and broken hierarchy so teams can fix them before users notice.

Core Features & Use Cases

  • Automated visual QA pass across pages and components to surface alignment and spacing problems.
  • Diff-aware audits that focus on changes in a feature branch and compare before/after visuals.
  • Plan-mode design review workflow: propose fixes, generate before/after screenshots, and verify improvements.

Quick Start

Provide a live URL and I will run a visual QA audit to surface gaps and propose fixes.

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?▼

Run a visual QA audit by providing a live URL to surface layout spacing issues, typographic misalignment, and broken hierarchy, which outputs concrete fixes and before/after screenshots.

What is diff-aware design review for frontend changes?▼

Diff-aware design review focuses audits specifically on changed areas in a feature branch, comparing before and after visuals to catch visual inconsistencies introduced by frontend updates.

Can I use this to enforce design system rules across live pages?▼

Yes, you can enforce design system rules across live pages and components to surface alignment and spacing problems, ensuring visual consistency before users notice.

What's the best way to automate finding visual inconsistencies across live sites?▼

Automate finding visual inconsistencies by running an automated visual QA pass across pages and components, which spots layout spacing issues and typographic misalignment to propose actionable fixes.

Does this design review workflow generate before and after screenshots?▼

Yes, the plan-mode design review workflow proposes fixes, generates before and after screenshots, and verifies improvements to ensure visual polish gaps are resolved.

When should I use automated visual QA instead of manual frontend inspection?▼

Use automated visual QA when designers and frontend engineers waste time chasing visual inconsistencies across live sites, needing to surface alignment and spacing problems efficiently before users notice.

Related Skills

Explore More Design & Creative Skills→
nicholaslocascionicholaslocascio
2

plan-design-review

Audit live site visual design and export a DESIGN.md baseline.

Community
Advanced
VertaKhanVertaKhan

design-review

Identify and fix visual design issues across live sites or design systems.

Community
Advanced
anilveersingh1308anilveersingh1308

review-pr

Review pull request diffs against a base branch for risk and impact.

Community
Intermediate
CANTAGESTUDIOCANTAGESTUDIO
3

aesthetic-form-composition

Analyze eye path, balance, rhythm, layering, and proportion to derive compositional rules.

Community
Intermediate