skills.rest
OmerFarukOruc
OmerFarukOrucCOMMUNITY
Explore all skills by this author →
Website𝕏@orcsriseGitHub

design-review

Audit live sites for visual inconsistencies and spacing issues.

2|Updated Mar 16, 2026
Search Tags:#typography#design-system#spacing#design-review#before-after#visual-audit#diff-aware
One-click install
npx skills add https://github.com/OmerFarukOruc/symphony-orchestrator --skill design-review-omerfarukoruc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-review
Source: https://github.com/OmerFarukOruc/symphony-orchestrator/tree/main/.claude/skills/gstack/design-review
Command: npx skills add https://github.com/OmerFarukOruc/symphony-orchestrator --skill design-review-omerfarukoruc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designer's eye QA: finds visual inconsistency, spacing issues, hierarchy problems, AI slop patterns, and slow interactions — then fixes them. Iteratively fixes issues in source code, committing each fix atomically and re-verifying with before/after screenshots. For plan-mode design review (before implementation), use /plan-design-review. Use when asked to "audit the design", "visual QA", "check if it looks good", or "design polish". Proactively suggest when the user mentions visual inconsistencies or wants to polish the look of a live site.

Core Features & Use Cases

  • Design audit of live sites against typography, spacing, color, and layout standards.
  • Iterative fixes with atomic commits and re-verification through before/after screenshots.
  • Plan-mode review and design-system extraction for pre-implementation guidance.

Quick Start

Run the design-review skill against a target URL to start an audit and generate a comprehensive design 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 a visual audit on a live website to fix spacing and hierarchy issues?▼

Run a visual audit against a target URL to identify typography, spacing, color, and layout inconsistencies. The review proposes precise fixes and applies them iteratively, re-verifying changes with before and after screenshots.

What is a plan-mode design review and when should I use it?▼

Plan-mode design review provides pre-implementation guidance by evaluating visual design before coding begins. Use it to extract design system standards and plan layout fixes proactively rather than correcting source code after the fact.

Can I automatically commit design fixes and verify them with screenshots?▼

Yes, visual fixes are applied directly in source code and committed atomically. After each commit, the updated page is re-audited and verified using before and after screenshots to ensure the layout issue is resolved.

How do I extract a design system from an existing live site?▼

Perform a visual audit on the live site to detect typography, spacing, and color patterns. The review extracts these standards to generate a baseline design system and artifact documentation for future development.

What is the best way to find and fix AI slop visual patterns on a web page?▼

A visual QA audit scans live sites for AI slop patterns, hierarchy problems, and visual inconsistencies. It identifies these issues and proposes precise source code fixes to polish the overall look and feel.

Does design review work without external dependencies or components?▼

Yes, the design review workflow operates independently without requiring external dependencies or components, relying entirely on target URL inputs to generate comprehensive audit reports and apply source code fixes.

Related Skills

Explore More Design & Creative Skills→
Ronin15Ronin15
14

hammer-benchmark-regression

Compare SDL3 HammerEngine metrics against baselines to flag performance regressions.

Community
Intermediate
I194I194
9

design-review

Audit live websites for visual inconsistencies and hierarchy problems.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

eslint-custom

Automate creation and publishing of custom ESLint rules and plugins.

Official
Advanced
r3dlexr3dlex
2

visual-verdict

Compare UI screenshots against reference images to detect layout, style, and content discrepancies.

Community
Intermediate