code-review

What this skill does

# 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:

```typescript
// ❌ 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:

```typescript
// ❌ 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} onUpdate={() => updateProduct(p.id)} />
      ))}
    </div>
  );
}

// ✅ GOOD: Memoized sorting and callbacks
function ProductList({ products }: { products: Product[] }) {
  const sortedProducts = useMemo(
    () => [...products].sort((a, b) => b.price - a.price),
    [products]
  );

  const handleUpdate = useCallback((id: string) => {
    updateProduct(id);
  }, []);

  return (
    <div>
      {sortedProducts.map(p => (
        <ProductCard key={p.id} product={p} onUpdate={() => handleUpdate(p.id)} />
      ))}
    </div>
  );
}

// ❌ BAD: No memoization for expensive child
function ExpensiveChild({ data }: { data: Data }) {
  // Complex rendering logic
  return <div>{/* ... */}</div>;
}

// ✅ GOOD: Memoized component
const ExpensiveChild = memo(function ExpensiveChild({ data }: { data: Data }) {
  // Complex rendering logic
  return <div>{/* ... */}</div>;
});

// ❌ BAD: Memory leak - no cleanup
function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);
    // No cleanup!
  }, []);

  return <div>{count}</div>;
}

// ✅ GOOD: Proper cleanup
function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCount(c => c + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <div>{count}</div>;
}

// ❌ BAD: No lazy loading for large components
import HeavyChart from './HeavyChart';
import HeavyEditor from './HeavyEditor';

// ✅ GOOD: Lazy loading
const HeavyChart = lazy(() => import('./HeavyChart'));
const HeavyEditor = lazy(() => import('./HeavyEditor'));

function Dashboard() {
  return (
    <Suspense fallback={<Spinner />}>
      <HeavyChart />
      <HeavyEditor />
    </Suspense>
  );
}

// ❌ BAD: Inline object/function props
<Child
  config={{ theme: 'dark' }}
  onUpdate={() => doSomething()}
/>

// ✅ GOOD: Memoized props
const config = useMemo(() => ({ theme: 'dark' }), []);
const handleUpdate = useCallback(() => doSomething(), []);

<Child config={config} onUpdate={handleUpdate} />
```

**React Performance Checklist**:
- [ ] Memoization for expensive calculations (useMemo)
- [ ] Memoized callbacks (useCallback) for child components
- [ ] memo() for expensive child components
- [ ] Proper cleanup in useEffect (intervals, subscriptions)
- [ ] Lazy loading for heavy components
- [ ] Code splitting for routes
- [ ] Virtualization for long lists (react-window)
- [ ] Debouncing for frequent events (search, scroll)
- [ ] Im