What problem does it solve? Angular components drift into inconsistent shapes across a codebase: decorator properties in random order, ungrouped imports, wrapper divs that duplicate :host layout, and missing test anchors. This Skill defines a single canonical structure for every *.component.ts file so reviews and refactors stay predictable. ## Core Features & Use Cases - Decorator property order: Mandates selector, templateUrl, styleUrl (singular), changeDetection OnPush, grouped imports, providers, and host bindings in a fixed sequence. - Import grouping: Requires labeled groups in the imports array — // angular, // rt-tools, // components, // directives, // pipes. - Template conventions: Self-closing tags, no redundant wrappers, conditional bindings instead of duplicated components in @if branches, and router-based fragment scrolling. - qa-dataid anchors: Every interactive element carries a kebab-case qa-dataid unique within the screen, with qa-skip for decorative elements and rules for component vs directive hosts. - Use Case: When creating a new calendar component, apply this pattern to produce the decorator skeleton, signal-based class fields (input.required, output, viewChild, computed), and a template with proper qa-dataid anchors ready for end-to-end tests. ## Quick Start Ask the AI to create or refactor an Angular component following the component-structure pattern with ordered decorator properties, grouped imports, and qa-dataid anchors on interactive elements.
