89e12659-b5d8-4cca-837d-d778cd7dadc2/.claude/skills/code-review/SKILL.md

name, description

name	description
code-review	Frontend code review checklist for React, TypeScript, and Tailwind

Frontend Code Review

Review recently changed files against this checklist.

Process

1. Identify Changed Files

   • Run git diff --name-only to find modified files
   • Focus on .tsx, .ts files in src/

2. Review Each File

TypeScript

• No any types (use proper types or unknown)
• Interfaces for component props
• No unused imports or variables
• Proper error handling (no silent catches)

React Patterns

• "use client" only when needed (hooks, events, browser APIs)
• No unnecessary React.memo
• Stable callbacks with useCallback when passed as props
• Cleanup in useEffect (event listeners, subscriptions, GSAP)
• Keys on mapped elements (not index unless static list)

Component Structure

• Logic extracted to hooks (if complex)
• Props interface defined
• Default export at bottom

Tailwind/Styling

• Using cls() for conditional classes
• Responsive classes (mobile-first)
• No hardcoded colors (use CSS variables)
• Proper z-index layering

Performance

• Images use next/image with proper sizing
• Heavy components use dynamic import if below fold
• No unnecessary re-renders (check deps arrays)

Accessibility

• Interactive elements are focusable
• Images have alt text
• Buttons have accessible names
• aria-hidden on decorative elements

3. Report Findings
   • List issues grouped by severity: Critical, Warning, Suggestion
   • Provide specific line numbers and fixes