component-composition-analyzer

What problem does it solve?

This Skill addresses the complexity and maintainability issues arising from large, monolithic components in front-end development by promoting a more modular and focused component structure.

Core Features & Use Cases

• Identification of Overly Complex Components: Automatically flags components that exceed predefined thresholds for props or line count.
• Component Splitting Guidance: Provides actionable advice on how to break down large components into smaller, single-responsibility units.
• Prop Management Recommendations: Suggests best practices for prop design, favoring composition over excessive flags.
• Use Case: When developing a complex dashboard view with numerous interactive elements and data displays, this Skill can help ensure that each section (e.g., a chart, a data table, a filter panel) is managed as its own component, improving code readability and reusability.

Quick Start

Use the component-composition-analyzer skill to refactor the UserProfileCard component.