What problem does it solve? When editing the styles of a kit component or the public site, developers often break conventions by hardcoding colors, misplacing layout rules, or fighting kit defaults with !important. This Skill enforces the project's BEM styling pattern so component styles stay consistent, token-driven, and override-safe. ## Core Features & Use Cases - :host block structure: Defines how the host carries the block class, how elements nest inside it, and how modifiers are written with &--<name> or class bindings. - Token-only values: Enforces that all colors, shadows, radii, and fonts come from --<prefix>-* CSS custom properties, forbidding raw hex values and SCSS variables. - Kit default overrides: Explains how to override ViewEncapsulation.None kit styles using descendant selectors instead of !important. - Use Case: While restyling a badge component in @rt-tools/ui-kit-v2, load this Skill to write the :host block, apply --<prefix>-color-* tokens, and override a kit default without breaking specificity rules. ## Quick Start Load the styling-bem-component pattern and restyle this kit component's SCSS following the BEM and design-token conventions.
