무료GitHub에 공개

design-review

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'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills

연동 도구Playwright

설치 방법 보기

포함된 파일(1)

SKILL.md8.4 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

2. Typography

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

3. Colour and Contrast

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

4. Visual 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)

5. Component Consistency

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

6. Interaction Design

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

7. Responsive Quality

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

Severity Guide

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

Output

Write findings to .jez/artifacts/design-review.md:

# Design Review: [App Name]
**Date**: YYYY-MM-DD
**URL**: [url]

## Overall Impression
[1-2 sentences — professional / unpolished / inconsistent / clean]

## Findings

### High
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Medium
- **[issue]** at [page/component] — [what's wrong] → [fix]

### Low
- **[issue]** — [description]

## What Looks Good
[Patterns that are well-executed and should be preserved]

## Top 3 Fixes
1. [highest visual impact change]
2. [second]
3. [third]

Take screenshots of findings where the issue is visual (most of them).

Tips

Check dark mode AND light mode — most issues appear in one but not the other
The squint test is the fastest way to find hierarchy problems
Component inconsistency is the most common issue in dev-built UIs
"Looks off" usually means spacing — check margins and padding first
If you can't identify the issue, compare to a well-designed app in the same category

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

ai-image-generator

무료

Generate AI images using Gemini or GPT APIs directly. Covers model selection (Gemini for scenes; GPT Image 2 for text rendering, batch variations, multi-reference compositing; GPT Image 1.5 for transparent icons), the 5-part prompting framework, API calling patterns, multi-turn editing, and quality assurance. Produces photorealistic scenes, icons, illustrations, OG images, posters, infographics, and product shots. Use when building websites that need images, creating marketing assets, or generating visual content. Triggers: 'generate image', 'ai image', 'create hero image', 'make an icon', 'generate illustration', 'create og image', 'poster', 'infographic', 'image variations', 'gpt-image-2', 'ai art', 'image generation'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

app-docs

무료

Generate complete user documentation for a web app with screenshots. Browses the app via browser automation, screenshots every screen, and produces a structured user guide with step-by-step instructions, annotated screenshots, workflow diagrams, and reference tables. Supports quick (key screens), standard (all pages), thorough (every state and flow), and exhaustive (publishable documentation suite). Triggers: 'document the app', 'user guide', 'app documentation', 'screenshot docs', 'generate user docs', 'help docs', 'how-to guide', 'write the docs'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

aussie-business-english

무료

Australian business English for professional writing — warm, direct, EN-AU spelling (colour, organise, centre), no filler words. Use whenever the user is writing for an Australian audience: emails, chat messages, proposals, client communications, blog posts, web copy, or any business writing. Apply to drafting, editing, and tone-checking professional text.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

award-application

무료

Write compelling award submissions, grant applications, and competition entries. Maps achievements to selection criteria using evidence-based narratives. Use whenever the user is applying for a business award (Telstra, chamber of commerce, industry awards), a grant, a competition, or any submission demonstrating merit against defined criteria.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

cloudflare-api

무료

Hit the Cloudflare REST API directly for operations that wrangler and MCP can't handle well. Bulk DNS, custom hostnames, email routing, cache purge, WAF rules, redirect rules, zone settings, Worker routes, D1 cross-database queries, R2 bulk operations, KV bulk read/write, Vectorize queries, Queues, and fleet-wide resource audits. Produces curl commands or scripts. Triggers: 'cloudflare api', 'bulk dns', 'custom hostname', 'email routing', 'cache purge', 'waf rule', 'd1 query', 'r2 bucket', 'kv bulk', 'vectorize query', 'audit resources', 'fleet operation'.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

cloudflare-worker-builder

무료

Scaffold and deploy Cloudflare Workers with Hono routing, Vite plugin, and Static Assets. Describe project, scaffold structure, configure bindings, deploy. Use whenever the user wants to create a Worker project, set up Hono on Cloudflare, configure D1 / R2 / KV / Queues bindings, or troubleshoot Worker export syntax, API route conflicts, HMR issues, or deployment failures.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

jezweb/claude-skills1.1천2026년 10월 9일 업데이트

jezweb의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

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

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/jezweb/claude-skills/tree/main/plugins/frontend/skills/design-review

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/design-review/, Codex는 ~/.agents/skills/design-review/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: jezweb/claude-skills
스타: 1,073
포크: 109
카테고리: 디자인
라이선스: MIT
원문 언어: 영어
최종 업데이트: 2026년 10월 9일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.