Enforces SCSS conventions with CSS variables, Layer__ BEM naming, and stylelint property ordering.
npx skills add https://github.com/Layer-Fi/layer-react --skill styling-layer-fi
Please help me install this Agent Skill. Skill: styling Source: https://github.com/Layer-Fi/layer-react/tree/main/src/styles Command: npx skills add https://github.com/Layer-Fi/layer-react --skill styling-layer-fi
variables.scss custom properties, keeping consumer theming via --color-dark-*/--color-light-* HSL overrides intact. - Naming and nesting conventions: Flat, greppable Layer__Block__Element--Modifier selectors with nesting reserved only for modifiers, pseudo-classes, and media queries. - Use Case: When adding a new component stylesheet, follow the colocation rule (ComponentName.tsx imports componentName.scss as the last import) and write declarations in the stylelint-enforced property order so npm run lint:stylelint passes on commit. ## Quick Start Write the SCSS for my new component following the styling conventions in this skill, using only design tokens and flat Layer__ BEM selectors.High-intent search queries and answers about installing and using this skill.
Use the Layer__Block__Element--Modifier pattern with PascalCase for each part, such as Layer__FileThumb__Actions--Floating. Primitives use a Layer__UI__ prefix, and every block and element gets its own flat top-level selector so the full name is greppable.
Create a camelCase stylesheet next to the component and import it as a side effect with import './componentName.scss' as the last import in the file. Use only variables from variables.scss for colors, spacing, and typography.
No. Inline style props, utility class strings, and class names built by concatenation are all prohibited. Prefer Stack or Span props for simple layout and typography, and use data-* attribute selectors for variants.
Design tokens are declared on root classes like .Layer__component, .Layer__Portal, and .Layer__view. Anything rendered outside that tree, such as a portal or bare primitive, needs one of those classes on an ancestor or the variables resolve to nothing.
Nesting is only for modifiers of the current selector: attribute selectors, pseudo-classes, pseudo-elements, and media queries. Never nest elements under their block with &__ because the resulting class name would not appear in the file.
TheBushidoCollectiveStyle React Native components with StyleSheet, Flexbox, and platform-aware design.
NostoAutomate repository validation and commit hygiene with lint, typecheck, tests, and conventional commits.
awardsappRefactor styled compound components into wrappers using Base.Root and data-* attributes.
EIS-ITSApply design tokens and CSS methodologies to style components and optimize production builds.