← Back to Skills Marketplace
yueguangshun123

check-vue-style

by yueguangshun123 · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ Security Clean
137
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install check-vue-style
Description
检查 Vue 单文件组件(.vue)中的 CSS 样式规范问题并输出提示。用于用户提到样式规范检查、CSS 代码审查、Vue 页面样式质量巡检时。
README (SKILL.md)

Skill Instructions

适用场景

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


一、快速检查流程

1) 执行样式巡检脚本

在项目根目录执行:

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

2) 理解输出结果

输出格式为:

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

3) 修复后复查

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


二、当前规则(默认内置)

脚本会对每个 .vue 文件的 \x3Cstyle> 区块执行以下检查:

  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
Usage Guidance
This skill appears to do exactly what it says: run a local style-check over .vue files and print warnings. Before installing or running it: (1) ensure you run it from the project root (it operates on process.cwd()); (2) install Node.js if you expect to run the script (the metadata omits this requirement); (3) review the script if you have sensitive/untrusted repositories (it reads files under the repo but does not send data anywhere); (4) if you prefer an existing linter, consider using or extending Stylelint as suggested. Overall the footprint is minimal and coherent with the stated purpose.
Capability Analysis
Type: OpenClaw Skill Name: check-vue-style Version: 1.0.0 The skill bundle is a legitimate utility for linting CSS styles within Vue Single File Components. The primary script, scripts/check-vue-style.sh, uses Node.js to perform local file analysis via regex to identify non-standard practices like ID selectors or missing scoped attributes, with no evidence of network access, data exfiltration, or malicious intent.
Capability Assessment
Purpose & Capability
Skill name/description (Vue style checking) matches the included script and instructions. Minor inconsistency: metadata lists no required binaries, but the script explicitly requires Node.js and will exit if Node isn't present.
Instruction Scope
SKILL.md instructs only to run the provided local script in the project root. The script reads .vue files under the current directory (skips node_modules, .git, dist, build), reports style-related warnings, and does not access other system files, environment variables, or external endpoints.
Install Mechanism
No install spec — instruction-only plus a local script. No downloads or external installers; the script runs embedded Node code. Low install risk.
Credentials
The skill requests no environment variables or credentials. The script does not read or require secrets or config paths. (It does require a runtime dependency: Node.js.)
Persistence & Privilege
Skill does not request persistent/always-on presence, does not modify other skills or system-wide configuration, and only runs when invoked.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install check-vue-style
  3. After installation, invoke the skill by name or use /check-vue-style
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
用于自动巡检 Vue 单文件组件(.vue)中的 CSS 样式规范问题。它会扫描 <style> 区块,识别如缺少 scoped、!important 滥用、ID 选择器、深度选择器、类名非 kebab-case、嵌套层级过深等常见问题
Metadata
Slug check-vue-style
Version 1.0.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is check-vue-style?

检查 Vue 单文件组件(.vue)中的 CSS 样式规范问题并输出提示。用于用户提到样式规范检查、CSS 代码审查、Vue 页面样式质量巡检时。 It is an AI Agent Skill for Claude Code / OpenClaw, with 137 downloads so far.

How do I install check-vue-style?

Run "/install check-vue-style" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is check-vue-style free?

Yes, check-vue-style is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does check-vue-style support?

check-vue-style is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created check-vue-style?

It is built and maintained by yueguangshun123 (@yueguangshun123); the current version is v1.0.0.

💬 Comments