Is this compatible with modern Sass standards?

Yes, this skill strictly enforces the use of @use and @forward, as the old @import syntax is deprecated and scheduled for removal in future Sass versions.

What is the benefit of using CSS Cascade Layers (@layer)?

Cascade Layers provide a predictable way to manage style precedence, ensuring that UI package components have lower priority than app-specific overrides regardless of selector specificity.

Why use data-attributes instead of class toggling for state?

Data-attributes offer a more semantic and standardized way to style states like 'loading' or 'active', making the CSS more readable and easier to integrate with JavaScript logic.

Why use HSL instead of hex or RGB in this system?

HSL allows for native CSS color manipulation, such as transparency and brightness adjustments, directly in the browser without relying on deprecated Sass color functions.

How does the two-tier token system improve maintenance?

By separating core values (raw colors) from semantic tokens (purpose), you can update your entire brand theme by changing token mappings without ever touching individual component code.

SCSS Modules & Design Systems

Name: SCSS Modules & Design Systems
Author: agents-inc

byagents-inc

0•

デザインツール

Implements a scalable, two-tier design system using SCSS Modules, HSL tokens, and CSS Cascade Layers for predictable styling.

This skill provides a robust framework for building themeable, maintainable UI components using modern SCSS patterns. It enforces a strict two-tier token architecture that maps core primitives to semantic names, leverages CSS Cascade Layers to prevent specificity wars, and utilizes HSL color formats for native CSS manipulation. It is specifically designed for developers building professional design systems that require dark mode support, predictable style precedence, and self-contained component logic without relying on external utility-first CSS frameworks.

主な機能

01CSS Cascade Layer implementation for predictable style precedence across monorepos

02Automated dark mode integration using a root-class mixin pattern

03Data-attribute-driven state styling for cleaner component logic and consistency

04Two-tier token architecture mapping core primitives to semantic purpose-driven names

050 GitHub stars

06Native HSL color formatting for dynamic manipulation via CSS functions instead of Sass

ユースケース

01Refactoring legacy SCSS to modern standards using CSS Cascade Layers and @use modules

02Implementing a themeable UI library with seamless light and dark mode transitions

03Building a custom, self-contained design system from scratch without external dependencies

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-styling-scss-modules

For use in Claude.ai and ChatGPT

主な機能

01CSS Cascade Layer implementation for predictable style precedence across monorepos

02Automated dark mode integration using a root-class mixin pattern

03Data-attribute-driven state styling for cleaner component logic and consistency

04Two-tier token architecture mapping core primitives to semantic purpose-driven names

050 GitHub stars

06Native HSL color formatting for dynamic manipulation via CSS functions instead of Sass

ユースケース

01Refactoring legacy SCSS to modern standards using CSS Cascade Layers and @use modules

02Implementing a themeable UI library with seamless light and dark mode transitions

03Building a custom, self-contained design system from scratch without external dependencies