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.

jezweb/claude-skills|Updated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodex

Installation Guide

Select your AI agent

How to use design-review on Cursor

AI-first code editor with Composer

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

›Cursor installed and configured on your machine
›Node.js 16+ with npm — verify with node --version
›Active project directory where you want to add design-review

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/jezweb/claude-skills --skill design-review

Fetches design-review from jezweb/claude-skills and configures it for Cursor.

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?

│

│ ── Universal (.agents/skills) ────────────────

│ · Cline · Codex · Goose · Windsurf

│ ●Cursor(selected)

│ · Cursor · Aider · Continue

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/design-review

Restart Cursor to activate design-review. Access via /design-review in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub ›Skills CLI docs ›About Cursor ›What are agent skills?

Documentation

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

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 looks intentional at every width	Sidebar takes 50% on tablet, content is squeezed
Vertical rhythm	Consistent vertical spacing pattern (e.g. 8px/16px/24px/32px scale)	Random spacing: 13px here, 27px there, 8px somewhere else

Check	Good	Bad
Hierarchy	Clear visual difference between h1 → h2 → h3 → body	Headings and body text look the same size/weight
Line length	Body text 50-75 characters per line	Full-width text running 150+ characters — hard to read
Line height	Body text 1.5-1.7, headings 1.1-1.3	Cramped text or excessive line height
Font sizes	Consistent scale (e.g. 14/16/20/24/32)	Random sizes: 15px, 17px, 22px with no relationship
Weight usage	Regular for body, medium for labels, semibold for headings, bold sparingly	Everything bold, or everything regular with no hierarchy
Truncation	Long text truncates with ellipsis, title attribute shows full text	Text overflows container, wraps awkwardly, or is cut off without ellipsis

Check	Good	Bad
Semantic colour	Using design tokens (bg-primary, text-muted-foreground)	Raw Tailwind colours (bg-blue-500, text-gray-300)
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
Colour consistency	Same blue means the same thing everywhere (primary = action)	Blue means "clickable" in one place and "informational" in another
Dark mode	All elements visible, borders defined, no invisible text	Elements disappear, text becomes unreadable, images look wrong
Status colours	Green=success, yellow=warning, red=error consistently	Green used for both success and "active" with different meanings
Colour overuse	2-3 colours + neutrals	Rainbow of colours with no clear hierarchy

Check	Good	Bad
Primary action	One clear CTA per page, visually dominant	Three equally styled buttons competing for attention
Squint test	Squinting at the page, the most important element stands out	Everything is the same visual weight — nothing draws the eye
Progressive disclosure	Most important info visible, details available on interaction	Everything shown at once — overwhelming
Grouping	Related items are visually grouped (proximity, borders, backgrounds)	Related items scattered, unrelated items touching
Negative space	Intentional empty space that frames content	Empty space that looks accidental (uneven, trapped white space)

Check	Good	Bad
Button styles	One primary style, one secondary, one destructive — used consistently	5 different button styles across the app
Card styles	All cards have the same border-radius, shadow, padding	Some cards rounded, some sharp, some with shadows, some without
Form inputs	All inputs same height, same border style, same focus ring	Mix of heights, border styles, focus behaviours
Icon style	One icon family (Lucide, Heroicons), consistent size and stroke	Mixed icon families, different sizes, some filled some outlined
Border radius	Consistent radius scale (e.g. 4px inputs, 8px cards, 12px modals)	Random radius values: 3px, 7px, 10px, 16px
Shadow	One or two shadow levels used consistently	Every component has a different shadow depth

Check	Good	Bad
Hover states	Buttons, links, and clickable cards change on hover	No hover feedback — user unsure what's clickable
Focus states	Keyboard focus visible on all interactive elements	Focus ring missing or invisible against background
Active states	Nav items, tabs, sidebar links show current selection	Active item looks the same as inactive
Transitions	Subtle transitions on hover/focus (150-200ms ease)	No transitions (jarring) or slow transitions (laggy)
Loading indicators	Skeleton screens or spinners during async operations	Content pops in without warning, layout shifts
Disabled states	Disabled elements are visually muted, cursor changes	Disabled buttons look clickable, no cursor change

Check	Good	Bad
Mobile nav	Clean hamburger/sheet menu, easy to tap	Desktop nav squished into mobile, tiny tap targets
Image scaling	Images fill containers proportionally	Images stretched, cropped badly, or overflowing
Table responsiveness	Horizontal scroll on mobile, or stack to cards	Table wider than screen with no way to see columns
Touch targets	At least 44x44px on mobile	Tiny links, close buttons, checkboxes
Tablet	Layout works at 768px (not just desktop and phone)	Layout breaks at tablet widths, awkward gaps

Level	Meaning	Example
High	Looks broken or unprofessional	Invisible text in dark mode, buttons different heights inline
Medium	Looks unpolished	Inconsistent spacing, mixed icon styles, truncation without ellipsis
Low	Nitpick	1-2px alignment, slightly different border-radius, shadow too strong

design-review

Installation Guide

How to use design-review on Cursor

Prerequisites

Run the install command

Select Cursor when prompted

Verify installation

Security Notice

Documentation

List & Monetize Your Skill

Use Cases

Task Automation & Efficiency

Knowledge Enhancement

Quality Improvement

Install Skill

Design Review

When to Use

Browser Tool Detection

URL Resolution

What to Check

1. Layout and Spacing

2. Typography

3. Colour and Contrast

4. Visual Hierarchy

5. Component Consistency

6. Interaction Design

7. Responsive Quality

Severity Guide

Output

Tips

Implementation Guide

Best Practices

When to Use This

Learning Path

Related Skills

wordpress-elementor

frontend-design

high-end-visual-design

antigravity-design-expert

interior-design-expert

tui-design

Reviews

Discussion