design-review

Solid

Review a web app or page for visual design quality — layout, typography, spacing, colour, hierarchy, consistency, interaction patterns, and responsive behaviour. Not a UX audit (that checks usability) — this checks whether it looks professional and polished. Produces a design findings report with screenshots. Triggers: 'design review', 'does this look good', 'review the design', 'check the layout', 'is this polished', 'visual review', 'design audit', 'make it look better', 'it looks off'.

Web & Frontend 813 stars 84 forks Updated 2 weeks ago MIT

Install

View on GitHub

Quality Score: 93/100

Stars 20%
97
Recency 20%
90
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Design Review Review a web app or page for visual design quality. This is not a UX audit (usability, workflow, friction) — this checks whether the design is **professional, consistent, and polished**. The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"? ## When to Use - Before showing something to a client or team - When something "looks off" but you can't pinpoint why - After building a feature, before calling it done - Periodic quality check on a shipped product - After a UX audit — this is the visual companion ## Browser Tool Detection Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli. ## URL Resolution Same as ux-audit — prefer deployed/live over localhost. ## What to Check ### 1. Layout and Spacing | Check | Good | Bad | |-------|------|-----| | **Consistent spacing** | Same gap between all cards in a grid, same padding in all sections | Some cards have 16px gap, others 24px. Header padding differs from body | | **Alignment** | Left edges of content align vertically across sections | Heading starts at one indent, body text at another, cards at a third | | **Breathing room** | Generous whitespace around content, elements don't feel cramped | Text touching container edges, buttons crowded against inputs | | **Grid discipline** | Content follows a clear column grid | Elements placed freely, no underlying structure | | **Responsive proportions** | Sidebar/content ratio l...

Details

Author
jezweb
Repository
jezweb/claude-skills
Created
7 months ago
Last Updated
2 weeks ago
Language
Python
License
MIT

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Solid

frontend-design-review

Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

2,429 Updated 2 days ago
microsoft
Web & Frontend Solid

ss-review

Review UI code for design system compliance, accessibility, and best practices

386 Updated today
bitjaru
Code & Development Listed

review-design

Use when reviewing frontend implementation against design specs - design system compliance, responsive behavior, accessibility audit

0 Updated today
badrusiddique
Web & Frontend Listed

ss-review

Review UI code for design system compliance, accessibility, and best practices

0 Updated today
ENDERMITA12
Web & Frontend Solid

web-design-reviewer

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.

34,233 Updated today
github