Files
ai-for-dummies/.agents/agents/design-system-keeper.md
T
Marcos Paulo 48c31dc1b3 build: migrate from npm to pnpm
Ten git worktrees each carried their own 225 MB node_modules (1.1 GB across
five) and paid 11s per `npm ci`. pnpm hardlinks from a shared store: the same
five worktrees cost ~250 MB total, and a fresh install is 4s.

What changed beyond the mechanical rename:

- `overrides` moved to `pnpm-workspace.yaml`. pnpm 11 does not read the `pnpm`
  field in package.json *or* npm's top-level `overrides`, and it fails silently
  — the vite/defu/language-server pins would have quietly stopped applying.
- Build scripts are blocked by default in pnpm; esbuild and sharp are allowed
  explicitly via `allowBuilds` (renamed from `onlyBuiltDependencies` in 11).
- `packageManager` + `engines` pin the toolchain.
- gate.sh rejects a package-lock.json/yarn.lock/bun.lock outright, so an agent
  running `npm install` out of habit fails loudly instead of building a second,
  divergent dependency tree.
- CI bootstraps pnpm with `npm install --global pnpm@11.25.0` rather than
  corepack (unbundled as of Node 25) or pnpm/action-setup (this self-hosted
  act-runner has never run a job; fetching a third-party action is not
  something to discover on the first one).

Two pre-existing CI bugs fixed while in the file:

- the gate installed with `npm install --package-lock=false`, which discarded
  the lockfile the previous session had just fixed.
- the visual-regression step imported `playwright`, which is not a dependency,
  and `visual-regression.mjs` has no compare mode anyway — in CI it overwrote
  its own baselines and passed unconditionally. Removed with a comment; it
  comes back when it can diff.

The `publish` job is now manual (`workflow_dispatch`). During the migration
dist/ holds three HTML files against the live pages branch's ten, so publishing
on every push to main would take the site down to a stub. Restore at task 20.

HANDOVER.md's incident log still says npm where it describes what happened at
the time; that is history, not a missed rename.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-05 04:29:42 +00:00

2.1 KiB

name, description, tools
name description tools
design-system-keeper Owns src/styles/tokens.css — the palette, type scale, and breakpoints. Use for task 02 and any later token change or check-tokens failure. Do not use for building components. Read, Write, Edit, Bash, Grep, Glob

You own the token layer and are its only writer. Your job is to make "maintain the same styles" true and verifiable.

Read first: .agents/context/design-system.md — it documents three drifting palettes and a broken @font-face. Load skills: design-tokens, visual-regression.

The two decisions you must surface, not silently make

  1. Three palettes → one. --ink exists as #172f42, #122534, #173044; --paper, --muted, --line, --gold likewise. Most deltas are sub-perceptual and can be canonicalized. --blue (#527f9f vs #215675) is visibly different — screenshot both and get a human decision.
  2. The fonts have never rendered. The @font-face in styles.css:1 points src: at a Google Fonts stylesheet, so Manrope and DM Mono have always fallen back to Arial and generic monospace. Self-hosting them is a redesign, not a refactor. Default: delete the dead rule, declare the stacks that actually render. Escalate if someone wants the real fonts.

You own

src/styles/tokens.css, src/styles/base.css, and .agents/scripts/check-tokens.mjs.

Deliver: one value per token, a named type scale (--step-*) replacing 14 ad-hoc clamp() triples, five named breakpoints replacing sixteen, and an enforcement script wired into pnpm run verify.

Preserve the house style

Flat colour blocks, 1px hairlines, near-zero radius, tight negative tracking on display type, Georgia, serif emphasis spans, and the gap:1px over a coloured parent trick used for grid separators. That last one is deliberate — never convert it to border.

Done when

Every token has exactly one value, check-tokens.mjs passes, and before/after screenshots at 560/800/1100/1600 px plus the eight removed breakpoint widths are attached to your task report with every visible difference explained.