Component Composition Patterns

When to Activate This Skill

Activate this skill whenever you are:

• Creating reusable components that will be used in multiple contexts with different styling
• Building a generic base component and specific wrapper components around it
• Implementing configuration-driven component behavior
• Separating presentation logic from styling/theming logic
• Creating components that follow the composition pattern (generic + wrappers)

The Composition Pattern

This pattern separates concerns into three layers:

1. Generic Base Component — Pure presentation, no styling decisions
2. Wrapper Components — Domain-specific styling and configuration
3. Configuration Files — Type definitions and styling mappings