css-noop-checker: Skill for Claude Code

Verify Rule

Verify a CSS noop rule's correctness and test consistency by cross-checking rule source, unit tests, test.html cases, and real Chromium computed styles via Playwright.

Correctness Standard

This project is Chromium-behavior-driven. The ground truth is what getComputedStyle() returns in current Chromium, not the CSS spec alone.

• False positives are worse than false negatives. If behavior is conditional, context-sensitive, or unclear in Chromium, the rule should stay silent.
• A property that is partially effective (e.g. one axis of place-items still matters) is NOT a no-op — do not warn.
• If you intentionally keep a known false negative, document the trade-off in the rule comment.

Apply this standard at every judgment point in the workflow below.

When to Use

• After modifying a rule's logic or default values
• When auditing whether a rule matches real Chromium behavior
• When test.html cases might have false positives/negatives
• Before merging rule changes

Workflow

digraph verify {
  rankdir=TB;
  "Read rule source" -> "Read unit tests";
  "Read unit tests" -> "Read test.html cases";
  "Read test.html cases" -> "Cross-check coverage";
  "Cross-check coverage" -> "Has gaps?" [shape=diamond];
  "Has gaps?" -> "Report missing coverage" [label="yes"];
  "Has gaps?" -> "Run Playwright verification" [label="no"];
  "Report missing coverage" -> "Run Playwright verification";
  "Run Playwright verification" -> "Visual screenshot check";
  "Visual screenshot check" -> "Run unit tests";
  "Run unit tests" -> "Report results";
}

Step 1 — Gather Sources

Read these files for the given <rule-id>:

File	Purpose
src/rules/<rule-id>.ts	Rule logic, checked properties, default values
src/rules/__tests__/<rule-id>.test.ts	Unit test cases and assertions
examples/test.html (grep for data-rule="<rule-id>")	Browser test cases
docs/rules/<rule-id>.md	Rule documentation (if exists)