What problem does it solve? Screens that each declare their own layout styles drift apart visually — the same page title ends up in eleven components at three different font sizes. This Skill enforces a pattern where layout is declared once in the application's shared style layer and screens only apply it via BEM directives. ## Core Features & Use Cases - Shared layout blocks: Apply predefined blocks like <prefix>-page, <prefix>-form, <prefix>-panel, <prefix>-window, and <prefix>-site-page to section screens, forms, panels, and modal dialogs. - BEM markup via directives: Use rtBlock at the template root and rtElem on child elements so class names are generated consistently without hand-written BEM strings. - Foreign subtree elements: Combine rtBlock and rtElem on one element to place your own element inside another block's subtree. - Use Case: When building a bookings admin screen, set host: { class: '<prefix>-page' }, wrap the template in <ng-container rtBlock="<prefix>-page">, and mark up the header, title, and hint with rtElem — no layout CSS in the screen's style file. ## Quick Start Ask the AI to assemble a new section screen or form using the shared layout layer with rtBlock and rtElem instead of writing layout styles in the component's style file.
