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

• Scan: Read the code to identify architectural patterns, hooks usage, and component structure.

• Check: Apply the Review Checklist.

• 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 div s 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>

<snippet of problematic code>

Reason: <Why is this urgent?>
Suggested Fix:

<snippet of fixed code>

Found  suggestions:

- <Refactor/Style>: 

- :