codeguard-css

CSS / SCSS / Sass / LESS Codeguard gate

Goal: turn “looks fine” into repeatable tool evidence, and honestly distinguish pass, fail, unverifiable, and planned.

Start in 30 seconds

1. At the repository root, confirm that 无专用标记文件 or the target file exists.
2. Detect the tool:npx --no-install stylelint --version。
3. First perform a read-only check:npx --no-install stylelint '**/*.css'。
4. Classify the results as: code violations, missing configuration, missing tools, tool internal errors.
5. Only perform:npx stylelint '**/*.css' --fix。
6. Re-run lint, and run the project’s existing test/build gates.

You can directly propose:

• “Check this CSS / SCSS / Sass / LESS project, do not modify it yet, and give me a classification of the lint failures.”
• “Only fix the formatting issues in CSS / SCSS / Sass / LESS, and list semantic issues first.”
• “Before committing, verify the CSS / SCSS / Sass / LESS lint, test, and build evidence.”

Capability boundaries

✅ Good at handling

1. Based on .css, .scss, .sass, .less and project markers, identify the CSS / SCSS / Sass / LESS workspace.
2. Run npx --no-install stylelint '**/*.css' and preserve exit codes, scope, and tool version.
3. Distinguish formatting, static rule, configuration, dependency, and environment failures.
4. Use npx stylelint '**/*.css' --fix to handle reversible issues and rescan.
5. Report local results separately from CI/build/test evidence.

⚠️ Conditions required

1. The target tool must be installed and its version compatible with the project constraints.
2. It must be run from the correct repository or module root.
3. If the project has custom configuration, the committed configuration takes precedence.
4. Whether generated code, vendor, and cache directories are scanned must follow repository rules.

❌ Not applicable

1. Do not treat a formatter pass as a compilation, test, or security audit pass.
2. Do not silently install tools, upgrade dependencies, or modify team rules.
3. Do not use suppress/ignore/raising thresholds to conceal real problems.
4. Do not claim “check passed” when tools or configuration are missing.

When to use

• The user asks to check or fix CSS / SCSS / Sass / LESS code style.
• AI modified .css, .scss, .sass, .less, and pre-commit verification is needed.
• CI has failures related to npx --no-install stylelint '**/*.css' .
• It is necessary to determine whether a problem can be automatically fixed or must be handled manually.

When not to use

• The main task is learning language syntax, framework design, or business modeling, so the corresponding language professional skill should be used instead.
• The main task is dependency vulnerabilities, security auditing, or license governance, so a specialized security skill should be used.
• When the user only asks to explain one error and there is no project context, provide a local explanation first and do not claim the repository is all green.

Data and security

This skill does not collect, upload, send, or store user code and credentials. By default, it only reads local repository configuration and runs local tools; it does not install dependencies over the network, and it does not record tokens, passwords, or private source code. Before any autofix, inspect the diff first; destructive or large-scale changes must be explicitly confirmed by the user.

Execution Contract

Item	Current Fact
Status	stable(Since Codeguard V0.2)
File Extension	.css, .scss, .sass, .less
Project Marker	No dedicated marker file
Integration Configuration	Based on the repository's existing configuration
Tool Preparation	npm install --save-dev stylelint stylelint-config-standard
Detection Command	npx --no-install stylelint --version
lint	npx --no-install stylelint '**/*.css'
format/fix	npx stylelint '**/*.css' --fix
Project-level gate	npx --no-install stylelint '**/*.css'

Standard Workflow

Step 1: Determine the Actual Scope

Confirm the repository root, module roots, generated directories, vendor directories, and user-specified files. For multi-module projects, list the modules to be scanned first; do not guess based on the current directory.

Step 2: Read the Project Contract

Read based on the repository's existing configuration and the actual commands in CI. Repository configuration takes precedence over this skill's examples; if the two conflict, report the difference first.

Step 3: Detect Tools and Versions

Run npx --no-install stylelint --version. Missing tools, incompatible versions, or configuration that fails to load are all recorded as "unable to verify," not as a pass.

Step 4: Execute Read-only Checks

Run npx --no-install stylelint '**/*.css', and record the command, working directory, exit code, tool version, and the first actionable error.

Step 5: Failure Classification

Type	Typical Signal	Handling
Format	Indentation, whitespace, import order	Formatter allowed, then check the diff
Static Rules	unused, complexity, naming, dangerous API	Minimal semantic fix, no bulk guessing
Configuration	parser/config/schema not found	Fix the integration or report prerequisites
Environment	command not found, version conflict	Report installation/version requirements; do not install silently
Tool Internal Error	crash, timeout, parser exception	Preserve the original evidence and narrow the reproduction scope

Step 6: Controlled Fixes

Prefer to run npx stylelint '**/*.css' --fix. Only handle issues that are certain and reversible; dependency upgrades, rule exemptions, generated files, and business semantic changes must be explained separately.

Step 7: Verification Loop

Re-run the same lint command, then run the project's existing tests and build. Only write "passed" when the command, scope, and exit code are all clear; otherwise write "not run" or "unable to verify."

Rules

1. Re-verify with the Same Command: After fixing, you must re-run the original command that triggered the failure.
2. Layered Evidence: Report lint, format, compile, test, and security separately.
3. Minimal Changes: Do not refactor along the way, and do not expand style fixes into business rewrites.
4. Configuration First: Do not override the project's existing ignore, dialect, target, or version constraints.
5. No Fabrication: Tools not run, configurations not seen, and platforms not verified must be clearly marked.

Output Template

CSS / SCSS / Sass / LESS Codeguard 结果
- 范围：<仓库/模块/文件>
- 工具：<名称与版本>
- 命令：<实际命令>
- 状态：PASS / FAIL / UNVERIFIED / PLANNED
- 发现：<按格式/规则/配置/环境分类>
- 修改：<文件与原因；无修改写 none>
- 复验：<命令、退出码>
- 未验证：<测试/构建/平台差异>

Gotchas

1. Missing tools are not a pass — must output UNVERIFIED and a clear preparation method.
2. formatter is not a linter — All-green formatting cannot override static rules or compilation errors.
3. Root directory determines the result — Running in the wrong module may miss checks or load the wrong configuration.
4. Placeholders are not literal arguments — {file} must be replaced with real, authorized paths.
5. Auto-fix may enlarge the diff — After fixing, review the diff first, then run the regression gate.
6. Generated and vendor directories require an explicit policy — Do not arbitrarily scan the entire repository or modify third-party content.

Domain pitfalls and fixes

1. Domain pitfalls — When a Stylelint glob must cover SCSS/Sass/LESS, extend it explicitly; the default **/*.css does not automatically cover all preprocessors.

When there is insufficient information

Do not just say "please provide more information." First give a safe read-only inspection plan, and list the specific items that still need confirmation:

1. Repository/module root directory;
2. Target tool and version;
3. Project configuration file;
4. The authoritative command in CI;
5. Whether auto-fix is allowed.

FAQ

Q1: If the tool is not installed, can we conclude the code is fine? No. The status must be UNVERIFIED。

Q2: Can ignore or suppression be added automatically? No. Exemption is allowed only when the user explicitly accepts it and the reason is documented.

Q3: Why does it still fail after formatting? The formatter only covers formatting; static rules, configuration, compilation, and tests still need to be handled separately.

Q4: Should generated code be scanned? By default, follow the repository configuration; if there are no rules, exclude generated/vendor first, then explain to the user.

Q5: How can we avoid changing too much at once? Fix in batches by failure category and file first, and re-run the original command and review the diff for each batch.

Q6: If it passes locally, can we say CI will pass? No. You also need to align CI's versions, environment variables, operating system, and command scope.

Load resources as needed

• When encountering exit codes, failure classification, or exemption decisions, read references/rules/gate-rules.md。
• When you need to verify this language's registry, toolchain, and project configuration, read references/tooling/toolchain.md。
• When you need copyable task examples, read by scenario examples/, and there is no need to load them all at once.