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
anytype 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)