← ClaudeAtlas

design-reviewlisted

Use when a built interface needs a structured visual, interaction, responsive, accessibility, or theme critique against its design brief.
DanielNoamTuby/claude-skills · ★ 0 · Web & Frontend · score 62
Install: claude install-skill DanielNoamTuby/claude-skills
# Design Review Review what was built against the brief and chosen aesthetic direction. Code inspection alone is insufficient for visual claims. ## Process 1. Read `.design/<feature-slug>/DESIGN_BRIEF.md`. Ask which feature if several briefs exist. 2. Inspect every modified component, page, and style file. Check reuse, token usage, naming, and duplication. 3. Run the application and capture representative screenshots. Cover supported viewport sizes, dark mode, and meaningful interactive states such as focus, loading, empty, error, success, disabled, and open overlays. If browser automation is unavailable, request captures rather than pretending to have performed a visual review. 4. Analyze each screenshot for hierarchy, spacing, color, typography, overflow, layering, responsive reorganization, and visual defects. 5. Run the checklist below and cite exact files, lines, and screenshot names. 6. Prioritize findings as **Must fix**, **Should fix**, or **Could improve**. 7. Save `DESIGN_REVIEW.md` beside the brief, including a screenshot inventory. ## Checklist - Visual hierarchy and reading order - Consistent spacing, radii, borders, shadows, and semantic color - Fidelity to the named aesthetic direction - Reuse and quality of components - Default, hover, focus, active, disabled, loading, empty, error, and success states - Supported viewport behavior, no unwanted horizontal overflow, and 44×44px targets - WCAG AA contrast, keyboard access, labels, semant