Task 15e — Retire responsive.css

Agent: design-system-keeper · Model: agy (Gemini 3.1 Pro — vision) Depends on: 15d, 16 · Blocks: 20 Worktree: .agents/scripts/worktree.sh start 15e responsive-css

Goal

responsive.css is 30 KB and mostly served /full-guide/. Once 15d and 16 have landed, port what the Astro pages still need into component styles or tokens.css, prove the remainder dead, and delete it.

Proof is screenshots, not reading. A rule that looks unused because no selector matches at 1600 px may be the only thing holding the 560 px layout together.

Method

Build. Screenshot every migrated route at 560 / 800 / 1100 / 1600 px.
Remove responsive.css from the build entirely.
Screenshot again. Every diff is a rule you must port.
Port it into the owning component's <style>, or — if it is a real token — into tokens.css, which you own. No other agent may add tokens.
Repeat until the diffs are empty.

Constraints

Allowed breakpoints are 560 / 800 / 1100 / 1600 / 2200 px. .agents/scripts/check-tokens.mjs rejects others.
Do not delete the file while any legacy page still loads it. Check which routes have actually been migrated at the time you run; 20 is the cutover.
No raw hex, no font-size: Npx outside tokens.css.
You are also the owner of the ~190 accumulated /* token-gap: ... */ markers. Resolving them is not in this brief — do not start. Report the count so it can be scheduled.

Done when

Screenshot diffs empty at all four widths without responsive.css
Ported rules live with the component that needs them, or in tokens.css
responsive.css deleted, and nothing references it
pnpm run gate green; 42 assertions intact

Amendment — the screenshot step now actually works

When this brief was written, .agents/scripts/visual-regression.mjs threw playwright ... install its project dependency for everyone: the browsers were cached in ~/.cache/ms-playwright but the node package was never a dependency. Every "screenshots match" checkbox in this plan was unsatisfiable. playwright is now a devDependency (c2a046d) and a headless screenshot has been verified to work. Take the screenshots. "I read the rules and they look unused" is not the proof this brief asks for.

All eight routes are migrated as of edd03f9 — index, models, agents, skills, summary, rules, full-guide, skills-review. Screenshot all of them, not just /full-guide/.

Amendment — the token-gap queue is already closed

The brief says "~190 accumulated /* token-gap: ... */ markers … do not start". Task 02c ran and took them from 154 to 17. Do not reopen that work either; the 17 that remain are deliberate.

Two things 02c got wrong that you must not repeat. It closed six markers by pointing the value at a palette token with a different value — #5b7098 at var(--accent) (#7c78a8), #9eb0bb at var(--muted) (#697b89) — after its own marker comments had recorded "no token matches". That shipped a silent redesign the gate could not see. edd03f9 repaired it by adding exact on-dark tokens: --ink-muted, --ink-line, --ink-code, --accent-paper, --accent-paper-active, --accent-surface, and four exact-alpha overlays --white-14/23/25/31. Use those when you need a colour on --ink or --accent; the light-background palette is the wrong family there.

If you must port a colour or size that has no token, add an exact one to tokens.css — you own it — or leave the raw value under a token-gap: marker. Never round to a near neighbour.

Amendment — how this gets verified

The gate does not read your output: all 42 assertions in scripts/verify.mjs read the legacy files, so deleting responsive.css and breaking every mobile layout passes it cleanly. Before you claim done, diff the built CSS (dist/_astro/*.css) against main and enumerate every declaration that disappeared. Each one is either present elsewhere or a regression.

4.0 KiB Raw Blame History