maintainable-frontend-styles
Installation
SKILL.md
Maintainable Frontend Styles
优先沿用仓库约定,在已安装 Tailwind 时用 utility class 完成常规组件样式,并把复杂局部规则收敛到与组件同位置的 CSS/SCSS Module。不要用新的抽象替换一个尚未重复的问题,也不要用一个巨型样式文件替代组件边界。
核心原则
| 优先级 | 方案 | 适用范围 |
|---|---|---|
| 1 | Tailwind class | 布局、间距、排版、颜色、边框、响应式、主题及交互状态 |
| 2 | .module.css / .module.scss |
复杂选择器、伪元素、关键帧、内容样式、第三方覆盖或 utilities 明显降低可读性的局部规则 |
| 3 | 全局 CSS | reset、@font-face、主题令牌、Tailwind 入口和真正的全局第三方基础样式 |
| 4 | inline style | 运行期产生且无法静态枚举的值,优先通过 CSS 自定义属性传递 |
把仓库明确规则放在本表之前。发现冲突时说明差异并请求决策,不静默改写项目的样式架构。