Why does this skill prioritize HSL over Sass color functions?

Using HSL with CSS variables allows for native browser color manipulation (like transparency and mixing) without needing to re-compile Sass, making it perfect for dynamic runtime theming.

Why should I wrap component styles in CSS Cascade Layers?

Wrapping UI styles in @layer components ensures they have lower precedence than application-specific overrides, effectively ending 'specificity wars' and making styles more predictable across a monorepo.

What is the benefit of a two-tier token system?

It decouples raw values (Core) from their application (Semantic). This means you can update a brand color in one place without touching component code, and components stay 'semantic' regarding their purpose.

Can I use this with external libraries like Tailwind?

While this skill is designed for a self-contained SCSS architecture, its philosophy of semantic tokens and HSL values can be adapted. However, it is primarily intended as a structured alternative to utility-first frameworks.

Web Styling & SCSS Modules

Name: Web Styling & SCSS Modules
Author: agents-inc

byagents-inc

0•

デザインツール

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

This skill provides a comprehensive framework for building modern, themeable design systems within Claude Code. It enforces a two-tier token architecture that separates core primitives from semantic tokens, ensuring that components remain theme-agnostic. By utilizing HSL color formats, native CSS color functions, and CSS Cascade Layers, it enables predictable style precedence and seamless dark mode integration. It is ideal for developers building professional web interfaces who require strict design system adherence and maintainable SCSS Module structures without relying on external utility-first frameworks.

主な機能

01Two-tier token architecture (Core primitives to Semantic tokens)

020 GitHub stars

03CSS Cascade Layers for predictable style precedence and overrides

04Modern Sass support using @use and @forward module systems

05Dark mode implementation via class-based semantic overrides

06HSL-based color system with native CSS color functions

ユースケース

01Implementing a standardized dark mode system across a large-scale web application

02Creating a white-label component library with swappable themes

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

主な機能

01Two-tier token architecture (Core primitives to Semantic tokens)

020 GitHub stars

03CSS Cascade Layers for predictable style precedence and overrides

04Modern Sass support using @use and @forward module systems

05Dark mode implementation via class-based semantic overrides

06HSL-based color system with native CSS color functions

ユースケース

01Implementing a standardized dark mode system across a large-scale web application

02Creating a white-label component library with swappable themes

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