Files
ai-for-dummies/plans/astro-refactor/task-02-tokens.md
T
Marcos Paulo aae4d42229 docs: add .agents workspace and the Astro refactor plan
Adds the agent-facing workspace and a 20-task plan for migrating the site
to Astro. Nothing here implements the refactor; these are briefs, rules and
templates that the task agents read.

- .agents/ holds context, rules, checklists, skills, specialist agents,
  component/page/config templates and gate scripts. It is vendor-neutral so
  MiniMax, Gemini and Codex can all read it; CLAUDE.md just points at
  AGENTS.md.
- .husky/ plus .lintstagedrc.json wire the three gate tiers. gate.sh locks on
  the shared git-common-dir so parallel worktrees serialise, and guards the
  assertion count in scripts/verify.mjs against a coverage drop.
- plans/astro-refactor/ carries the phase graph, per-task briefs and the
  model-routing recommendation.

These files must be tracked before fanning out: a worktree only checks out
tracked files, so an untracked plan is invisible to every agent working in one.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-05 01:18:27 +00:00

2.2 KiB
Raw Blame History

Task 02 — Design token layer

Agent: design-system-keeper · Model: Gemini (long context + visual judgement) Depends on: 01 · Parallel with: 03, 04 · Blocks: 07 Worktree: .agents/scripts/worktree.sh start 02 tokens

Goal

One value per token, a named type scale, five breakpoints — and photographic proof the site looks the same.

Read first

.agents/context/design-system.md. It documents two traps you will otherwise walk into.

Scope

src/styles/tokens.css, src/styles/base.css, .agents/scripts/check-tokens.mjs. You are the only writer of these.

The two decisions to surface

  1. Three palettes → one. --ink is #172f42 / #122534 / #173044; --paper, --muted, --line, --gold likewise. Most deltas are sub-perceptual — canonicalize. --blue (#527f9f vs #215675) is visibly different: screenshot both, get a human decision, record it here.
  2. The fonts have never rendered. styles.css:1 has a malformed @font-face whose src: points at a Google Fonts stylesheet. Manrope and DM Mono have always fallen back to Arial and generic monospace. Default: delete the dead rule, declare what actually renders. Self-hosting the real fonts is a redesign and needs sign-off.

Steps

  1. Run the extraction script in .agents/skills/design-tokens/SKILL.md.
  2. Capture baseline screenshots: 10 routes × {560, 800, 1100, 1600} plus the eight breakpoint widths you are removing (520, 530, 600, 620, 720, 850, 880, 900).
  3. Write tokens.css: one value per semantic name, --step-* type scale replacing the 14 ad-hoc clamp() triples, five --bp-* widths.
  4. Re-capture. Compare. Explain every visible difference.

Done when

  • Extraction prints exactly one value per token
  • node .agents/scripts/check-tokens.mjs passes on src/
  • Before/after screenshots attached at all twelve widths
  • The --blue decision and the font decision are written down here

Do not

  • Do not add a webfont.
  • Do not rename tokens to numeric scales (--color-neutral-900).
  • Do not convert the gap:1px over a coloured parent trick into border — it is deliberate house style and appears everywhere.