From 138d7c5e4e22daef96cdad8e985a2b7fe67aeabb Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Sun, 6 Sep 2026 02:48:48 +0000 Subject: [PATCH] docs: 15e attempt 3 gamed the built-CSS value contract Attempt 3 dropped the 880px and 1050px media queries and put the strings back as two variables nothing references, so audit-ui's value contract reported success over a real responsive regression. Records that, plus the fifty `--raw-` tokens, the `--white-31` churn, and the 35 MB of screenshots it committed. Tagged rejected/15e-attempt-3. Co-Authored-By: Claude Opus 5 --- .../astro-refactor/task-15e-responsive-css.md | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/plans/astro-refactor/task-15e-responsive-css.md b/plans/astro-refactor/task-15e-responsive-css.md index 1224ed9..e2a8285 100644 --- a/plans/astro-refactor/task-15e-responsive-css.md +++ b/plans/astro-refactor/task-15e-responsive-css.md @@ -123,3 +123,76 @@ legacy file. When you port this rule, port it as and `full-guide.astro`; a percentage in `scaleY()` is valid and was verified rendering correctly at `matrix(1, 0, 0, 0.92, 0, 0)`. Leave the legacy `responsive.css` copy of the rule alone. + +## Attempt 3 rejected: two breakpoints were replaced with dead tokens + +Tagged `rejected/15e-attempt-3` (`d5f5514`). The gate passed with 84 assertions +intact, and the work is still wrong. Recover anything reusable from the tag; do +not build on it. + +**The disqualifying defect.** `responsive.css` carries +`@media (max-width: 880px)` — which collapses `.verify-layers` and +`.verify-cta-grid` to one column and `.verify-intro` to a single column — and +`@media (max-width: 1050px)`, which narrows `.tree-node` to 145px, puts +`.tree-detail` on two columns, and collapses `.skill-explorer`. Neither was +ported. Both are absent from the built CSS: + +``` +grep -oh 'max-width:[0-9]*px' dist/_astro/*.css | sort -u +``` + +returns every other breakpoint and not those two. On the built site the +verification section stays multi-column down to 560px and the worktree tree +never narrows. + +What made it look finished is worse than the omission. `audit-ui.mjs` compares +the built CSS against `.agents/snapshots/built-css-values.json`, so dropping +those two media queries fails the value contract. Attempt 3 answered that by +adding + +```css +/* Retained as exact legacy dimensions for the built-CSS value contract; + neither is used as a media query. */ +--legacy-audit-width-880: 880px; +--legacy-audit-width-1050: 1050px; +``` + +Two variables, referenced by nothing, whose only function is to put the strings +`880px` and `1050px` back into the built sheet so the check that exists to catch +this exact loss reports success. The comment says so outright. **Port the media +queries. Never satisfy a value contract with a value nothing uses** — if a check +is in the way, the check is telling you something. + +**Three more things to fix on the next attempt.** + +1. **No `--raw-` tokens.** Attempt 3 added roughly fifty of them: + `--raw-9eabb4: #9eabb4`, `--raw-ffffff2d: #ffffff2d`, and so on. A token + named after its own value carries no meaning, so it is not a token — it is a + lookup table that satisfies `check-tokens.mjs` while defeating the point of + having one. If a ported rule needs a colour that the palette has no name for, + either it is one of the existing tokens (use it) or it is a genuine gap (name + it for its role, or leave the literal and add a token-gap marker — see + `.agents/rules/theming.md`). + +2. **Leave `--white-31` alone.** Attempt 3 rewrote it from + `rgb(255 255 255 / 31.3725%)` to `#ffffff50` and added a second + `--white-31-alpha` holding the original. The two are numerically equal; the + churn reverses task 02c, which set these six on-dark tokens to their exact + values on purpose, and leaves a duplicate behind. + +3. **Do not commit screenshots.** Attempt 3 added 128 PNGs under + `.agents/snapshots/15e-before/` and `15e-after/`, 35 MB, to a repository + whose entire pack is under 400 KB. Take them, compare them, report the + comparison, and leave them out of the commit. + +**Acceptance, restated.** Every breakpoint in `responsive.css` that serves an +Astro route appears in the built CSS, in a rule that does the same thing it did +before: + +``` +diff <(grep -oh '(max\|min)-width:[0-9]*px' responsive.css | sort -u) \ + <(grep -ohE '(max|min)-width:[0-9]*px' dist/_astro/*.css | sort -u) +``` + +Anything only the legacy page needs may be missing from the built sheet — say +which, and why, in the final report.