frontend-code-review

Frontend Code Review

Review Process

This skill reviews .tsx, .ts, and .js files against three categories:

1. Code Quality - Consistent patterns, maintainability
2. Performance - React rendering optimization
3. Business Logic - Domain-specific rules

Two review modes:

• Pending-change review - Scan staged/modified files before commit
• File-targeted review - Review specific files the user names

Code Quality Rules

Rule 1: Conditional Classnames (URGENT)

Requirement: Use cn() utility for all conditional CSS, not ternaries or string concatenation.

BAD:

// Manual ternary
<div className={isActive ? 'text-primary-600' : 'text-gray-500'}>

// String concatenation
<div className={'bg-white ' + (isError ? 'border-red-500' : '')}>

// Template literal
<div className={`text-base ${highlighted && 'font-bold'}`}>

GOOD:

import { cn } from '@/utils/classnames';

<div className={cn(
  'text-base',
  isActive && 'text-primary-600',
  !isActive && 'text-gray-500'
)}>

<div className={cn(
  'bg-white',
  isError && 'border-red-500'
)}>

Why urgent: Inconsistent patterns make global style changes difficult.

Rule 2: Tailwind-First Styling (URGENT)

Requirement: Prefer Tailwind utilities over .module.css files unless Tailwind cannot achieve the effect.

BAD:

// styles.module.css
.button {
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  border-radius: 0.5rem;
}

// Component.tsx
import styles from './styles.module.css';
<button className={styles.button}>Click</button>

GOOD:

<button className="px-6 py-3 bg-blue-500 rounded-lg hover:bg-blue-600">
  Click
</button>

When CSS modules are acceptable:

• Complex animations requiring @keyframes
• Browser-specific hacks
• Third-party library style overrides

Rule 3: ClassName Ordering for Overrides

Requirement: Place incoming className prop AFTER component's own classes.

BAD:

const Button = ({ className }: { className?: string }) => {
  return (
    <div className={cn(className, 'bg-primary-600 text-white px-4 py-2')}>
      {/* Consumer can't override bg-primary-600 */}
    </div>
  );
};

// Consumer tries to change background
<Button className="bg-red-500" /> {/* Won't work */}