frontend-design-review

What this skill does

# 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](references/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
- [ ] E