web-styling-scss-modules

该技能用于在项目中搭建基于 SCSS Modules 的样式与设计系统，核心是两级令牌体系：核心令牌存放原始 HSL 值与基础尺寸，语义令牌以用途命名并引用核心令牌，组件只消费语义令牌，从而支持换肤而不改组件代码。颜色统一使用无 hsl() 包裹的 HSL 值，应用时再加 hsl() 包裹，派生色用 CSS 原生函数实现，禁止 darken/lighten 等 Sass 颜色函数。组件样式必须包在 @layer components {} 中，应用层样式不加层以获得更高优先级，先导入 layers.scss 声明层级顺序。状态样式用 data-attributes 而非切换 className。暗色模式通过根元素 .dark 类覆盖语义令牌并用 mixin 组织，组件保持主题无关。导入须用 @use，@import 已弃用并将在 Dart Sass 3.0.0 移除。技能包含令牌、主题、cva 集成、模块系统等示例文档，并列出反模式。限制：不适用于无设计系统需求的一次性原型、自带主题的外部组件库（如 Material-UI、Chakra）以及需要完整工具类的项目（应改用 Tailwind CSS）；同时需遵循项目 CLAUDE.md 约定。具体命令与安装方式暂未提供。