What problem does it solve? Angular component files drift in structure across a codebase: decorator property order, import grouping, template method calls, and missing test anchors all diverge without a written rule. This Skill defines how a component file and its template must be arranged so every component in the tree follows the same conventions. ## Core Features & Use Cases - Component file conventions: Mandates element selectors with a tree prefix, block classes on the host via host: { class: ... }, and computed values instead of template method calls. - Test anchor rules: Requires the qa-dataid attribute on every interactive element as the stable anchor for specs, separate from accessibility attributes. - Safe rendering of external content: Directs parsing of outside text into a node tree with a closed markup list and scheme-checked links instead of string interpolation. - Use Case: When editing any *.component.ts and its template, load this rule to check selector shape, host class placement, conditional binding pitfalls, and anchor coverage before committing. ## Quick Start Load the component-structure rule and review my edited component file against its conventions for selectors, host classes, computed values, and qa-dataid anchors.
