What problem does it solve? Editing a UI kit's SCSS without knowing the repository's own conventions leads to silent defects: media query thresholds that diverge from the breakpoints service, hardcoded values that bypass design tokens, state styles that lose to styling variants, and rules placed outside the cascade layer that consumers cannot override. This Skill supplies the tree-specific styling rules that generic BEM guidance cannot cover. ## Core Features & Use Cases - Token and theme governance: Rules for design tokens, component-level custom properties (--rt-<block>-<what>), dark theme ordering, styling presets, and contrast thresholds across all four looks. - Cascade layer discipline: Requirements for wrapping component styles in rt-kit.components, declaring sublayer order in advance, and marking deliberate layer escapes with rt-layer-outside. - Responsive threshold consistency: Guidance on keeping the narrow-screen media query aligned with the breakpoints service and choosing the right threshold kind for snapshot tests. - Use Case: When editing a component's *.scss in the rt-tools workspace, apply this Skill together with the styling-bem rule so checks like pnpm run check:tokens-styles and pnpm run check:cascade-layer pass and visual regressions are avoided. ## Quick Start Ask the AI to review or edit a kit component's SCSS file while applying the rt-tools-styling rules together with the styling-bem rule.
