43 lines
1.6 KiB
Markdown
43 lines
1.6 KiB
Markdown
---
|
|
name: reviewing-component-architecture
|
|
description: Review component architecture for React 19 best practices including size, composition, Server/Client boundaries, and anti-patterns. Use when reviewing component design.
|
|
review: true
|
|
allowed-tools: Read, Grep, Glob
|
|
version: 1.0.0
|
|
---
|
|
|
|
# Review: Component Architecture
|
|
|
|
## Review Checklist
|
|
|
|
### Component Size
|
|
- [ ] Components under 300 lines (break into smaller pieces)
|
|
- [ ] Single responsibility per component
|
|
- [ ] No "god components" handling multiple concerns
|
|
|
|
### Server vs Client Boundaries
|
|
- [ ] `'use client'` only where needed (hooks, events, browser APIs)
|
|
- [ ] Most components are Server Components (smaller bundle)
|
|
- [ ] Data fetching in Server Components
|
|
- [ ] No Server Components imported in Client Components
|
|
|
|
### Composition Patterns
|
|
- [ ] Using children prop appropriately
|
|
- [ ] Compound components for coordinated behavior
|
|
- [ ] No excessive prop drilling (use Context)
|
|
- [ ] Composition preferred over complex prop APIs
|
|
|
|
### Custom Elements
|
|
- [ ] Web Components used correctly (no ref workarounds in React 19)
|
|
- [ ] Custom events use `on + EventName` convention
|
|
- [ ] Properties vs attributes handled by React
|
|
|
|
### Anti-Patterns to Flag
|
|
- [ ] ❌ God components (> 300 lines, multiple responsibilities)
|
|
- [ ] ❌ Unnecessary `'use client'` (no hooks/events/browser APIs)
|
|
- [ ] ❌ Deep prop drilling (3+ levels without Context)
|
|
- [ ] ❌ Server Components in Client Components
|
|
- [ ] ❌ Complex component hierarchies (hard to follow)
|
|
|
|
For comprehensive component patterns, see: `research/react-19-comprehensive.md`.
|