62 lines
1.6 KiB
Markdown
62 lines
1.6 KiB
Markdown
---
|
|
name: code-review
|
|
description: 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
|