Frontend Components Standards

What problem does it solve?

This Skill tackles the problem of monolithic, hard-to-maintain UI components that lack reusability, leading to inconsistent user interfaces, slower development, and increased technical debt. It promotes a modular approach to UI development.

Core Features & Use Cases

• Single Responsibility Principle: Guides on building small, focused components that each do one thing well, making them easier to understand, test, and maintain.
• Composition Over Configuration: Encourages combining simpler components to build complex UIs, reducing the need for excessive props and improving flexibility.
• Clear Interfaces & Documentation: Enforces explicit prop types (e.g., TypeScript interfaces) and comprehensive documentation for component APIs, facilitating team collaboration and adoption.
• Use Case: When building a new dashboard, use this skill to design individual components like UserCard, ChartWidget, and FilterPanel as self-contained, reusable units, then compose them into the final dashboard layout.

Quick Start

Apply the Frontend Components Standards skill to refactor the 'UserProfile' component, splitting it into 'ProfileDisplay' and 'EditForm' components, and ensuring clear prop types for each.