Enforces BEM styling conventions, design tokens, and shared layout rules in Angular SCSS.
npx skills add https://github.com/Eyhenij/rt-tools --skill styling-bem-eyhenij
Please help me install this Agent Skill. Skill: styling-bem Source: https://github.com/Eyhenij/rt-tools/tree/main/.claude/skills/styling-bem Command: npx skills add https://github.com/Eyhenij/rt-tools --skill styling-bem-eyhenij
rtBlock, rtElem, and rtMod directives instead of raw class strings, and requires every element class to have its own style rule. - Design token enforcement: Requires --rt-* custom properties instead of hardcoded colors, spacing, and shadows, with composite values taken as whole tokens. - Shared layout layer rules: Directs page, panel, and window layout into the application's shared styles layer rather than per-screen files, with overlay layers opened via the kit dialog service. - Use Case: When editing a component's SCSS or template, load this rule to know which tokens to use, where layout belongs, how overlays and z-index scales work, and which pitfalls (like rtElem without an rtBlock ancestor) crash rendering at runtime. ## Quick Start Load the styling-bem rule before editing any SCSS file or component template in this Angular workspace.High-intent search queries and answers about installing and using this skill.
Use the rtBlock directive on the block element and rtElem on child elements instead of writing class strings. rtElem resolves the block name by injection from the nearest ancestor with rtBlock, so no class names are repeated in the template.
Reference --rt-* custom properties for colors, spacing, and font sizes rather than literal values. Composite values like box-shadow are taken as a whole ready-made token, and a stylelint rule rejects hardcoded colors, paddings, and border widths.
rtElem requires an rtBlock ancestor in the declaring template; without it, rendering fails at runtime while build and lint stay silent. Projected nodes declared in another template also lack the ancestor, so their class must be set via a rule in the shared layout layer.
Declare layout in the application's shared styles layer, such as apps/<app>/src/styles/, not in individual screen component styles. A screen component outside the kit should have an empty styles file by default.
Component styles are scoped by attribute, so nodes moved out to <body> by the kit's dialog or drag services receive no component rules. Declare those styles in the application's shared layer instead.
The check matches by element name only, not by the block-element pair, so a class with a rule under a foreign block passes. Removing a rule for a live class is not checked at all and must be caught by reading the template.
LuccaSAEnforces Lucca Front SCSS conventions for naming, layers, tokens, and component file structure.
matthewharwoodLint CSS files with Stylelint and the Tailwind v4 plugin.
raudyagdelConsolidate Angular 21 patterns for scalable frontend applications.
EIS-ITSApply design tokens and CSS methodologies to style components and optimize production builds.