Frontend Code Review Skill

Intent: Use whenever requested to review frontend code (React, Next.js, TypeScript).

Supports: - Pending-change review: Reviewing git diff or staged files. - File-targeted review: Reviewing specific existing files.

Review Process

1. Scan: Read the code to identify architectural patterns, hooks usage, and component structure.
2. Check: Apply the Review Checklist.
3. Report: Output findings in the Required Output Format.

Review Checklist

1. Code Quality & Style

• [ ] Naming: Are variables/functions named descriptively? (e.g., isLoading vs flag)
• [ ] Type Safety: Is any avoided? are interfaces defined clearly?
• [ ] Constants: Are magic numbers/strings extracted to constants?
• [ ] Destructuring: Is consistent destructuring used for props?

2. React & Next.js Best Practices

• [ ] Hooks: Are hooks used correctly (dependency arrays, rules of hooks)?
• [ ] Server/Client: Is 'use client' used only when necessary?
• [ ] Memoization: Are useMemo/useCallback used appropriately (not prematurely)?
• [ ] Keys: Do lists have stable, unique keys?

3. Performance

• [ ] Bundle Size: Are large libraries imported entirely when tree-shaking is possible?
• [ ] Images: Is next/image used with proper sizing?
• [ ] Renders: Are there obvious unnecessary re-renders?

4. Accessibility (a11y)

• [ ] Semantic HTML: Are divs used where button, section, etc., are needed?
• [ ] Attributes: Do images have alt text? Do inputs have labels?

Required Output Format

# Code Review

Found <N> urgent issues:
## 1. <Issue Title>
**File**: `<path>` line `<line>`

```typescript
<snippet of problematic code>

Reason: Suggested Fix:

<snippet of fixed code>

Found suggestions: - : - : ```