Can I use Sass color functions like lighten() or darken()?

No, this skill enforces modern CSS standards and recommends using CSS color-mix or relative color syntax to ensure theme-agnostic behavior and native browser support.

What are CSS Cascade Layers used for in this system?

Cascade Layers ensure that design system component styles have predictable precedence, allowing application-level overrides to work reliably without high-specificity selector wars.

How is dark mode handled?

Dark mode is implemented by applying a .dark class to the root element, which redefines the values of semantic tokens while keeping the component logic unchanged.

Why use @use instead of @import?

The @import rule is deprecated in modern Dart Sass; @use provides better namespacing, prevents global scope pollution, and ensures styles are only compiled once.

Why does this skill use HSL instead of HEX or RGB?

HSL allows for better manipulation using native CSS color functions and provides a consistent way to handle transparency and channel adjustments without Sass-specific dependencies.

SCSS Modules & Design System

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

byagents-inc

•

设计工具

Implements a robust, two-tier design token system using SCSS Modules and CSS Cascade Layers for scalable web styling.

This skill provides a comprehensive framework for building professional-grade design systems within Claude Code. It emphasizes a two-tier token architecture that separates core primitives from semantic definitions, ensuring that components remain theme-agnostic and easy to maintain. By leveraging modern HSL color formats, CSS Cascade Layers for predictable precedence, and SCSS Modules, it allows developers to build consistent, high-performance UIs with native dark mode support and zero external utility-first dependencies.

主要功能

01Two-tier token architecture mapping core primitives to semantic tokens

02Standardized SCSS Module patterns with CVA (Class Variance Authority) integration

035 GitHub stars

04Native dark mode implementation via root class and semantic token overrides

05HSL-based color system utilizing modern CSS color functions

06CSS Cascade Layers for predictable style precedence across monorepos

使用场景

01Implementing consistent dark mode and brand theming across multiple frontend packages

02Building a custom, themeable UI library for large-scale enterprise applications

03Refactoring legacy CSS into a modern, layered SCSS architecture with proper namespacing

主要功能

01Two-tier token architecture mapping core primitives to semantic tokens

02Standardized SCSS Module patterns with CVA (Class Variance Authority) integration

035 GitHub stars

04Native dark mode implementation via root class and semantic token overrides

05HSL-based color system utilizing modern CSS color functions

06CSS Cascade Layers for predictable style precedence across monorepos

使用场景

01Implementing consistent dark mode and brand theming across multiple frontend packages

02Building a custom, themeable UI library for large-scale enterprise applications

03Refactoring legacy CSS into a modern, layered SCSS architecture with proper namespacing