Frontend Code Review Skill

Purpose: Review frontend React/TypeScript code focusing on Next.js 16+ App Router patterns, TypeScript safety, and Tailwind CSS efficiency.

Location: /frontend

Triggers: When reviewing TypeScript/React code in the frontend/src directory or any file modifications to pages, components, or styles.

Skill Overview

This skill provides automated and manual code review capabilities for the Next.js frontend. It enforces consistency across:

• •Next.js 16+ App Router patterns and conventions
• •TypeScript strict mode compliance
• •React 19 best practices
• •Tailwind CSS optimization and consistency
• •Component composition and reusability

Quick Commands

# Run linter with Biome
cd frontend && pnpm lint

# Format code
pnpm format

# Run tests
pnpm test

# Build for production
pnpm build

# Full review workflow
pnpm lint && pnpm format && pnpm test

Review Categories

See review-categories.md for detailed checklists across Next.js App Router patterns, TypeScript safety, React component patterns, and Tailwind CSS efficiency.

Using This Skill

When Code is Submitted for Review

1. •

   Run Biome Linter

   bash

   cd frontend && pnpm lint
   

2. •

   Format Code

   bash

   pnpm format
   

3. •

   Run Tests (if configured)

   bash

   pnpm test
   

4. •

   Manual Review

   • •Check Next.js App Router patterns
   • •Verify TypeScript strict compliance
   • •Review component composition
   • •Optimize Tailwind classes
5. •

   Build Check

   bash

   pnpm build
   

Common Review Tasks

Reviewing a new page:

• •Is it in app/ directory with correct routing?
• •Does it export metadata if needed?
• •Are server/client component boundaries appropriate?
• •Are all props typed?
• •Are Tailwind classes efficient?

Reviewing a new component:

• •Are props properly typed?
• •Is it exported with correct module boundary?
• •Should it be "use client" or server component?
• •Are hooks used correctly?
• •Are dependencies listed in useEffect?

Reviewing TypeScript:

• •Can types be inferred or are they explicit?
• •No implicit any?
• •Function return types specified?
• •Generic types for reusable logic?
• •Zod validation at I/O boundaries?

Reviewing Tailwind:

• •Classes ordered consistently?
• •Using theme tokens (not arbitrary values)?
• •Responsive/dark mode classes applied?
• •No conflicting utilities?
• •Performance-conscious (no runtime evaluation)?

Files in This Skill

• •SKILL.md - This file (skill definition)

Integration with Development

• •Biome runs on all file saves (with IDE integration)
• •CI/CD runs pnpm lint and pnpm build on all PRs
• •Code review skill used for:
  • •Pre-commit validation during development
  • •PR review before merge
  • •Component architecture validation
  • •Performance and accessibility checks
  • •Onboarding new developers

Key Patterns by Feature

Server Components (Default)

// ✅ Good - Server component by default
export default async function Page() {
  const data = await fetchData();
  return <div>{data}</div>;
}

Client Components (When Needed)

// ✅ Good - Only client-side logic needs "use client"
"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Typed Props

// ✅ Good - Explicit prop types
interface ButtonProps {
  label: string;
  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  variant?: "primary" | "secondary";
}

export function Button({ label, onClick, disabled, variant = "primary" }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

Tailwind Organization

// ✅ Good - Classes organized logically
<div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-white p-8 dark:bg-black">
  <h1 className="text-3xl font-bold text-gray-900 dark:text-white">Title</h1>
  <p className="max-w-md text-lg text-gray-600 dark:text-gray-400">Description</p>
</div>

Resources

• •Next.js 16 Documentation
• •Next.js App Router Guide
• •TypeScript Best Practices
• •React 19 Release Notes
• •Tailwind CSS Documentation
• •Biome Configuration
• •Local: frontend/README.md

Related Files

• •frontend/README.md - Frontend development guide
• •frontend/tsconfig.json - TypeScript configuration
• •frontend/biome.json - Linter and formatter config
• •frontend/next.config.ts - Next.js configuration
• •CLAUDE.md - Main project guidance