component-design-reviewer

Component design review analyzes React components against five core principles: Single Responsibility Principle, props interface design, composition patterns, reusability, and custom hooks usage. Run the review on target components to generate a prioritized list of improvements categorized by severity.

SRP for React components means each component should have one reason to change—either UI rendering or business logic, not both. This Skill checks that components separate concerns, keeping presentational logic distinct from state management and data fetching.

Props design review evaluates drilling depth, default prop usage, and interface clarity. The Skill identifies excessive prop drilling, suggests composition patterns like compound components, and recommends extracting related props into objects to simplify component contracts.

Custom hooks should encapsulate reusable business logic, state management, or side effects that multiple components share. This Skill detects logic that repeats across components and suggests hook extraction, reducing duplication and improving testability.

Yes, this Skill applies to React projects and component trees of any size. It performs automated checks using read, grep, and glob operations to analyze your components without requiring modifications to your codebase or build setup.

Composition means building components by combining smaller, focused components; inheritance couples components tightly through class hierarchies. This Skill recommends composition patterns like compound components and render props over inheritance for better flexibility and reuse.