review-component-architecture

What problem does it solve?

Ensuring React component architecture follows best practices for size, composition, and Server/Client boundaries is critical for maintainability, performance, and scalability. This Skill streamlines the review process.

Core Features & Use Cases

• Component Size: Checks for overly large components and promotes single responsibility.
• Server vs Client Boundaries: Verifies correct 'use client' placement, data fetching, and composition between component types.
• Composition Patterns: Audits the use of children prop, compound components, and appropriate Context usage to avoid prop drilling.
• Custom Elements Support: Reviews correct integration of Web Components in React 19.
• Anti-Pattern Flagging: Identifies "god components," unnecessary client boundaries, deep prop drilling, and complex hierarchies.
• Use Case: Perform an architectural review of the Dashboard feature, focusing on component size, Server/Client boundaries, and composition patterns to ensure it's maintainable and performant.

Quick Start

Review the src/components/UserDashboard.js file for React 19 component architecture anti-patterns, such as excessive size or incorrect Server/Client boundaries.