Skill Instructions

适用场景

当用户希望检查 .vue 文件中的样式规范问题（如 !important 滥用、ID 选择器、非 kebab-case 类名、深度选择器、缺少 scoped）时，使用本技能。

一、快速检查流程

1) 执行样式巡检脚本

在项目根目录执行：

bash ./scripts/check-vue-style.sh

2) 理解输出结果

输出格式为：

文件路径:行号: ⚠️ 问题说明

3) 修复后复查

修复完成后再次运行同一命令，直到没有警告为止。

二、当前规则（默认内置）

脚本会对每个 .vue 文件的 <style> 区块执行以下检查：

1. 检查是否缺少 scoped
2. 检查是否使用 !important
3. 检查是否使用 ID 选择器（如 #app）
4. 检查是否使用深度选择器（/deep/、>>>、::v-deep）
5. 检查类名是否为 kebab-case（如 .user-card-title）
6. 检查样式嵌套层级是否超过 3 层（粗略规则）

三、执行约定

1. 默认扫描当前目录下全部 .vue 文件。
2. 若脚本返回非 0，表示发现规范问题，需要提示并给出修复建议。
3. 如项目已有 Stylelint，可在此脚本基础上再补充团队规则。

Resources

• scripts/check-vue-style.sh