css

Enforcing consistent CSS rules requires standardizing selector composition and class naming. This Skill applies strict conventions like camelCase class names and restricted nesting using & for pseudo-classes to ensure high-quality, compatible CSS output across modules and CSS-in-JS.

Correct CSS nesting uses the & operator for pseudo-classes and pseudo-elements, along with nested @media blocks. This prevents fragile selector structures by prohibiting descendant nesting and root tag selectors, ensuring modern syntax compatibility.

Writing styled-components with strict conventions involves applying quality bars to template-literal styles. This Skill enforces correct selector rules and naming restrictions across CSS-in-JS libraries like Emotion, vanilla-extract, and Stitches to prevent inconsistent styling patterns.

Descendant nesting creates fragile selector structures because it generates overly specific CSS rules. Prohibiting root tag selectors and enforcing nesting only via & ensures that CSS Modules remain modular, predictable, and compatible with modern CSS-in-JS approaches.

Modern CSS features like :has() and nested @media blocks are fully supported. This Skill encourages correct selector composition and modern syntax, allowing you to create component styles and theme files while maintaining strict authoring rules.

This approach works across plain CSS, CSS Modules, and CSS-in-JS libraries including vanilla-extract and Stitches. It applies the same strict quality bar to global stylesheets, component styles, and inline style blocks embedded in TypeScript or JavaScript files.