reviewing-react-code

Files (1)

• SKILL.md

SKILL.md (first lines)

> **中文說明：** 對 React 16 組件進行全面代碼審查，涵蓋性能、可維護性、測試覆蓋、安全性。用戶分享代碼求 review、問「哪裡有問題」、想優化代碼時觸發。輸出結構化報告：優點 / 問題表格 / 嚴重問題 / 行動項。
> **English:** Thorough React 16 code review covering performance, maintainability, testing, and security.

# React Code Review Skill

## Overview

This skill reviews React code with focus on:

- Performance optimization
- Code maintainability
- Testing coverage
- Security
- Best practices

## When to Use

- User shares code and asks for "review" or "feedback"
- User asks "what's wrong with this code"
- User wants to "improve" or "optimize" code
- User asks about "best practices"

## Review Checklist

### 1. Performance

- [ ] Unnecessary re-renders (missing memo, useMemo, useCallback)
- [ ] Large component files (should be < 200 lines)
- [ ] Expensive calculations in render
- [ ] Missing key props in lists
- [ ] Inline function definitions in JSX

### 2. Code Quality

- [ ] Clear naming conventions
- [ ] Single responsibility principle
- [ ] DRY (Don't Repeat Yourself)
- [ ] Proper error handling
- [ ] TypeScript types (if applicable)

### 3. React Patterns

- [ ] Proper state management
- [ ] Correct lifecycle usage (React 16)
- [ ] Props validation (PropTypes)
- [ ] Controlled vs uncontrolled components
- [ ] Event handler naming (handleXxx)

### 4. Testing

- [ ] Component is testable (no hidden dependencies)
- [ ] Business logic extracted for unit testing
- [ ] Data-testid attributes for important elements
- [ ] Mock-friendly API calls

### 5. Security

- [ ] No sensitive data in state/props names
- [ ] No hardcoded credentials
- [ ] XSS prevention (dangerouslySetInnerHTML)
- [ ] Input sanitization

## Review Output Format

```markdown
## Code Review Summary

### ✅ Good Practices

- [List what's done well]

### ⚠️ Suggestions

| Issue   | Location | Suggestion | Priority     |
| ------- | -------- | ---------- | ------------ |
| [Issue] | Line X   | [Fix]      | High/Med/Low |

### 🔴 Critical Issues

- [Security or major bugs]

### 📊 Metrics

- Estimated coverage potential: X%
- Complexity score: Low/Medium/High
- Refactor difficulty: Easy/Medium/Hard

### 🎯 Action Items

1. [First priority fix]
2. [Second priority fix]
3. [Nice to have]
```

## Common Issues & Fixes

### Issue: Inline Functions in JSX

```javascript
// ❌ Bad - creates new function every render
<button onClick={() => handleClick(id)}>Click</button>

// ✅ Good - stable reference
const handleButtonClick = useCallback(() => handleClick(id), [id]);
<button onClick={handleButtonClick}>Click</button>

// ✅ Also Good - data attribute approach
<button data-id={id} onClick={handleClick}>Click</button>
// In handler: const id = e.currentTarget.dataset.id;
```

### Issue: Missing Error Boundaries

```javascript
// ✅ Add error boundary for critical sections
class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError(error) {

From nic611/claude-engineering-kit, MIT.

More from nic611/claude-engineering-kit