name: css-development-validate description: 此技能应用于审查或审计现有CSS代码是否符合既定模式。触发词包括“review CSS”、“audit styles”、“check CSS”、“validate stylesheet”、“CSS review”。检查语义化命名、深色模式覆盖、Tailwind使用情况和测试覆盖率。

CSS开发：验证

概述

根据既定模式审查现有CSS代码，并提供具体、可操作的反馈：

语义化命名规范
Tailwind @apply 组合
深色模式变体覆盖
测试覆盖率（静态 + 渲染）
文档质量
组合优化机会

这是 css-development 的子技能 - 通常通过主技能自动调用。

适用场景

在以下情况使用：

审查现有CSS代码
审计组件样式一致性
检查是否遵循模式
合并CSS更改之前
重构准备（先识别问题）

模式参考

此技能根据主 css-development 技能中记录的模式进行验证：

语义化命名： .button-primary 而非 .btn-blue Tailwind组合： 使用 @apply 组合工具类 深色模式： 包含 dark: 变体 测试覆盖率： 静态CSS + 组件渲染测试 文档： 类上方的使用注释

工作流程

当此技能被调用时，创建一个TodoWrite清单并系统性地进行验证。

宣布使用

“我正在使用 css-development:validate 技能，根据既定模式审查此CSS。”

创建TodoWrite清单

使用TodoWrite工具：

验证CSS：
- [ ] 读取CSS文件（加载components.css及相关样式）
- [ ] 检查语义化命名（验证描述性类名）
- [ ] 验证@apply使用（确保Tailwind组合）
- [ ] 检查深色模式覆盖（确认存在dark:变体）
- [ ] 寻找组合优化机会（识别可重用模式）
- [ ] 验证测试覆盖率（检查是否存在静态和渲染测试）
- [ ] 检查文档（确保存在使用注释）
- [ ] 报告发现（提供文件:行号引用和建议）

验证清单详情

步骤1：读取CSS文件

操作： 使用Read工具加载待审查的CSS文件

需检查的文件：

styles/components.css（主要语义化组件）
提到的任何组件特定CSS文件
组件文件中的内联样式（如果适用）

需捕获的内容：

所有类定义
@apply 与内联工具类的使用情况
深色模式变体的存在
文档注释

当文件加载并理解后标记为完成。

步骤2：检查语义化命名

操作： 审查所有类名是否具有语义化、描述性的命名

良好模式：

.button-primary、.card-header、.form-field、.empty-state
上下文 + 组件：.session-card、.marketing-hero
基础 + 变体：.badge-success、.button-danger

不良模式（报告这些）：

工具类名称：.btn-blue、.card-sm、.text-big
缩写：.btn、.hdr、.desc
通用：.component、.item、.thing
随机：.style1、.custom、.special

对于每个问题：

记录文件和行号
显示有问题的类名
根据使用上下文建议语义化替代方案

当所有类名审查完毕后标记为完成。

步骤3：验证@apply使用

操作： 检查Tailwind工具类是否通过 @apply 组合，而不是分散在标记中

良好模式：

.button-primary {
  @apply bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg;
}

不良模式（报告这些）：

<!-- 标记中的工具类而非语义化类 -->
<button class="bg-indigo-500 hover:bg-indigo-700 px-6 py-3 rounded-lg">
  点击我
</button>

检查：

工具类是否通过 @apply 组合到语义化类中？
标记中是否存在应被提取的重复工具类组合？
组件中是否实际使用了语义化类？

对于每个问题：

显示有问题的标记或CSS
解释为何应使用 @apply
建议提取到语义化类

当@apply使用情况审查完毕后标记为完成。

步骤4：检查深色模式覆盖

操作： 验证彩色和交互元素具有 dark: 变体

需要深色模式的元素：

背景颜色（bg-*）
文本颜色（text-*）
边框颜色（border-*）
交互状态（hover, focus）
影响可见性的阴影

通常不需要深色模式的元素：

间距工具类（p-, m-, gap-*）
布局工具类（flex, grid等）
纯结构样式

需检查的模式：

/* 良好 - 有深色模式 */
.card {
  @apply bg-white dark:bg-gray-800 text-gray-900 dark:text-white;
}

/* 不良 - 缺少深色模式 */
.card {
  @apply bg-white text-gray-900;
}

对于每个问题：

记录缺少深色模式变体的类
显示当前CSS
建议添加特定的 dark: 工具类

当深色模式覆盖检查完毕后标记为完成。

步骤5：寻找组合优化机会

操作： 识别可重用现有类或应被提取的重复模式

寻找：

多个类中重复的相同工具类组合
可共享基础类的相似模式
可引用语义化类的内联工具类

问题示例：

/* 重复模式 */
.card-primary {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

.card-secondary {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
  @apply border-2 border-gray-200;
}

/* 建议：提取基础 .card 类，添加变体 */
.card {
  @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6;
}

.card-secondary {
  @apply border-2 border-gray-200;
}

对于每个机会：

显示重复模式
建议基础类 + 组合
评估影响（多少地方受益）

当组合优化机会识别完毕后标记为完成。

步骤6：验证测试覆盖率

操作： 检查CSS类是否具有测试覆盖

静态CSS测试 - 检查 styles/__tests__/components.test.ts：

it('应该包含 button-primary 类', () => {
  expect(content).toContain('.button-primary');
});

组件渲染测试 - 检查组件测试文件：

it('应用 button-primary 类', () => {
  render(<Button variant="primary">点击</Button>);
  expect(screen.getByRole('button')).toHaveClass('button-primary');
});

对于没有测试的类：

列出类名
记录缺少哪种测试（静态、渲染或两者）
提供要添加的测试模板

当测试覆盖率检查完毕后标记为完成。

步骤7：检查文档

操作： 验证组件具有使用文档

必需文档：

CSS类上方的注释，解释用途
注释中的使用示例

示例：

/* 按钮组件 - 具有悬停提升效果的主要操作按钮
   用法：<button className="button-primary">点击我</button> */
.button-primary {
  ...
}

对于没有文档的类：

列出类名和位置
根据类用途建议添加的文档

当文档检查完毕后标记为完成。

步骤8：报告发现

操作： 将所有发现编译成结构化报告

报告格式：

## CSS验证报告

### ✅ 发现的良好模式

- `.button-primary` 遵循语义化命名（components.css:15）
- 交互元素上存在深色模式变体（components.css:17-19）
- 测试覆盖了className应用（Button.test.tsx:23）
- 存在文档注释（components.css:14）

### ⚠️ 发现的问题

#### 语义化命名问题

**components.css:45** - `.btn-blue` 使用工具类命名
- 当前：`.btn-blue`
- 建议：重命名为 `.button-secondary` 以与 `.button-primary` 保持一致
- 影响：更新3个组件文件

**components.css:67** - `.card-sm` 在名称中使用尺寸
- 当前：`.card-sm`
- 建议：将尺寸提取为工具类或重命名为 `.card-compact` 以获得语义含义
- 影响：更新5个使用处

#### 缺少深色模式变体

**components.css:78** - `.card-header` 缺少深色模式
- 当前：`@apply bg-gray-100 text-gray-900`
- 建议：添加 `dark:bg-gray-800 dark:text-white`
- 影响：深色模式下的视觉错误

**components.css:92** - `.badge` 缺少深色模式
- 当前：`@apply bg-indigo-100 text-indigo-800`
- 建议：添加 `dark:bg-indigo-900 dark:text-indigo-200`
- 影响：深色模式下对比度低

#### 缺少测试覆盖

**components.css:102** - `.empty-state` 没有测试
- 缺少：静态CSS测试和组件渲染测试
- 建议：添加测试以验证类存在并正确渲染

#### 缺少文档

**components.css:115** - `.session-card` 缺少使用注释
- 建议：添加解释用途和使用示例的注释

### 📊 总结

- **审查的总类数：** 12
- **发现的问题数：** 7
- **优先级：** 2个高（深色模式错误），3个中（命名），2个低（文档）

### 🎯 推荐操作

1. **高优先级：** 为 `.card-header` 和 `.badge` 添加深色模式变体（视觉错误）
2. **中优先级：** 将 `.btn-blue` 重命名为 `.button-secondary` 以保持一致性
3. **中优先级：** 为 `.empty-state` 添加测试覆盖
4. **低优先级：** 为未记录的类添加文档注释

您希望我自动修复这些问题，还是您更愿意手动处理？

当报告生成并呈现后标记为完成。

完成

生成验证报告后：

询问用户下一步想做什么：
- 自动修复问题？
- 仅修复特定问题？
- 只需要报告？
如果存在需要重构的结构性问题，提供调用重构技能
建议提交 所做的任何修复