gh-djankies-claude-configs-react-19/skills/reviewing-component-architecture/SKILL.md

name, description, review, allowed-tools, version

name	description	review	allowed-tools	version
reviewing-component-architecture	Review component architecture for React 19 best practices including size, composition, Server/Client boundaries, and anti-patterns. Use when reviewing component design.	true	Read, Grep, Glob	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.