From 88183506a5dd5507ca8c1d3336b4331616e17dcf Mon Sep 17 00:00:00 2001 From: Timur Mashara <62305878+tmashara@users.noreply.github.com> Date: Fri, 30 Oct 2026 11:54:12 +0100 Subject: [PATCH] Skill: for CSS-only changes, diff the build outputs first to find the reach Co-Authored-By: Claude Opus 5.5 --- skills/renderdiff/SKILL.md | 2 +- skills/renderdiff/reference.md | 12 ++++++++++-- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/skills/renderdiff/SKILL.md b/skills/renderdiff/SKILL.md index 2efe400..aad7637 100644 --- a/skills/renderdiff/SKILL.md +++ b/skills/renderdiff/SKILL.md @@ -19,7 +19,7 @@ the § named at each step. | Change | Run | | --- | --- | -| CSS only, markup untouched (refactor, dead-CSS removal, token swap) | pixels + `--computed`. Expect `dom identical` on every route: then each `computed:` finding is a real style change, even on a clean route. `dom differs`: often a wrapper's class changed, re-keying its subtree (§ `--computed`). Hover menus and open menus aren't shot without a `before` hook that ends waiting for the open state, and dead-CSS removal breaks exactly those. | +| CSS only, markup untouched (refactor, dead-CSS removal, token swap) | pixels + `--computed`. First diff the two builds (§ Reference and routes): if only asset hashes differ, no shots are needed; otherwise shoot the routes the changed rules reach. Expect `dom identical` on every route: then each `computed:` finding is a real style change, even on a clean route. `dom differs`: often a wrapper's class changed, re-keying its subtree (§ `--computed`). Hover menus and open menus aren't shot without a `before` hook that ends waiting for the open state, and dead-CSS removal breaks exactly those. | | Markup changes (framework, template or component migration) | pixels, plus `--aria`: `aria: identical` means a screen reader gets the same page. `--computed` findings would only be hints. | | Dependency or build upgrade | pixels, plus `--computed` if the markup should be identical. | | One component | pixels with `--selector ` or `'/route @sel'`. | diff --git a/skills/renderdiff/reference.md b/skills/renderdiff/reference.md index eea13de..9170d92 100644 --- a/skills/renderdiff/reference.md +++ b/skills/renderdiff/reference.md @@ -24,9 +24,17 @@ results.json · Gotchas. - **Routes** are literal (no globs, no discovery): every template or page the change can reach, from the sitemap or router; skip search results, pagination and admin. `--sitemap` adds the right side's sitemap paths (files dropped); still list what it misses: the 404 - page, states, moved pairs. For removed CSS, every page where its selectors could match. - Pages you don't list go under Not verified. + page, states, moved pairs. Pages you don't list go under Not verified. Routes normalize to no trailing slash (`/` stays `/`). `--dry-run` shows how each was read. +- **CSS-only change:** diff the two build outputs first: every CSS file, plus the HTML and JS + (minified CSS: `tr '}' '\n'` gives one rule per line; pair hashed file names by their stem; + ignore `.map` files and `sourceMappingURL`). If they match apart from asset hashes, no route + needs shots; say so in the report. If HTML or JS differ too, the change isn't CSS-only. For + each changed or removed rule, list every page where its selectors could match: grep the + built HTML for its classes and ids. Element-only, `:root`/`html`/`body` and custom-property + rules reach every route. Classes that exist only after JS runs (`.is-open`, + client-rendered components) aren't in the HTML: shoot those states with a `before` hook, + or list them under Not verified. - **Baseline when the change is already made:** serve the base build twice, on two ports, and diff it against itself; whatever differs varies per load. - **States:** only the loaded state is shot. Hover, focus, open menus and dialogs need a