frontend-code-review

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

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

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

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)