ai-for-dummies/plans/astro-refactor/task-15e-responsive-css.md

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

1. Build. Screenshot every migrated route at 560 / 800 / 1100 / 1600 px.
2. Remove responsive.css from the build entirely.
3. Screenshot again. Every diff is a rule you must port.
4. 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.
5. 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