What is the purpose of the two-tier token system?

Tier 1 (Core) defines raw values like specific grays or reds. Tier 2 (Semantic) gives those values meaning, such as 'background-base' or 'primary'. This allows you to change the entire look of an app by updating tokens without touching component code.

How do CSS Cascade Layers help with styling?

Cascade Layers allow you to group styles into layers like 'reset' or 'components'. This ensures that component styles always have lower precedence than application-level overrides, preventing specificity wars.

Why use raw HSL values in tokens instead of hex codes?

Storing raw HSL values allows you to use native CSS color functions to adjust transparency or manipulate channels directly in the browser, bypassing the need for deprecated Sass color functions.

Why is @import discouraged in this skill?

The @import rule is deprecated in modern Sass (Dart Sass) and will be removed in version 3.0.0. This skill enforces the use of @use and @forward for better encapsulation and performance.

Web Styling & Design System (SCSS Modules)

Name: Web Styling & Design System (SCSS Modules)
Author: agents-inc

byagents-inc

0•

デザインツール

Implements a structured, two-tier design system using SCSS Modules, CSS Cascade Layers, and semantic HSL tokens for scalable frontend development.

This skill provides a comprehensive framework for building maintainable design systems within Claude Code by enforcing industry-standard CSS and Sass patterns. It utilizes a two-tier token architecture where core primitives map to semantic tokens, ensuring that UI components remain theme-agnostic. By leveraging modern CSS features like Cascade Layers (@layer) for predictable specificity and HSL color functions for dynamic theming, this skill enables developers to create robust, dark-mode-ready interfaces without external library dependencies.

主な機能

01Class-based dark mode theming via semantic token overrides

02Native HSL color system optimized for modern CSS color functions

03Modern Sass module system implementation using @use and @forward

04Predictable style precedence using CSS Cascade Layers (@layer) for UI packages

050 GitHub stars

06Two-tier token architecture decoupling design primitives from semantic usage

ユースケース

01Building a consistent, themeable component library for large-scale applications

02Implementing dark mode and high-contrast themes using semantic tokens

03Managing complex CSS specificity in monorepos using Cascade Layers

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

Download Skill