reviewing-component-architecture

Auditing React component architecture involves reviewing components for size (keeping them under 300 lines), single responsibility, proper composition patterns, and anti-pattern violations. This Skill evaluates your component tree against these criteria and identifies refactoring opportunities to improve maintainability and performance.

React 19 enforces clear server/client boundaries: use 'use client' directives correctly, fetch data only in Server Components, avoid server components inside client components, and prevent deep prop drilling. This Skill detects boundary violations and helps you structure components according to these rules.

Composition issues include over-sized components, improper Context usage, Web Components convention violations, and heavy prop APIs. This Skill reviews your component architecture systematically to flag these patterns and recommend composition-first refactors.

Refactor when components exceed 300 lines, violate single responsibility, drill props deeply, mix server and client concerns, or ignore composition principles. This Skill helps identify these signals during design reviews and refactoring cycles to guide your architectural decisions.

Yes, this Skill applies to codebases undergoing design reviews, refactors, or architecture decisions. It evaluates component size, boundaries, composition patterns, and anti-patterns, making it ideal for systematic architectural assessment before merging component changes.

Best practices include keeping components small and focused, using composition over prop drilling, placing data fetching in Server Components, correctly applying 'use client' directives, and following Web Components conventions. This Skill enforces these patterns and surfaces violations for targeted refactoring.