检查 .vue 单文件组件的 CSS 规范问题并给出提示,适用于样式检查、CSS审查和 Vue 页面质量巡检。
Skill Instructions是一项面向实际任务的技能,主要用于当用户希望检查 .vue 文件中的样式规范问题(如 !;important 滥用、ID 选择器、非 kebab-case 类名、深度选择器、缺少 scoped)时,使用本技能;
2) 理解输出结果;输出格式为:;3) 修复后复查;修复完成后再次运行同一命令,直到没有警告为止;二、当前规则(。
它将相关步骤、工具调用和结果整理方式集中到统一流程中,帮助使用者更快完成目标并减少重复操作。从功能定位来看,该技能强调把分散的操作要求整理成清晰、可复用的处理流程,使用户能够围绕既定目标快速准备输入、选择执行方式并获得结构化结果。实际使用前应先确认任务范围、数据来源、运行环境、必要权限和关键参数,再依据技能说明逐步执行;若输入条件不完整,应先补齐信息或采用保守配置,避免因错误假设导致结果偏离需求。执行过程中需要关注工具调用是否成功、接口或依赖是否可用、输出格式是否符合预期,并对异常提示、缺失字段和边界情况进行处理;涉及批量任务时,还应保存进度,避免中断后重复操作。
当用户希望检查 .vue 文件中的样式规范问题(如 !important 滥用、ID 选择器、非 kebab-case 类名、深度选择器、缺少 scoped)时,使用本技能。
在项目根目录执行:
bash ./scripts/check-vue-style.sh
输出格式为:
文件路径:行号: ⚠️ 问题说明
修复完成后再次运行同一命令,直到没有警告为止。
脚本会对每个 .vue 文件的 区块执行以下检查:
scoped!important#app)/deep/、>>>、::v-deep).user-card-title).vue 文件。scripts/check-vue-style.sh