Frontend Code Review

Frontend Code Review

Systematically review frontend code to identify issues, ensure quality, and provide actionable improvement recommendations across code quality, performance, accessibility, and security dimensions.

Review Workflow

1. Initial Assessment

Gather context about the project and identify review scope:

Project Context:

• Framework and version (React, Vue, Angular, vanilla JS)
• Build tools and dependencies
• Target browsers/devices
• Accessibility requirements (WCAG level)
• Performance targets (Core Web Vitals)

Review Scope:

• New features vs. refactoring vs. bug fixes
• Component complexity level
• Critical user paths
• Security-sensitive areas

2. Code Quality Analysis

Evaluate component structure, code patterns, and maintainability:

Key Areas:

• Component architecture (single responsibility, composition patterns)
• JavaScript/TypeScript quality (type safety, naming, complexity)
• State management decisions (local vs. global, immutability)
• Error handling and edge cases
• Code duplication and DRY violations

Load references/code-quality-checklist.md for detailed quality criteria, common issues, and fixes with code examples

3. Performance Review

Assess rendering efficiency, resource loading, and Core Web Vitals:

Focus Areas:

• Rendering optimization (React.memo, useMemo, useCallback, keys)
• Resource loading (images, fonts, scripts, lazy loading)
• Bundle size and code splitting
• Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
• Memory leaks and cleanup

Load references/performance-checklist.md for detailed optimization techniques and Web Vitals guidelines with code examples

4. Accessibility Assessment

Evaluate WCAG 2.1 compliance and inclusive design:

Key Areas:

• Semantic HTML (proper headings, landmarks, lists)
• ARIA implementation (labels, roles, live regions)
• Keyboard navigation and focus management
• Screen reader support (alt text, labels, announcements)
• Color contrast ratios

Load references/accessibility-checklist.md for WCAG 2.1 AA/AAA compliance criteria with detailed examples

5. Security Review

Identify vulnerabilities and security best practices:

Common Vulnerabilities:

• XSS (input sanitization, safe HTML rendering)
• CSRF protection
• Authentication token handling
• Sensitive data exposure
• Dependency vulnerabilities

Security Controls:

• Content Security Policy (CSP)
• HTTPS enforcement
• Secure cookies
• Input validation and output encoding

Load references/security-checklist.md for comprehensive frontend security guidelines and vulnerability prevention

6. CSS/Styling Review

Assess architecture, responsiveness, and maintainability:

Key Areas:

• CSS methodology (BEM, OOCSS, CSS-in-JS, Tailwind)
• Responsive design (mobile-first, breakpoints, flexible layouts)
• Design tokens and variables
• Specificity management
• Unused CSS detection

7. Testing Coverage

Evaluate test completeness and quality:

Test Types:

• Unit tests (component logic, utilities, edge cases)
• Integration tests (component interaction, API integration, state flows)
• E2E tests (critical user journeys, cross-browser compatibility)
• Accessibility automated tests

8. Generate Review Report

Create structured report with findings and recommendations:

Report Structure:

• Executive Summary (quality rating, critical issues, recommendation)
• Detailed Findings (by category with severity: Critical/Major/Minor)
• Action Items (prioritized with file/line references and specific fixes)

Load references/report-templates.md for full review report formats and examples

Review Process Guidelines

Review Timing:

• Pre-Commit: Automated linting and formatting
• Pre-PR: Self-review using this workflow
• PR Review: Peer review with comprehensive analysis
• Pre-Deployment: Final quality gate

Severity Definitions:

• Critical: Blocks deployment (security issues, breaking bugs, accessibility blockers)
• Major: Should fix before merge (performance issues, poor patterns, maintainability concerns)
• Minor: Nice to improve (style suggestions, micro-optimizations, documentation)

Common Anti-Patterns

React/Component Patterns:

• Prop drilling through multiple levels
• God components doing too much
• Missing error boundaries
• Mutating state directly
• Inline functions causing unnecessary re-renders

JavaScript/TypeScript:

• Using any type in TypeScript
• Console.log in production code
• Deeply nested callbacks
• Global variables
• Unhandled promises

CSS/Styling:

• !important overuse
• Inline styles instead of classes
• Fixed pixels instead of relative units
• High specificity wars

Performance:

• Synchronous expensive operations in render
• Large unoptimized bundles (>500KB)
• Missing code splitting and lazy loading
• Unoptimized images

Accessibility:

• Non-semantic div/span buttons
• Missing alt attributes
• Color-only information
• Keyboard traps
• Missing focus management in modals

Key Review Checkpoints

Code Quality:

• Components follow single responsibility
• Functions < 50 lines, complexity < 10
• TypeScript strict mode enabled
• Meaningful naming conventions
• Error handling present

Performance:

• Appropriate use of React.memo/useMemo/useCallback
• Images optimized (WebP/AVIF)
• Code splitting implemented
• Core Web Vitals within targets

Accessibility:

• Semantic HTML used
• All images have alt text
• Keyboard navigable
• Color contrast compliant (≥4.5:1)

Security:

• User input sanitized
• XSS prevention in place
• No sensitive data in localStorage
• Dependencies up to date

Reference Files

Load these files when detailed guidance is needed:

• references/code-quality-checklist.md: Component patterns, code smells, fixes with examples (693 lines)
• references/performance-checklist.md: Web Vitals optimization, rendering performance (891 lines)
• references/accessibility-checklist.md: WCAG 2.1 compliance with detailed examples (1045 lines)
• references/security-checklist.md: XSS, CSRF, authentication, CSP guidelines (969 lines)
• references/report-templates.md: Review report formats and examples (1203 lines)