feature-composition

What problem does it solve?

New frontend features often become entangled across folders, causing poor encapsulation, prop-drilling, duplicated state logic, and hard-to-maintain code. This Skill prescribes a composition pattern that keeps a feature self-contained with a smart container, focused sub-components, an optional feature state service, and dedicated routes so features remain isolated, testable, and lazy-loadable.

Core Features & Use Cases

• Single-folder feature roots: Everything for the feature lives under src/core/pages/dashboard/<feature-name>/ to avoid leakage into global folders.
• Smart container vs sub-components: The container handles data loading, navigation, and provides the feature state service while sub-components focus on presentation and inject state directly when needed.
• Routing and lazy loading: Register features with loadComponent or loadChildren and protect them with feature guards for on-demand loading and route-level control.
• Styling and performance rules: Use Tailwind only, adhere to ChangeDetectionStrategy.OnPush, and keep component files small (~150 lines) to maintain clarity and performance.
• Use case: Add a multi-step create-product flow that provides a CreateProductStateService to nested components, lazy-loads the route, and keeps all assets and tests inside the feature folder.

Quick Start

Create a new feature folder under src/core/pages/dashboard/<feature-name> and implement a smart container, focused sub-components, an optional feature state service, and a lazy-loaded route following the composition rules.