design-review

Name: design-review
Author: jezweb

1.1kinstalls96forks

How to install design-review?

jezweb/claude-skills/design-review

$npx -y skills add jezweb/claude-skills --skill design-review

Installs into the current project.

Summary

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 fin

Files · 1

View on GitHub

SKILL.md

1	# Design Review
2
3	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.
4
5	The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
6
7	## When to Use
8
9	- Before showing something to a client or team
10	- When something "looks off" but you can't pinpoint why
11	- After building a feature, before calling it done
12	- Periodic quality check on a shipped product
13	- After a UX audit — this is the visual companion
14
15	## Browser Tool Detection
16
17	Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
18
19	## URL Resolution
20
21	Same as ux-audit — prefer deployed/live over localhost.
22
23	## What to Check
24
25	### 1. Layout and Spacing
26
27	\| Check \| Good \| Bad \|
28	\|-------\|------\|-----\|
29	\| 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 \|
30	\| Alignment \| Left edges of content align vertically across sections \| Heading starts at one indent, body text at another, cards at a third \|
31	\| Breathing room \| Generous whitespace around content, elements don't feel cramped \| Text touching container edges, buttons crowded against inputs \|
32	\| Grid discipline \| Content follows a clear column grid \| Elements placed freely, no underlying structure \|
33	\| Responsive proportions \| Sidebar/content ratio looks intentional at every width \| Sidebar takes 50% on tablet, content is squeezed \|
34	\| Vertical rhythm \| Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale) \| Random spacing: 13px here, 27px there, 8px somewhere else \|
35
36	### 2. Typography
37
38	\| Check \| Good \| Bad \|
39	\|-------\|------\|-----\|
40	\| Hierarchy \| Clear visual difference between h1 → h2 → h3 → body \| Headings and body text look the same size/weight \|
41	\| Line length \| Body text 50-75 characters per line \| Full-width text running 150+ characters — hard to read \|
42	\| Line height \| Body text 1.5-1.7, headings 1.1-1.3 \| Cramped text or excessive line height \|
43	\| Font sizes \| Consistent scale (e.g. 14/16/20/24/32) \| Random sizes: 15px, 17px, 22px with no relationship \|
44	\| Weight usage \| Regular for body, medium for labels, semibold for headings, bold sparingly \| Everything bold, or everything regular with no hierarchy \|
45	\| Truncation \| Long text truncates with ellipsis, title attribute shows full text \| Text overflows container, wraps awkwardly, or is cut off without ellipsis \|
46
47	### 3. Colour and Contrast
48
49	\| Check \| Good \| Bad \|
50	\|-------\|------\|-----\|
51	\| Semantic colour \| Using design tokens (bg-primary, text-muted-foreground) \| Raw Tailwind colours (bg-blue-500, text-gray-300) \|
52	\| Contrast ratio \| Text meets WCAG AA (4.5:1 for body, 3:1 for large text) \| Light grey text on white, or dark text on dark backgrounds \|
53	\| Colour consistency \| Same blue means the same thing everywhere (primary = action) \| Blue means "clickable" in one place and "informational" in another \|
54	\| Dark mode \| All elements visible, borders defined, no invisible text \| Elements disappear, text becomes unreadable, images look wrong \|
55	\| Status colours \| Green=success, yellow=warning, red=error consistently \| Green used for both success and "active" with different meanings \|
56	\| Colour overuse \| 2-3 colours + neutrals \| Rainbow of colours with no clear hierarchy \|
57
58	### 4. Visual Hierarchy
59
60	\| Check \| Good \| Bad \|
61	\|-------\|------\|-----\|
62	\| Primary action \| One clear CTA per page, visually dominant \| Three equally styled buttons competing for attention \|
63	\| Squint test \| Squinting at the page, the most important element stands out \| Everything is the same visual weight — nothing draws the eye \|
64	\| Progressive disclosure \| Most important info visible, details available on interaction \| Everything shown at once — overwhelming \|
65	\| Grouping \| Related items are visually grouped (proximity, borders, backgrounds) \| Related items scattered, unrelated items touching \|
66	\| Negative space \| Intentional empty space that frames content \| Empty space that looks accidental (uneven, trapped white space) \|
67
68	### 5. Component Consistency
69
70	\| Check \| Good \| Bad \|
71	\|-------\|------\|-----\|
72	\| Button styles \| One primary style, one secondary, one destructive — used consistently \| 5 different button styles across the app

People who liked this also viewed

6 picks

Type

design-review

1.1kinstalls96forks

View on GitHub

How to install design-review?

jezweb/claude-skills/design-review

$npx -y skills add jezweb/claude-skills --skill design-review

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Design Review
2
3	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.
4
5	The goal: would a design-conscious person look at this and think "this is well made" or "this looks like a developer designed it"?
6
7	## When to Use
8
9	- Before showing something to a client or team
10	- When something "looks off" but you can't pinpoint why
11	- After building a feature, before calling it done
12	- Periodic quality check on a shipped product
13	- After a UX audit — this is the visual companion
14
15	## Browser Tool Detection
16
17	Same as ux-audit — Chrome MCP, Playwright MCP, or playwright-cli.
18
19	## URL Resolution
20
21	Same as ux-audit — prefer deployed/live over localhost.
22
23	## What to Check
24
25	### 1. Layout and Spacing
26
27	\| Check \| Good \| Bad \|
28	\|-------\|------\|-----\|
29	\| 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 \|
30	\| Alignment \| Left edges of content align vertically across sections \| Heading starts at one indent, body text at another, cards at a third \|
31	\| Breathing room \| Generous whitespace around content, elements don't feel cramped \| Text touching container edges, buttons crowded against inputs \|
32	\| Grid discipline \| Content follows a clear column grid \| Elements placed freely, no underlying structure \|
33	\| Responsive proportions \| Sidebar/content ratio looks intentional at every width \| Sidebar takes 50% on tablet, content is squeezed \|
34	\| Vertical rhythm \| Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale) \| Random spacing: 13px here, 27px there, 8px somewhere else \|
35
36	### 2. Typography
37
38	\| Check \| Good \| Bad \|
39	\|-------\|------\|-----\|
40	\| Hierarchy \| Clear visual difference between h1 → h2 → h3 → body \| Headings and body text look the same size/weight \|
41	\| Line length \| Body text 50-75 characters per line \| Full-width text running 150+ characters — hard to read \|
42	\| Line height \| Body text 1.5-1.7, headings 1.1-1.3 \| Cramped text or excessive line height \|
43	\| Font sizes \| Consistent scale (e.g. 14/16/20/24/32) \| Random sizes: 15px, 17px, 22px with no relationship \|
44	\| Weight usage \| Regular for body, medium for labels, semibold for headings, bold sparingly \| Everything bold, or everything regular with no hierarchy \|
45	\| Truncation \| Long text truncates with ellipsis, title attribute shows full text \| Text overflows container, wraps awkwardly, or is cut off without ellipsis \|
46
47	### 3. Colour and Contrast
48
49	\| Check \| Good \| Bad \|
50	\|-------\|------\|-----\|
51	\| Semantic colour \| Using design tokens (bg-primary, text-muted-foreground) \| Raw Tailwind colours (bg-blue-500, text-gray-300) \|
52	\| Contrast ratio \| Text meets WCAG AA (4.5:1 for body, 3:1 for large text) \| Light grey text on white, or dark text on dark backgrounds \|
53	\| Colour consistency \| Same blue means the same thing everywhere (primary = action) \| Blue means "clickable" in one place and "informational" in another \|
54	\| Dark mode \| All elements visible, borders defined, no invisible text \| Elements disappear, text becomes unreadable, images look wrong \|
55	\| Status colours \| Green=success, yellow=warning, red=error consistently \| Green used for both success and "active" with different meanings \|
56	\| Colour overuse \| 2-3 colours + neutrals \| Rainbow of colours with no clear hierarchy \|
57
58	### 4. Visual Hierarchy
59
60	\| Check \| Good \| Bad \|
61	\|-------\|------\|-----\|
62	\| Primary action \| One clear CTA per page, visually dominant \| Three equally styled buttons competing for attention \|
63	\| Squint test \| Squinting at the page, the most important element stands out \| Everything is the same visual weight — nothing draws the eye \|
64	\| Progressive disclosure \| Most important info visible, details available on interaction \| Everything shown at once — overwhelming \|
65	\| Grouping \| Related items are visually grouped (proximity, borders, backgrounds) \| Related items scattered, unrelated items touching \|
66	\| Negative space \| Intentional empty space that frames content \| Empty space that looks accidental (uneven, trapped white space) \|
67
68	### 5. Component Consistency
69
70	\| Check \| Good \| Bad \|
71	\|-------\|------\|-----\|
72	\| Button styles \| One primary style, one secondary, one destructive — used consistently \| 5 different button styles across the app

People who liked this also viewed

6 picks

Type