Imported from David-Li0406/meta-skill-evloving (skill-flow/data/skills-refined-autoskill-36k/skillsmp/frontend-design-review/SKILL.md). Install upstream with npx skills add David-Li0406/meta-skill-evloving --skill frontend-design-review. Copyright stays with the author.

Frontend Design Review

Overview

This skill provides expert guidance for conducting thorough frontend design reviews, covering UI/UX design quality, design system consistency, accessibility compliance, and responsive design patterns. The skill helps identify design issues early in the development lifecycle, ensuring designs meet quality standards, accessibility requirements, and business objectives before implementation.

Core Capabilities

1. UI/UX Design Quality Review

• Visual design assessment (typography, color, spacing, layout, visual hierarchy)
• User experience evaluation (flows, interactions, navigation, usability)
• Design consistency verification across screens and journeys
• Brand alignment and visual identity validation
• Cognitive load analysis

2. Design System Validation

• Component library review (design, variants, states, reusability)
• Design tokens validation (colors, typography, spacing)
• Pattern library assessment for consistency
• Documentation quality evaluation
• Design system governance assessment

3. Accessibility Compliance

• WCAG 2.1 AA compliance verification
• Color contrast validation (4.5:1 text, 3:1 UI components)
• Keyboard navigation and focus management
• Screen reader support validation
• Accessible interaction patterns review

4. Responsive Design Review

• Breakpoint strategy evaluation
• Mobile-first approach assessment
• Touch target sizing verification (44x44px minimum)
• Content adaptation across viewports
• Performance considerations

5. Component Architecture Assessment

• Component hierarchy and composition patterns
• Reusability and flexibility evaluation
• State management review (default, hover, active, disabled, error, loading)
• Component variants and customization patterns
• Component documentation quality

Workflow

Phase 1: Pre-Review Preparation

1. Gather Design Assets

• Collect Figma/Sketch files, design specifications, mockups
• Obtain design system documentation and component library
• Review brand guidelines and style guides
• Gather user research findings and personas

2. Understand Context

• Review project requirements and business objectives
• Understand target users and use cases
• Identify key user journeys and critical flows
• Note technical constraints and platform requirements

3. Define Review Scope

• Identify screens/flows to review
• Determine review depth (high-level vs. detailed)
• Set priorities based on importance
• Establish timeline and deliverables

Phase 2: Conduct Design Review

Step 1: Visual Design Review

• Assess typography (font selection, type scale, line heights, consistency)
• Evaluate color system (palette, contrast, semantic usage, tokens)
• Review spacing and layout (grid system, whitespace, alignment)
• Check visual hierarchy (size, color, position, emphasis)
• Validate iconography (style, size, clarity, consistency)
• Assess imagery and media (quality, aspect ratios, optimization)

Step 2: Design System Compliance

• Verify component usage matches design system
• Check for design token usage (no hard-coded values)
• Identify deviations from established patterns
• Validate component variants and states
• Review custom components vs. system components

Step 3: Accessibility Audit

• Test color contrast ratios for all text and UI elements
• Verify keyboard navigation and tab order
• Check focus indicators visibility and clarity
• Validate ARIA labels and semantic structure
• Review alternative text for images
• Assess form label associations
• Test interactive element accessibility

Step 4: Responsive Design Evaluation

• Review breakpoint strategy (mobile, tablet, desktop)
• Check content adaptation at different viewports
• Verify touch target sizes on mobile
• Assess navigation patterns for mobile
• Review image responsiveness and optimization
• Validate typography scaling across devices

Step 5: Component Architecture Analysis

• Evaluate component organization and hierarchy
• Review component reusability and composition
• Check component state coverage
• Assess variant design and flexibility
• Validate component props and customization

Step 6: User Experience Assessment

• Analyze user flows and task completion paths
• Evaluate navigation structure and findability
• Check interaction patterns and feedback
• Assess error states and error handling
• Review empty states and loading states
• Validate form design and validation patterns

Phase 3: Document Findings

1. Categorize Issues by Severity

• Critical: Blocking issues, must fix before launch
• High: Significant usability/accessibility issues
• Medium: Issues with workarounds, should fix soon
• Low: Minor polish, nice-to-haves

2. Create Detailed Findings Report See design-review-report-template.md for comprehensive report structure

Include:

• Executive summary with key statistics
• Review scope documentation
• Findings by category with specific examples
• Severity-rated issue list
• Positive observations (what's working well)
• Actionable recommendations with priorities
• Action items with owners and timelines

3. Provide Visual Examples

• Screenshot issues with annotations
• Show before/after for recommendations
• Include contrast ratio measurements
• Document component state issues visually

Phase 4: Collaborate on Solutions

1. Prioritize Fixes

• Separate must-fix from nice-to-have
• Consider implementation effort
• Balance user impact with development cost

2. Create Action Plan

• Assign owners (design team vs. development team)
• Set realistic timelines
• Schedule follow-up review

3. Document Decisions

• Record accepted risks or trade-offs
• Note items deferred to future work
• Update design system if patterns change

Severity Level Guidelines

Critical (Blocking)

• Violates WCAG AA requirements (legal risk)
• Completely blocks core user tasks
• Causes data loss or security issues
• Severely damages brand or user trust

High Priority

• Significantly degrades user experience
• Impacts large number of users
• Creates major accessibility barriers
• Inconsistent with design system causing confusion

Medium Priority

• Negatively impacts experience but has workarounds
• Affects subset of users
• Minor accessibility issues (WCAG AAA)
• Design inconsistencies that are noticeable

Low Priority

• Polish and optimization items
• Edge case issues
• Minor visual refinements
• Nice-to-have enhancements

Accessibility Quick Reference

WCAG 2.1 AA Requirements:

• Color contrast: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold)
• UI component contrast: 3:1 minimum
• Keyboard accessible: All functionality available via keyboard
• Focus visible: Clear focus indicators on interactive elements
• Text alternatives: All images have appropriate alt text
• Form labels: All inputs have associated labels
• Semantic HTML: Proper heading hierarchy and landmarks
• Touch targets: 44x44 CSS pixels minimum

Testing Tools:

• Color contrast: WebAIM Contrast Checker, Stark plugin
• Keyboard nav: Manual testing with Tab/Shift+Tab
• Screen reader: Test with VoiceOver (Mac), NVDA (Windows)

Design System Review Checklist

Component Usage:

• All components sourced from design system
• No one-off custom variations without justification
• Component variants used appropriately
• All component states designed (default, hover, active, disabled, error, loading)

Design Tokens:

• Colors use token references (not hex values)
• Typography uses token references (not hard-coded sizes)
• Spacing uses token references (8px grid system)
• Shadows and effects use token references

Patterns:

• Navigation patterns consistent with system
• Form patterns follow system conventions
• Modal/dialog patterns match system
• Empty states use system patterns
• Error handling follows system patterns

Reference Files

Load these references based on specific review needs:

• best-practices-for-design-reviews.md - Review methodology, tools, and techniques for effective design reviews

• common-design-issues-to-watch-for.md - Frequently encountered design problems and red flags to identify during reviews

• design-review-process.md - Comprehensive step-by-step process with detailed checklists for each review phase

• design-system-patterns.md - Design system validation criteria, component patterns, and token usage guidelines

• responsive-design-patterns.md - Breakpoint strategies, mobile-first patterns, and responsive design best practices

• accessibility-guidelines.md - Detailed WCAG 2.1 AA compliance guidelines, testing procedures, and accessibility patterns

• severity-levels.md - Detailed severity level definitions and criteria for categorizing design issues

• design-review-report-template.md - Complete report template with all sections for documenting review findings

Example Review Flow

Scenario: Reviewing a new checkout flow design in Figma

1. Preparation (30 min)

   • Review checkout requirements and success metrics
   • Identify 5 screens in checkout flow
   • Gather payment compliance requirements
   • Review design system component library

2. Visual Design Review (45 min)

   • Check typography consistency across all 5 screens
   • Verify color contrast on CTA buttons (found 2 issues)
   • Validate spacing follows 8px grid
   • Review visual hierarchy on payment screen

3. Accessibility Audit (60 min)

   • Test color contrast: 3 text elements fail (4.2:1, need 4.5:1)
   • Check keyboard flow: Tab order jumps incorrectly on screen 3
   • Verify ARIA labels: Payment input missing label association
   • Review error states: Error messages lack semantic markup

4. Responsive Review (30 min)

   • Check mobile breakpoint: Form inputs too small (38px height)
   • Verify tablet layout: Good adaptation
   • Test content reflow: Success

5. Design System Check (20 min)

   • Found custom button variant not in system
   • Spacing uses hard-coded values instead of tokens
   • Form patterns match system conventions ✅

6. Document Findings (45 min)

   • 3 Critical issues: Contrast failures, touch target sizes
   • 5 High issues: Keyboard navigation, missing labels
   • 4 Medium issues: Design token usage, custom components
   • Create report using template with visual examples

7. Deliverables

   • Design review report with 12 findings
   • Annotated Figma comments on specific issues
   • Prioritized action items with owners
   • Schedule follow-up review in 1 week

Total Time: ~3.5 hours for comprehensive review

Tips for Effective Reviews

Be Specific: Don't say "improve contrast". Say "Body text on blue background has 3.8:1 contrast, needs 4.5:1. Darken text to #1a1a1a or lighten background."

Show Examples: Include screenshots with annotations. Show the issue and suggest visual fixes.

Prioritize: Clearly separate must-fix from nice-to-have. Focus on user impact.

Provide Context: Explain why an issue matters. "This contrast failure affects 8% of users with low vision."

Be Constructive: Acknowledge what works well. Balance criticism with recognition.

Collaborate: Review findings with designers before finalizing. Get their input on solutions.

Follow Up: Schedule re-review to verify fixes. Track issues to completion.