/code-review

name: code-review
description: Frontend-focused code review skill for React/TypeScript/Tailwind projects. Analyzes code quality, security vulnerabilities (XSS, CSRF), performance issues, accessibility (WCAG), React best practices, hooks usage, component architecture, responsive design, and SEO. Use when users request code review, want feedback on components, ask about frontend security, performance optimization, or accessibility compliance. Provides actionable feedback with severity levels and fix suggestions.
allowed-tools: Read, Grep, Glob, Bash

Frontend Code Review

This skill provides comprehensive, production-ready code review for modern frontend applications with actionable feedback focused on React/TypeScript/Tailwind stack.

Purpose

Transform frontend code review from manual inspection into systematic analysis covering: 1. **Frontend Security** - XSS, CSRF, sensitive data exposure, auth issues 2. **React Performance** - Re-renders, memoization, bundle size, lazy loading 3. **Code Quality** - Readability, maintainability, React best practices 4. **Component Architecture** - Layered architecture, separation of concerns, reusability 5. **Type Safety** - TypeScript usage, type correctness, runtime validation 6. **Accessibility** - WCAG compliance, keyboard navigation, screen readers 7. **Responsive Design** - Mobile-first, breakpoints, Tailwind patterns 8. **SEO & Meta** - Meta tags, semantic HTML, performance metrics 9. **Testing** - Component tests, hooks tests, edge cases 10. **State Management** - Zustand/Context patterns, React Query usage

When to Use This Skill

Use this skill when:

• User asks for code review or feedback
• User mentions: "review", "check", "feedback", "quality", "security"
• After generating components or features
• User asks about performance or accessibility
• Before committing major changes
• Examples:
• "Review this component"
• "Is this React code optimized?"
• "Can you check for accessibility issues?"
• "How can I improve this?"
• "Review my feature implementation"

Review Process

Step 1: Understand Context

Before reviewing, gather context:

1. **Code Type**:

• React Component (UI, Form, List, etc.)
• Custom Hook (business logic)
• Utility function (helpers, transforms)
• API integration (React Query, fetch)
• Store/State management (Zustand, Context)
• Styling (Tailwind, CSS-in-JS)

2. **Review Scope**:

• Single component/hook
• Entire feature (multiple files)
• Page/route implementation
• Shared utilities

3. **Priority**:

• Security-critical (auth, payment forms)
• Performance-critical (large lists, complex calculations)
• User-facing (accessibility, UX)
• Internal (utilities, helpers)

Step 2: Initial Scan

Quickly scan for obvious issues:

**Critical Issues (🚨 CRITICAL)**:

• XSS vulnerabilities (dangerouslySetInnerHTML)
• CSRF vulnerabilities (missing tokens)
• Sensitive data exposure (tokens in localStorage)
• Authentication bypass
• Hardcoded secrets/API keys

**High Priority (⚠️ HIGH)**:

• Performance bottlenecks (unnecessary re-renders, no memoization)
• Memory leaks (missing cleanup in useEffect)
• Error handling gaps
• Accessibility violations (no ARIA labels, keyboard support)
• Missing input validation

**<br>Medium Priority (⚡ MEDIUM)**:

• Code duplication
• Unclear component/variable names
• Missing loading/error states
• Poor TypeScript usage (any types)
• Inconsistent Tailwind usage

**Low Priority (💡 LOW)**:

• Code style inconsistencies
• Missing comments for complex logic
• Minor optimizations
• Documentation gaps

Step 3: Deep Analysis

Perform systematic review across all dimensions:

3.1 Frontend Security Review

Check against common frontend vulnerabilities:

// ❌ BAD: XSS vulnerability
function UserComment({ comment }: { comment: string }) {
  return <div dangerouslySetInnerHTML={{ __html: comment }} />;
}

// ✅ GOOD: Sanitized HTML
import DOMPurify from 'dompurify';

function UserComment({ comment }: { comment: string }) {
  return <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(comment) }} />;
}

// ✅ BETTER: No HTML, just text
function UserComment({ comment }: { comment: string }) {
  return <div>{comment}</div>;
}

// ❌ BAD: Token in localStorage (XSS vulnerable)
localStorage.setItem('token', response.token);

// ✅ GOOD: HttpOnly cookie (set by server)
// Or use secure session management library

// ❌ BAD: Hardcoded API key
const API_KEY = "pk_live_abc123xyz";

// ✅ GOOD: Environment variable
const API_KEY = process.env.NEXT_PUBLIC_API_KEY;

// ❌ BAD: No CSRF protection
async function transferMoney(to: string, amount: number) {
  await fetch('/api/transfer', {
    method: 'POST',
    body: JSON.stringify({ to, amount })
  });
}

// ✅ GOOD: Include CSRF token
async function transferMoney(to: string, amount: number) {
  const csrfToken = getCsrfToken();
  await fetch('/api/transfer', {
    method: 'POST',
    headers: {
      'X-CSRF-Token': csrfToken
    },
    body: JSON.stringify({ to, amount })
  });
}

**Frontend Security Checklist**:

• [ ] No `dangerouslySetInnerHTML` with user input
• [ ] No sensitive tokens in localStorage
• [ ] No hardcoded API keys or secrets
• [ ] CSRF protection for state-changing operations
• [ ] Input validation on all form inputs
• [ ] Output sanitization for user-generated content
• [ ] HTTPS enforced (check in production)
• [ ] No sensitive data in console.log
• [ ] Proper authentication checks on protected routes
• [ ] Secure password input (no autocomplete on sensitive fields)

3.2 React Performance Review

Identify bottlenecks and optimization opportunities:

// ❌ BAD: Unnecessary re-renders
function ProductList({ products }: { products: Product[] }) {
  const sortedProducts = products.sort((a, b) => b.price - a.price);
  // Re-sorts on every render!

  return (
    <div>
      {sortedProducts.map(p => (
        <ProductCard key={p.id} product={p} onUp