AgentSkillsCN

reviewing-component-architecture

审查 React 19 最佳实践中的组件架构，包括组件大小、组合方式、服务器与客户端的边界以及反模式。在审查组件设计时使用。

SKILL.md
--- frontmatter
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.