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

No, this skill enforces modern CSS color functions with HSL values. This allows for runtime color manipulation and better integration with CSS variables for theming.

Why should I use semantic tokens instead of core tokens?

Semantic tokens provide meaning (e.g., --color-background) rather than just a value, allowing you to change themes or brand colors globally without updating individual component code.

Why does this skill require CSS Cascade Layers?

Layers like @layer components ensure that UI package styles have predictable precedence, allowing app-specific overrides to work reliably without high-specificity selectors.

How is dark mode handled by this skill?

It utilizes a .dark class on the root element which overrides semantic token values. Components remain theme-agnostic as they only reference the semantic tokens.

Why is @use preferred over @import in SCSS?

Sass has deprecated @import in favor of @use to provide better encapsulation, prevent namespace collisions, and ensure compatibility with future Sass versions.

Web Styling & SCSS Modules

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

byagents-inc

•

デザインツール

Implements a professional design system using SCSS Modules, two-tier token architectures, and CSS Cascade Layers for predictable frontend styling.

This skill provides a comprehensive framework for building scalable, maintainable design systems within Claude Code. It enforces a strict two-tier token architecture (Core primitives to Semantic tokens) to ensure components remain theme-agnostic, utilizes HSL-based color management for modern CSS manipulation, and leverages CSS Cascade Layers to eliminate specificity conflicts. By standardizing on these patterns, developers can easily implement dark mode, manage complex state styling with data-attributes, and maintain a consistent visual language across large-scale web applications without external CSS dependencies.

主な機能

01Two-tier design token system for theme-agnostic components

02Modern SCSS module patterns using @use and @forward syntax

03HSL color management using native CSS functions instead of Sass

04Dark mode implementation via .dark class and semantic overrides

051 GitHub stars

06CSS Cascade Layering (@layer) for predictable style precedence

ユースケース

01Building a reusable UI library with strict design token governance

02Implementing a robust, class-based dark mode system

03Standardizing styling patterns and CSS precedence across a monorepo

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 design token system for theme-agnostic components

02Modern SCSS module patterns using @use and @forward syntax

03HSL color management using native CSS functions instead of Sass

04Dark mode implementation via .dark class and semantic overrides

051 GitHub stars

06CSS Cascade Layering (@layer) for predictable style precedence

ユースケース

01Building a reusable UI library with strict design token governance

02Implementing a robust, class-based dark mode system

03Standardizing styling patterns and CSS precedence across a monorepo

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