rknall/claude-skills/ui-design-review

UI/UX Design Review

This skill provides comprehensive design review capabilities for websites and desktop applications, with a strong focus on accessibility compliance and best practices.

When to Use This Skill

Activate this skill when the user requests:

• Review of UI/UX designs, wireframes, or mockups
• Accessibility audit (WCAG 2.1/2.2 compliance)
• Usability assessment
• Visual design critique
• Interaction pattern review
• Responsive design evaluation
• Design system assessment
• Component library review
• User flow analysis
• Information architecture review
• Desktop application UI review

Review Framework

1. Initial Analysis

When a user provides a design or interface, begin by:

1. Understanding Context

• Ask clarifying questions about:
• Target audience and personas
• Platform(s): web, desktop (Windows/Mac/Linux), mobile
• Accessibility requirements and compliance level needed
• Brand guidelines or design system in use
• User research or testing conducted
• Technical constraints
• Browser/OS support requirements
• Key user goals and tasks

1. Design Artifact Analysis

• If designs, screenshots, or prototypes are provided, analyze:
• Visual hierarchy and layout
• Color usage and contrast
• Typography and readability
• Component patterns and consistency
• Navigation structure
• Interactive elements
• Responsive behavior
• State variations (hover, active, disabled, error, etc.)

2. Comprehensive Review Areas

Evaluate the design across these dimensions:

A. Accessibility (WCAG 2.1/2.2 Compliance)

This is a CRITICAL area that must be thoroughly reviewed for all interfaces.

Level A Requirements (Minimum):

1.1 Text Alternatives

• [ ] All images have appropriate alt text
• [ ] Decorative images have empty alt attributes
• [ ] Icons have accessible labels
• [ ] Complex images have detailed descriptions
• [ ] Image buttons have descriptive text

1.2 Time-based Media

• [ ] Video content has captions
• [ ] Audio content has transcripts
• [ ] Pre-recorded media has alternatives

1.3 Adaptable

• [ ] Content structure is logical without CSS
• [ ] Reading order is meaningful
• [ ] Instructions don't rely solely on sensory characteristics
• [ ] Semantic HTML is used properly
• [ ] Form labels are programmatically associated

1.4 Distinguishable

• [ ] Color is not the only visual means of conveying information
• [ ] Audio controls are available
• [ ] Text has sufficient contrast (4.5:1 for normal text, 3:1 for large text)
• [ ] Text can be resized up to 200% without loss of functionality
• [ ] Images of text are avoided (except logos)

2.1 Keyboard Accessible

• [ ] All functionality is keyboard accessible
• [ ] No keyboard traps exist
• [ ] Keyboard shortcuts don't conflict with assistive technologies
• [ ] Focus order is logical
• [ ] Focus is visible at all times

2.2 Enough Time

• [ ] Time limits can be adjusted, extended, or turned off
• [ ] Moving, blinking, scrolling content can be paused
• [ ] Auto-updating content can be paused or controlled

2.3 Seizures and Physical Reactions

• [ ] Content doesn't flash more than 3 times per second
• [ ] No content violates flash threshold

2.4 Navigable

• [ ] Skip links allow bypassing repeated content
• [ ] Page titles are descriptive and unique
• [ ] Focus order preserves meaning
• [ ] Link purpose is clear from context
• [ ] Multiple navigation methods exist
• [ ] Headings and labels are descriptive

2.5 Input Modalities

• [ ] All functionality works with pointer gestures
• [ ] Touch targets are sufficiently large (minimum 44x44px)
• [ ] Accidental activation is prevented

3.1 Readable

• [ ] Page language is identified
• [ ] Language changes are marked up

3.2 Predictable

• [ ] Focus doesn't trigger unexpected changes
• [ ] Input doesn't trigger unexpected changes
• [ ] Navigation is consistent across pages
• [ ] Components are identified consistently

3.3 Input Assistance

• [ ] Form errors are identified and described
• [ ] Labels and instructions are provided
• [ ] Error suggestions are offered
• [ ] Critical actions can be reversed, checked, or confirmed

4.1 Compatible

• [ ] HTML is valid and properly nested
• [ ] IDs are unique
• [ ] ARIA attributes are used correctly
• [ ] Status messages are programmatically determinable

Level AA Requirements (Recommended):

• [ ] Contrast ratio is at least 4.5:1 (3:1 for large text)
• [ ] Text can be resized up to 200% without assistive technology
• [ ] Images of text are avoided unless customizable
• [ ] Visual presentation of text allows customization
• [ ] Audio content doesn't interfere with screen readers
• [ ] Multiple ways to locate pages exist
• [ ] Headings and labels are descriptive
• [ ] Focus indicator is visible
• [ ] Section headings are used to organize content

Level AAA Requirements (Best Practice):

• [ ] Contrast ratio is at least 7:1 (4.5:1 for large text)
• [ ] No images of text are used
• [ ] Text spacing can be adjusted
• [ ] Content reflows to 320px without scrolling
• [ ] Hover/focus content is dismissible and persistent

Provide Feedback On:

• Specific WCAG violations with severity level
• Missing ARIA labels and landmarks
• Color contrast issues with measured ratios
• Keyboard navigation problems
• Screen reader compatibility issues
• Missing alternative text
• Form accessibility issues
• Focus management problems
• Semantic HTML issues

Testing Recommendations:

• Use automated tools: axe DevTools, WAVE, Lighthouse
• Manual keyboard navigation testing
• Screen reader testing (NVDA, JAWS, VoiceOver)
• Color contrast analyzers
• Focus indicator visibility
• Zoom testing (200%, 400%)

B. Visual Design & Aesthetics

Evaluate:

• Visual hierarchy and layout structure
• Color palette and color theory application
• Typography choices and hierarchy
• White space and density
• Visual balance and alignment
• Consistency with brand guidelines
• Modern vs dated design patterns
• Visual weight distribution
• Grid system usage
• Component visual consistency

Provide Feedback On:

• Cluttered or overwhelming layouts
• Poor visual hierarchy
• Inconsistent spacing
• Typography issues (too many fonts, poor sizing)
• Color palette problems
• Lack of visual breathing room
• Misaligned elements
• Inconsistent component styling
• Dated design patterns

Design System Considerations:

• Design token usage (colors, spacing, typography)
• Component library consistency
• Pattern library adherence
• Brand guideline compliance

C. User Experience & Usability

Evaluate:

• User flow logic and efficiency
• Information architecture
• Navigation patterns and clarity
• Cognitive load
• Task completion efficiency
• Error prevention and recovery
• Feedback mechanisms
• Learnability for new users
• Efficiency for experienced users
• Mental models and user expectations
• Consistency with platform conventions

Provide Feedback On:

• Confusing navigation
• Too many steps to complete tasks
• Unclear labeling or terminology
• Missing or unclear feedback
• Poor error messages
• Inconsistent interaction patterns
• Violation of established conventions
• High cognitive load
• Missing confirmation for destructive actions

Jakob Nielsen's Usability Heuristics:

1. Visibility of system status
2. Match between system and real world
3. User control and freedom
4. Consistency and standards
5. Error prevention
6. Recognition rather than recall
7. Flexibility and efficiency of use
8. Aesthetic and minimalist design
9. Help users recognize and recover from errors
10. Help and documentation

D. Responsive Design & Layout

Evaluate:

• Breakpoint strategy
• Mobile-first approach
• Touch target sizes (minimum 44x44px)
• Content reflow behavior
• Layout patterns (sidebar, hamburger menu, etc.)
• Image and media responsiveness
• Typography scaling
• Navigation adaptation
• Form layout on mobile
• Table handling on small screens

Provide Feedback On:

• Missing breakpoints
• Horizontal scrolling on mobile
• Too-small touch targets
• Overlapping content
• Poor mobile navigation
• Unreadable text on mobile
• Missing mobile-specific patterns
• Inefficient use of screen space

Desktop-Specific Considerations:

• Window resizing behavior
• Minimum/maximum window dimensions
• Multi-monitor support
• Native OS patterns (Windows, macOS, Linux)
• Keyboard shortcuts
• Context menus
• Drag and drop

E. Typography & Readability

Evaluate:

• Font choices and pairings
• Type scale and hierarchy
• Line length (45-75 characters optimal)
• Line height (1.5-1.8 for body text)
• Font size (minimum 16px for body text)
• Letter spacing and word spacing
• Text alignment and justification
• Heading hierarchy
• Font rendering and smoothing

Provide Feedback On:

• Too many font families (limit to 2-3)
• Poor font size choices
• Insufficient contrast
• Lines too long or too short
• Inadequate line height
• Missing heading hierarchy
• Justified text without hyphenation
• All-caps text for long content
• Poor font weight choices

Best Practices:

• Use system fonts for performance
• Include fallback fonts
• Implement proper font loading strategy
• Use relative units (rem, em)
• Ensure readability at 200% zoom

F. Color & Contrast

Evaluate:

• Color palette cohesion
• Contrast ratios (WCAG compliance)
• Color meaning and semantics
• Color blindness accessibility
• Dark mode support
• Brand color usage
• Color consistency
• Accent and action colors

Provide Feedback On:

• Insufficient contrast ratios
• Relying solely on color to convey information
• Too many colors in the palette
• Poor color combinations
• Missing dark mode
• Inconsistent color usage
• Colors that don't work for color blindness
• Clashing or garish combinations

Tools for Testing:

• Contrast checkers (WebAIM, Stark)
• Color blindness simulators
• Color palette analyzers

Contrast Requirements:

• Normal text: 4.5:1 (AA), 7:1 (AAA)
• Large text (18pt+/14pt bold+): 3:1 (AA), 4.5:1 (AAA)
• UI components and graphics: 3:1 (AA)

G. Interactive Elements & Components

Evaluate:

• Button styles and states
• Form controls and inputs
• Links and their appearance
• Interactive feedback (hover, active, focus, disabled)
• Loading states and skeletons
• Error states and validation
• Success states and confirmations
• Tooltips and popovers
• Modals and dialogs
• Dropdown and select menus
• Toggle switches and checkboxes
• Radio buttons
• Accordions and collapsible content

Provide Feedback On:

• Unclear clickable areas
• Missing hover/focus states
• Poor button hierarchy
• Inconsistent interactive patterns
• Missing loading indicators
• Unclear disabled states
• Poor error messaging
• Ambiguous icons without labels
• Too many action options
• Destructive actions without confirmation

Component Checklist:

• [ ] All states are designed (default, hover, focus, active, disabled, error, success)
• [ ] Touch targets meet minimum size
• [ ] Interactive elements have clear affordances
• [ ] Focus indicators are visible
• [ ] Loading states prevent multiple submissions
• [ ] Error messages are helpful and specific

H. Navigation & Information Architecture

Evaluate:

• Primary navigation structure
• Secondary navigation patterns
• Breadcrumb implementation
• Search functionality
• Menu organization
• Site map clarity
• Content categorization
• Navigation depth
• Cross-linking strategy
• Back button behavior

Provide Feedback On:

• Overcomplicated navigation
• Hidden or buried important features
• Inconsistent navigation patterns
• Missing breadcrumbs
• Poor search UX
• Too many navigation levels
• Unclear menu labels
• Missing way to return to home/previous page