Why use HSL instead of hex or RGB colors?

HSL allows for easier color manipulation using native CSS functions and simplifies semantic token management by making it easy to adjust lightness and transparency dynamically.

What is the benefit of using CSS Cascade Layers?

Cascade Layers provide explicit control over style precedence, ensuring that UI package styles have lower priority than application-specific overrides regardless of selector specificity.

Are Sass @import rules supported?

No, this skill enforces the use of modern @use and @forward syntax because @import is deprecated in Dart Sass and will be removed in future versions.

Does this skill require external CSS libraries?

No, this skill is designed to be completely self-contained, avoiding dependencies like Tailwind or Bootstrap to ensure maximum control and minimal bundle size.

How does this skill handle Dark Mode?

It implements dark mode via a .dark class on the root element which overrides Tier 2 semantic tokens, allowing components to adapt automatically without internal theme logic.

Web Styling & Design System

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

byagents-inc

•

디자인 도구

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

This skill provides a comprehensive framework for building scalable, maintainable web interfaces using modern CSS and SCSS patterns. It enforces a strict two-tier token architecture where core primitives are mapped to semantic tokens, ensuring components remain theme-agnostic and easy to update. By leveraging CSS Cascade Layers, HSL color functions, and data-attribute state management, it creates a robust styling foundation that eliminates specificity wars and external dependencies while natively supporting dark mode and complex component variants.

주요 기능

01Two-tier token architecture separating core primitives from semantic intent

02CSS Cascade Layers for predictable style precedence across monorepos

03Native HSL color system for dynamic transparency and color manipulation

04Class-based Dark Mode implementation using semantic token overrides

051 GitHub stars

06Modern Sass module system integration using @use and @forward patterns

사용 사례

01Building a multi-theme design system that supports instant light and dark mode switching

02Implementing high-performance UI components with SCSS Modules and CVA integration

03Scaling frontend styles in a monorepo using Cascade Layers to manage precedence

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 separating core primitives from semantic intent

02CSS Cascade Layers for predictable style precedence across monorepos

03Native HSL color system for dynamic transparency and color manipulation

04Class-based Dark Mode implementation using semantic token overrides

051 GitHub stars

06Modern Sass module system integration using @use and @forward patterns

사용 사례

01Building a multi-theme design system that supports instant light and dark mode switching

02Implementing high-performance UI components with SCSS Modules and CVA integration

03Scaling frontend styles in a monorepo using Cascade Layers to manage precedence

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