Does this skill work with dark mode?

Yes, it implements dark mode by applying a '.dark' class to the root element which overrides semantic tokens, keeping components theme-agnostic.

How are CSS Cascade Layers used in this skill?

They are used to wrap UI package components in a specific layer, ensuring that application-level overrides always have higher precedence regardless of selector specificity or loading order.

Why does this skill use HSL format over Hex or RGB?

HSL allows for native CSS color functions and channel manipulation (like transparency) directly in the browser, eliminating the need for deprecated Sass color functions like darken or lighten.

Why use data-attributes for state styling?

Using data-attributes (like [data-state='active']) instead of class toggling provides a more semantic and structured way to handle component states that is easier to manage in modern JS frameworks.

What is a two-tier token system?

It is an architecture where Tier 1 (Core tokens) provides raw values like HSL colors or spacing, and Tier 2 (Semantic tokens) references those values with purpose-driven names like '--color-primary', allowing theme changes without touching component code.

Web Styling & SCSS Design System

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

byagents-inc

•

デザインツール

Implements a robust, two-tier design system using SCSS Modules, CSS Cascade Layers, and HSL-based semantic tokens.

This skill provides a standardized framework for building scalable and maintainable frontend styles within Claude Code. It enforces industry best practices such as a two-tier token architecture (mapping core primitives to semantic tokens), CSS Cascade Layers for predictable style precedence, and HSL color formatting for modern CSS manipulation. By utilizing SCSS Modules and data-attributes for state management, it ensures that components remain theme-agnostic and self-contained, making it ideal for professional UI development and large-scale monorepo projects.

主な機能

01CSS Cascade Layers for predictable style precedence and easier overrides

02HSL-first color system using native CSS functions instead of Sass manipulation

03Class-based dark mode implementation using a centralized mixin pattern

041 GitHub stars

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

06Seamless integration with Class Variance Authority (cva) for SCSS Modules

ユースケース

01Building a themeable UI component library for a large-scale web application

02Standardizing CSS precedence and organization in a complex monorepo

03Implementing a consistent dark mode across multiple frontend modules

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 Layers for predictable style precedence and easier overrides

02HSL-first color system using native CSS functions instead of Sass manipulation

03Class-based dark mode implementation using a centralized mixin pattern

041 GitHub stars

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

06Seamless integration with Class Variance Authority (cva) for SCSS Modules

ユースケース

01Building a themeable UI component library for a large-scale web application

02Standardizing CSS precedence and organization in a complex monorepo

03Implementing a consistent dark mode across multiple frontend modules

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