Marcos Paulo
85 lines
4.0 KiB
Markdown
85 lines
4.0 KiB
Markdown
# 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
|
|
|
|
## 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.
|