fix: port the full-guide responsive rules into their components

Merges refactor/task-15e-responsive-css.

The Astro build imported responsive.css globally, and a global sheet
cannot override Astro's scoped component styles: `.tree-node` (0,1,0)
loses to `.tree-node[data-astro-cid-lsutp3lb]` (0,2,0). The responsive
layer has been partly inert in the build for as long as it has been
imported. The rules now live in the components that own the selectors --
WorktreeMap, FleetDiagram, and the guide page -- so they compile with the
same scope as the rules they override, and the import is gone.

Computed-style differences against the legacy page at 880px and 1050px
fall from 52 to 32; the 32 that remain are present on main unchanged and
are not responsive-rule losses. Rendered text is untouched: en 432/432,
pt 431/431.

responsive.css itself is unchanged and full-guide/index.html still links
it. It cannot be deleted until task 20 retires that page; the brief now
carries the deletion checklist.

Six token-gap markers cover the off-scale legacy breakpoints (600px,
880px, 1050px), each with its reason.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

.agents/agents/motion-designer.md

@@ -1,6 +1,9 @@
 ---
 name: motion-designer
-description: Adds and audits animation — transitions, state changes, optional view transitions. Use for task 17 and any change involving movement. Do not use for static layout or styling work.
+description:
+  Adds and audits animation — transitions, state changes, optional view
+  transitions. Use for task 17 and any change involving movement. Do not use for
+  static layout or styling work.
 tools: Read, Write, Edit, Bash, Grep, Glob
 ---
 

.agents/agents/reviewer.md

@@ -1,6 +1,9 @@
 ---
 name: reviewer
-description: Merge gate. Reviews a task branch diff against its brief and the project rules. Use before merging any refactor task. Never writes features or fixes findings itself.
+description:
+  Merge gate. Reviews a task branch diff against its brief and the project
+  rules. Use before merging any refactor task. Never writes features or fixes
+  findings itself.
 tools: Read, Grep, Glob, Bash
 ---
 
@@ -8,7 +11,8 @@ You are the merge gate. You read diffs and report. **You do not write features
 and you do not fix what you find** — you name it precisely enough that the
 owning agent can.
 
-**Read**: the task file, then every rule in `.agents/rules/` relevant to the diff.
+**Read**: the task file, then every rule in `.agents/rules/` relevant to the
+diff.
 
 ## Order of checks — highest-value first
 

.agents/context/architecture.md

@@ -4,18 +4,18 @@
 
 Ten hand-written HTML pages, each linking its own CSS and one ES module:
 
-| Route | Page | Script | Stylesheets |
-| --- | --- | --- | --- |
-| `/` | `index.html` | — | `chapters.css`, `landing.css` |
-| `/full-guide/` | `full-guide/index.html` | `app.js` (50 KB) | `styles.css`, `responsive.css`, `audit.css` |
-| `/summary/` | `summary/index.html` | — | `chapters.css` |
-| `/models/` | `models/index.html` | — | `chapters.css` |
-| `/agents/` | `agents/index.html` | — | `chapters.css` |
-| `/skills/` | `skills/index.html` | `skills/app.js` | `skills/styles.css` |
-| `/rules/` | `rules/index.html` | `rules/app.js` | `rules/styles.css` |
-| `/skills-review/` | `skills-review/index.html` | `skills-review/app.js` | `skills-review/styles.css`, `change-lens.css` |
-| `/hands-on/starter/` | lab fixture | own | own |
-| `/hands-on/rules/` | lab fixture | own | own |
+| Route                | Page                       | Script                 | Stylesheets                                   |
+| -------------------- | -------------------------- | ---------------------- | --------------------------------------------- |
+| `/`                  | `index.html`               | —                      | `chapters.css`, `landing.css`                 |
+| `/full-guide/`       | `full-guide/index.html`    | `app.js` (50 KB)       | `styles.css`, `responsive.css`, `audit.css`   |
+| `/summary/`          | `summary/index.html`       | —                      | `chapters.css`                                |
+| `/models/`           | `models/index.html`        | —                      | `chapters.css`                                |
+| `/agents/`           | `agents/index.html`        | —                      | `chapters.css`                                |
+| `/skills/`           | `skills/index.html`        | `skills/app.js`        | `skills/styles.css`                           |
+| `/rules/`            | `rules/index.html`         | `rules/app.js`         | `rules/styles.css`                            |
+| `/skills-review/`    | `skills-review/index.html` | `skills-review/app.js` | `skills-review/styles.css`, `change-lens.css` |
+| `/hands-on/starter/` | lab fixture                | own                    | own                                           |
+| `/hands-on/rules/`   | lab fixture                | own                    | own                                           |
 
 Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB,
 `skills-review/catalog.js` 27 KB, `skills-review/submitted-catalog.js` 18 KB.
@@ -35,7 +35,8 @@ Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB,
   `wins[]`, `improve[]`, `extras`, `improved` (full markdown). 24 entries across
   `catalog.js` + `submitted-catalog.js`. This is already a content collection in
   all but name.
-- **`skills-review/files.js` / `submitted-files.js`** — generated file manifests.
+- **`skills-review/files.js` / `submitted-files.js`** — generated file
+  manifests.
 - **`vote.js`** — the vote widget island; talks to `vote-service/`.
 
 ## Target (Astro)
@@ -53,12 +54,12 @@ public/
 
 ### Non-negotiables for the target
 
-- **URLs do not change.** `/full-guide/`, `/skills-review/`, `/hands-on/starter/`
-  and the rest must resolve exactly as they do now, trailing slash included.
-  Existing links (including `docs/`, SilverBullet, and shared URLs with
-  `?author=…&skill=…&view=…` query params) must keep working.
-- **Zero JS by default.** Seven of the ten pages ship no JavaScript today.
-  They must still ship none. Islands are opt-in, per component, and justified.
+- **URLs do not change.** `/full-guide/`, `/skills-review/`,
+  `/hands-on/starter/` and the rest must resolve exactly as they do now,
+  trailing slash included. Existing links (including `docs/`, SilverBullet, and
+  shared URLs with `?author=…&skill=…&view=…` query params) must keep working.
+- **Zero JS by default.** Seven of the ten pages ship no JavaScript today. They
+  must still ship none. Islands are opt-in, per component, and justified.
 - **`hands-on/` stays vanilla.** It goes in `public/` untouched. It is a lab
   fixture, not a component.
 - **No external runtime requests.** `audit-ui.mjs` enforces this and it is part

.agents/rules/accessibility.md

@@ -49,4 +49,5 @@ likely to fail; verify before shipping.
 ## Bilingual content
 
 `<html lang>` must change with the language toggle, not just the text. Screen
-readers pick pronunciation from it. This already works today — do not regress it.
+readers pick pronunciation from it. This already works today — do not regress
+it.

.agents/rules/animation.md

@@ -20,12 +20,16 @@ Several current stylesheets already honour it. Every new animation must:
 
 ```css
 @media (prefers-reduced-motion: reduce) {
-  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
-      transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 ```
 
-Reduced motion means *reduced*, not *broken*: the end state must still be
+Reduced motion means _reduced_, not _broken_: the end state must still be
 correct and the interface still usable. Test it — in DevTools, Rendering →
 Emulate `prefers-reduced-motion`.
 
@@ -35,7 +39,7 @@ Emulate `prefers-reduced-motion`.
   Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every
   frame and will show up as a failed INP.
 - `will-change` only on an element about to animate, removed after. Leaving it
-  on permanently costs memory and can *hurt* performance.
+  on permanently costs memory and can _hurt_ performance.
 - Prefer CSS transitions. Reach for the Web Animations API only for sequencing
   that CSS cannot express. Do not add an animation library — it is a runtime
   dependency on a site whose thesis is having none.

.agents/rules/astro.md

@@ -15,12 +15,12 @@ this site's ten pages ship no JS today and must continue to.
 
 Only these need interactivity. Anything else claiming island status is wrong:
 
-| Island | Why | Directive |
-| --- | --- | --- |
-| Guide phase/tab switchers | click-driven panel swap | `client:visible` |
-| Review desk catalog + file viewer | search, filter, fetch source files | `client:load` |
-| Vote widget | talks to `vote-service/` | `client:visible` |
-| Language toggle | swaps EN/PT across the page | `client:idle` |
+| Island                            | Why                                | Directive        |
+| --------------------------------- | ---------------------------------- | ---------------- |
+| Guide phase/tab switchers         | click-driven panel swap            | `client:visible` |
+| Review desk catalog + file viewer | search, filter, fetch source files | `client:load`    |
+| Vote widget                       | talks to `vote-service/`           | `client:visible` |
+| Language toggle                   | swaps EN/PT across the page        | `client:idle`    |
 
 ## Structure
 
@@ -31,8 +31,11 @@ Only these need interactivity. Anything else claiming island status is wrong:
 // 3. destructure Astro.props
 // 4. derived values — no side effects, no fetch in components
 ---
+
 <!-- markup -->
-<style>/* component-scoped */</style>
+<style>
+  /* component-scoped */
+</style>
 ```
 
 - Typed props always: `interface Props { … }`, then `const { … } = Astro.props`.
@@ -60,13 +63,13 @@ almost one-to-one — do that rather than importing a 27 KB JS file.
 The site is served from `/ai-for-dummies/`. Set `base` in `astro.config.mjs` and
 never hand-write an absolute internal path. Use `import.meta.env.BASE_URL`.
 
-Existing routes are load-bearing and must not change, including trailing
-slashes and the review desk's query params.
+Existing routes are load-bearing and must not change, including trailing slashes
+and the review desk's query params.
 
 ## Never
 
-- No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for it.
-  Astro components plus a little vanilla JS cover everything here.
+- No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for
+  it. Astro components plus a little vanilla JS cover everything here.
 - No CSS framework. This site has a hand-built visual identity — see
   [`theming.md`](theming.md).
 - No external runtime requests. Self-host. `audit-ui.mjs` enforces it.

.agents/rules/code-style.md

@@ -3,7 +3,7 @@
 ## Match what is there
 
 This codebase has a real voice: dense one-liner CSS, terse ES modules, comments
-that explain *why* and never *what*. Do not reformat it into someone else's
+that explain _why_ and never _what_. Do not reformat it into someone else's
 house style as a side effect of a task.
 
 The one exception is CSS minification-by-hand — `styles.css` is single-line and
@@ -44,5 +44,5 @@ overrides, and the temptation during migration will be to port it wholesale
 
 ## Commits
 
-Present tense, lowercase, `type: subject`, matching the existing log
-(`feat:`, `fix:`, `docs:`). The body explains why, and states what you did not do.
+Present tense, lowercase, `type: subject`, matching the existing log (`feat:`,
+`fix:`, `docs:`). The body explains why, and states what you did not do.

.agents/rules/componentization.md

@@ -3,7 +3,8 @@
 ## When to make a component
 
 Extract when the same markup appears **three times**, or when a block has a name
-a person would use out loud ("the eyebrow", "the route card", "the phase panel").
+a person would use out loud ("the eyebrow", "the route card", "the phase
+panel").
 
 Do not extract on the second occurrence. Two similar blocks often diverge; the
 premature abstraction costs more than the duplication.

.agents/rules/content-i18n.md

@@ -55,5 +55,5 @@ hand-rolled client-side renderer. That deletes code and improves fidelity.
 
 Careful: `skill-reviews/improved/**/SKILL.md` is **generated** from those
 entries by `scripts/build-skill-review.mjs`, and the generated files are
-committed. Keep that generator working, or replace it and update every
-reference to it.
+committed. Keep that generator working, or replace it and update every reference
+to it.

.agents/scripts/computed-style-diff.mjs

@@ -0,0 +1,171 @@
+#!/usr/bin/env node
+// Compare the *computed* styles of a legacy page against its Astro
+// replacement, at several viewport widths.
+//
+//   node .agents/scripts/computed-style-diff.mjs full-guide
+//   node .agents/scripts/computed-style-diff.mjs full-guide --widths 560,880,1050
+//
+// Why this exists: a ported media query can sit in the built stylesheet,
+// match the viewport, and still do nothing. Astro scopes a component's rules
+// as `.tree-node[data-astro-cid-lsutp3lb]` (specificity 0,2,0); a rule ported
+// verbatim as `.tree-node` (0,1,0) loses to it and never applies. Task 15e
+// attempt 4 shipped exactly that: `@media (max-width: 1050px) .tree-node
+// { width: 145px }` was present in dist and the node stayed 180px wide.
+//
+// Checking that the breakpoint *appears* in the built CSS cannot catch this.
+// Only asking the browser what it actually computed can.
+import { spawn } from 'node:child_process';
+import { cpSync, mkdtempSync, readFileSync, rmSync } from 'node:fs';
+import { createServer } from 'node:net';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { chromium } from 'playwright';
+
+const route = process.argv[2];
+if (!route) {
+  console.error('usage: computed-style-diff.mjs <route> [--widths a,b,c]');
+  process.exit(2);
+}
+
+const widthsArg = process.argv.indexOf('--widths');
+const widths =
+  widthsArg === -1
+    ? [520, 560, 600, 620, 720, 800, 880, 1050, 1100, 1600]
+    : process.argv[widthsArg + 1].split(',').map(Number);
+
+// The selectors worth checking are the ones the responsive layer moves at a
+// breakpoint, so read them out of the legacy stylesheet's @media blocks only.
+// Taking every class in the file buries the signal under generic ones like
+// `.active`, whose state the islands own anyway.
+const responsive = readFileSync(new URL('../../responsive.css', import.meta.url), 'utf8');
+const mediaBlocks = [];
+for (const match of responsive.matchAll(/@media[^{]*\{/g)) {
+  let depth = 0;
+  for (let i = match.index; i < responsive.length; i += 1) {
+    if (responsive[i] === '{') depth += 1;
+    else if (responsive[i] === '}') {
+      depth -= 1;
+      if (depth === 0) {
+        mediaBlocks.push(responsive.slice(match.index + match[0].length, i));
+        break;
+      }
+    }
+  }
+}
+const selectors = [...new Set(mediaBlocks.join('\n').match(/\.[a-z][a-z0-9-]*/g) || [])].sort();
+
+// Properties a responsive rule actually moves. Comparing every property would
+// drown the signal in font stacks and inherited colour.
+const PROPERTIES = [
+  'display',
+  'grid-template-columns',
+  'grid-template-rows',
+  'flex-direction',
+  'width',
+  'height',
+  'max-width',
+  'padding',
+  'margin',
+  'gap',
+  'font-size',
+  'position',
+  'inset',
+  'overflow',
+];
+
+const legacyPath = route === 'index' ? 'index.html' : `${route}/index.html`;
+const astroPath = route === 'index' ? '' : `${route}/`;
+
+const staging = mkdtempSync(join(tmpdir(), 'af-csd-'));
+cpSync('dist', join(staging, 'ai-for-dummies'), { recursive: true });
+
+const freePort = () =>
+  new Promise((resolve, reject) => {
+    const probe = createServer();
+    probe.on('error', reject);
+    probe.listen(0, '127.0.0.1', () => {
+      const { port } = probe.address();
+      probe.close(() => resolve(port));
+    });
+  });
+
+const legacyPort = await freePort();
+const astroPort = await freePort();
+const serve = (dir, port) =>
+  spawn('python3', ['-m', 'http.server', String(port), '-d', dir], { stdio: 'ignore' });
+const servers = [serve('.', legacyPort), serve(staging, astroPort)];
+const stop = () => {
+  servers.forEach((s) => s.kill());
+  rmSync(staging, { recursive: true, force: true });
+};
+
+// Every element matching each selector, so a rule that applies to the first
+// node and not the rest cannot pass.
+const collect = ([selectors, properties]) => {
+  const out = {};
+  for (const selector of selectors) {
+    const nodes = [...document.querySelectorAll(selector)];
+    out[selector] = nodes.map((node) => {
+      const style = getComputedStyle(node);
+      return properties
+        .map((property) => `${property}:${style.getPropertyValue(property)}`)
+        .join(';');
+    });
+  }
+  return out;
+};
+
+let failures = 0;
+try {
+  const browser = await chromium.launch();
+  const read = async (url, width) => {
+    const page = await browser.newPage({ viewport: { width, height: 900 } });
+    const response = await page.goto(url, { waitUntil: 'load' });
+    if (!response || !response.ok()) {
+      throw new Error(`${url} returned ${response ? response.status() : 'no response'}`);
+    }
+    await page.waitForTimeout(1500);
+    const styles = await page.evaluate(collect, [selectors, PROPERTIES]);
+    await page.close();
+    return styles;
+  };
+
+  for (const width of widths) {
+    const legacy = await read(`http://localhost:${legacyPort}/${legacyPath}`, width);
+    const astro = await read(`http://localhost:${astroPort}/ai-for-dummies/${astroPath}`, width);
+
+    for (const selector of selectors) {
+      const before = legacy[selector];
+      const after = astro[selector];
+      if (before.length === 0 && after.length === 0) continue;
+      if (before.length !== after.length) {
+        console.log(
+          `${width}px  ${selector}  legacy ${before.length} nodes, astro ${after.length}`,
+        );
+        failures += 1;
+        continue;
+      }
+      let reported = 0;
+      before.forEach((expected, index) => {
+        if (expected === after[index]) return;
+        failures += 1;
+        // Three examples is enough to identify a rule that did not apply.
+        reported += 1;
+        if (reported > 3) return;
+        const differing = expected
+          .split(';')
+          .filter((pair, i) => pair !== after[index].split(';')[i]);
+        const got = after[index].split(';').filter((pair, i) => pair !== expected.split(';')[i]);
+        console.log(`${width}px  ${selector}[${index}]`);
+        console.log(`   legacy ${differing.join(' ')}`);
+        console.log(`   astro  ${got.join(' ')}`);
+      });
+    }
+  }
+
+  await browser.close();
+  console.log(failures === 0 ? 'computed styles match' : `${failures} computed-style differences`);
+  process.exitCode = failures === 0 ? 0 : 1;
+} finally {
+  stop();
+}

.agents/scripts/gate.sh

@@ -52,7 +52,10 @@ pnpm run verify
 # Compare against origin/main and refuse a silent reduction.
 step "assertion coverage"
 current=$(grep -c 'throw new Error' scripts/verify.mjs)
-baseline=$(git show origin/main:scripts/verify.mjs 2>/dev/null | grep -c 'throw new Error' || echo "$current")
+# Task 19 restored the 42 legacy facts and added ten output snapshots: 84 is
+# now the floor, in addition to whatever origin/main currently requires.
+baseline=$(git show origin/main:scripts/verify.mjs 2>/dev/null | grep -c 'throw new Error' || echo 0)
+if [ "$baseline" -lt 84 ]; then baseline=84; fi
 if [ "$current" -lt "$baseline" ]; then
   echo "gate: verify.mjs coverage fell from $baseline to $current assertions." >&2
   echo "      Only verification-engineer may reduce it, with a reason per removal." >&2

.agents/scripts/rendered-text-diff.mjs

@@ -0,0 +1,181 @@
+#!/usr/bin/env node
+// Compare the *rendered* text of a legacy page against its Astro replacement.
+//
+//   node .agents/scripts/rendered-text-diff.mjs full-guide
+//   node .agents/scripts/rendered-text-diff.mjs full-guide --pt
+//
+// Why this exists: scripts/verify.mjs reads the legacy files, so a migrated
+// page can drop half its content and still pass the gate. Task 15d shipped
+// /full-guide/ missing 86 rendered spans -- the entire verification section,
+// the hands-on exercise brief, and both "Clone from Gitea" links -- and every
+// check was green.
+//
+// Static HTML comparison is useless here: the guide's tab panels are injected
+// by an island at runtime, so half the legacy page's markup has no static
+// counterpart. This walks the live DOM instead and skips anything the browser
+// is not painting -- which also drops the hidden Portuguese half of each
+// bilingual pair, so the two sides line up.
+//
+// Requires playwright (devDependency) and two static servers; it starts both.
+import { spawn } from 'node:child_process';
+import { cpSync, mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { createServer } from 'node:net';
+import { chromium } from 'playwright';
+
+// `index` is the landing page: it lives at the repository root, not in a
+// directory of its own, so it needs a different path on the legacy side.
+const route = process.argv[2];
+if (!route) {
+  console.error('usage: rendered-text-diff.mjs <route> [--pt]   e.g. full-guide, or index');
+  process.exit(2);
+}
+
+// `--pt` clicks the language toggle on both pages first. English parity is
+// only half the contract: a page can render every English string and still
+// leave a restored block untranslated, because the Portuguese half is a
+// separate set of nodes. Only /full-guide/ and /rules/ have a toggle.
+const portuguese = process.argv.includes('--pt');
+const legacyPath = route === 'index' ? 'index.html' : `${route}/index.html`;
+const astroPath = route === 'index' ? '' : `${route}/`;
+
+// The built site expects to be served under the configured base path.
+const staging = mkdtempSync(join(tmpdir(), 'af-rtd-'));
+cpSync('dist', join(staging, 'ai-for-dummies'), { recursive: true });
+
+// Ask the kernel for a free port rather than pinning one. Back-to-back runs
+// used to collide: the previous run's server was still holding the fixed port
+// while its staging directory had already been deleted, so every page came
+// back as a 404 and the diff reported the whole route missing.
+const freePort = () =>
+  new Promise((resolve, reject) => {
+    const probe = createServer();
+    probe.on('error', reject);
+    probe.listen(0, '127.0.0.1', () => {
+      const { port } = probe.address();
+      probe.close(() => resolve(port));
+    });
+  });
+
+const legacyPort = await freePort();
+const astroPort = await freePort();
+
+const serve = (dir, port) =>
+  spawn('python3', ['-m', 'http.server', String(port), '-d', dir], { stdio: 'ignore' });
+const servers = [serve('.', legacyPort), serve(staging, astroPort)];
+const stop = () => {
+  servers.forEach((s) => s.kill());
+  rmSync(staging, { recursive: true, force: true });
+};
+
+// Visible text nodes, in document order, whitespace collapsed.
+const visibleText = () => {
+  const out = [];
+  const walk = (node) => {
+    for (const child of node.childNodes) {
+      if (child.nodeType === Node.TEXT_NODE) {
+        const text = child.textContent.replace(/\s+/g, ' ').trim();
+        if (text) out.push(text);
+        continue;
+      }
+      if (child.nodeType !== Node.ELEMENT_NODE) continue;
+      if (child.tagName === 'SCRIPT' || child.tagName === 'STYLE') continue;
+      const style = getComputedStyle(child);
+      if (child.hidden || style.display === 'none' || style.visibility === 'hidden') continue;
+      walk(child);
+    }
+  };
+  walk(document.body);
+  return out;
+};
+
+try {
+  await new Promise((r) => setTimeout(r, 1500));
+  const browser = await chromium.launch();
+  const grab = async (url) => {
+    const page = await browser.newPage({ viewport: { width: 1400, height: 1000 } });
+    const response = await page.goto(url, { waitUntil: 'load' });
+    // A 404 renders as four spans of python's error page and the diff then
+    // reports the entire route as missing, which reads exactly like a real
+    // regression. Fail loudly instead.
+    if (!response || !response.ok()) {
+      throw new Error(`${url} returned ${response ? response.status() : 'no response'}`);
+    }
+    // The islands hydrate and render their initial panel on load; without this
+    // every panel's copy reads as missing.
+    await page.waitForTimeout(1200);
+    if (portuguese) {
+      const toggle = await page.$('[data-lang="pt"]');
+      if (!toggle) throw new Error(`no language toggle on ${url}`);
+      await toggle.click();
+      await page.waitForTimeout(1200);
+    }
+    // Islands hydrate at their own pace, and the language toggle repaints in
+    // more than one frame. A single read after a fixed wait is flaky, so read
+    // until two consecutive reads agree.
+    let spans = await page.evaluate(visibleText);
+    for (let i = 0; i < 10; i += 1) {
+      await page.waitForTimeout(300);
+      const next = await page.evaluate(visibleText);
+      if (next.length === spans.length && next.every((span, j) => span === spans[j])) {
+        spans = next;
+        break;
+      }
+      spans = next;
+    }
+    await page.close();
+    return spans;
+  };
+
+  const legacy = await grab(`http://localhost:${legacyPort}/${legacyPath}`);
+  const astro = await grab(`http://localhost:${astroPort}/ai-for-dummies/${astroPath}`);
+  await browser.close();
+
+  // Count occurrences, not membership. A set comparison reports zero when a
+  // string the legacy page paints four times is painted three times here --
+  // exactly the kind of near-miss that got past the earlier checks.
+  const tally = (spans) => {
+    const counts = new Map();
+    for (const span of spans) counts.set(span, (counts.get(span) || 0) + 1);
+    return counts;
+  };
+
+  const legacyCounts = tally(legacy);
+  const astroCounts = tally(astro);
+
+  const missing = [];
+  for (const [span, count] of legacyCounts) {
+    const short = count - (astroCounts.get(span) || 0);
+    for (let i = 0; i < short; i += 1) missing.push(span);
+  }
+
+  // Both directions. A string the Astro page paints and the legacy page does
+  // not is just as wrong: it means a translation was invented, or an English
+  // string was left standing where the legacy page swaps it.
+  const extra = [];
+  for (const [span, count] of astroCounts) {
+    const over = count - (legacyCounts.get(span) || 0);
+    for (let i = 0; i < over; i += 1) extra.push(span);
+  }
+
+  // Order counts too. Both pages can paint the same strings while a block
+  // sits in the wrong place -- the Portuguese eyebrow, or a reordered card
+  // deck -- and a count-only comparison calls that clean.
+  const firstOutOfOrder = legacy.findIndex((span, i) => astro[i] !== span);
+
+  const mode = portuguese ? 'pt' : 'en';
+  console.log(
+    `${mode} · legacy ${legacy.length} spans · astro ${astro.length} spans · missing ${missing.length} · extra ${extra.length}`,
+  );
+  for (const span of missing) console.log(`  - ${span}`);
+  for (const span of extra) console.log(`  + ${span}`);
+  if (firstOutOfOrder !== -1) {
+    console.log(`  order diverges at span ${firstOutOfOrder}`);
+    console.log(`    legacy: ${legacy[firstOutOfOrder]}`);
+    console.log(`    astro:  ${astro[firstOutOfOrder]}`);
+  }
+  process.exitCode = missing.length === 0 && extra.length === 0 && firstOutOfOrder === -1 ? 0 : 1;
+} finally {
+  stop();
+}

.agents/scripts/snapshot-route.mjs

@@ -27,8 +27,12 @@ const text = html
   .replace(/<style[\s\S]*?<\/style>/gi, '')
   .replace(/<!--[\s\S]*?-->/g, '')
   .replace(/<[^>]+>/g, '\n')
-  .replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>')
-  .replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&nbsp;/g, ' ')
+  .replace(/&amp;/g, '&')
+  .replace(/&lt;/g, '<')
+  .replace(/&gt;/g, '>')
+  .replace(/&quot;/g, '"')
+  .replace(/&#0?39;/g, "'")
+  .replace(/&nbsp;/g, ' ')
   .split('\n')
   .map((line) => line.trim())
   .filter(Boolean)

.agents/skills/content-migration/SKILL.md

@@ -1,6 +1,9 @@
 ---
 name: content-migration
-description: Move bilingual copy out of app.js and catalog.js into typed Astro content collections without losing or altering a single string. Use for any task that relocates user-visible text.
+description:
+  Move bilingual copy out of app.js and catalog.js into typed Astro content
+  collections without losing or altering a single string. Use for any task that
+  relocates user-visible text.
 ---
 
 # Content migration
@@ -9,8 +12,8 @@ description: Move bilingual copy out of app.js and catalog.js into typed Astro c
 
 - `app.js` — ~50 `{ en, pt }` keys across `phases`, `handsOnPrompts`,
   `modelGuide`, `skillSources`, `skillInstallPrompts`
-- `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with
-  `id`, `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`,
+- `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with `id`,
+  `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`,
   `improved` (full markdown)
 
 These are hand-written translations with deliberate tone. **Copy them. Never

.agents/skills/motion/SKILL.md

@@ -1,6 +1,9 @@
 ---
 name: motion
-description: Add or review animation on the ai-for-dummies site — transitions, state changes, view transitions. Use when any element moves, fades, or transforms, or when auditing existing motion for performance and reduced-motion support.
+description:
+  Add or review animation on the ai-for-dummies site — transitions, state
+  changes, view transitions. Use when any element moves, fades, or transforms,
+  or when auditing existing motion for performance and reduced-motion support.
 ---
 
 # Motion
@@ -22,10 +25,14 @@ If there is no answer, ship it static. That is a legitimate, common outcome.
 
 ```css
 .panel {
-  transition: opacity 180ms cubic-bezier(.2,0,0,1),
-              transform 180ms cubic-bezier(.2,0,0,1);
+  transition:
+    opacity 180ms cubic-bezier(0.2, 0, 0, 1),
+    transform 180ms cubic-bezier(0.2, 0, 0, 1);
+}
+.panel[data-state='entering'] {
+  opacity: 0;
+  transform: translateY(6px);
 }
-.panel[data-state='entering'] { opacity: 0; transform: translateY(6px); }
 ```
 
 - **`transform` and `opacity` only.** Animating `width`/`height`/`top`/`left`
@@ -39,14 +46,18 @@ If there is no answer, ship it static. That is a legitimate, common outcome.
 
 ```css
 @media (prefers-reduced-motion: reduce) {
-  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
-      transition-duration: .01ms !important; scroll-behavior: auto !important; }
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
 }
 ```
 
-Then **test it**: DevTools → Rendering → Emulate `prefers-reduced-motion:
-reduce`. The end state must still be correct and the UI still usable. Reduced,
-not broken.
+Then **test it**: DevTools → Rendering → Emulate
+`prefers-reduced-motion: reduce`. The end state must still be correct and the UI
+still usable. Reduced, not broken.
 
 ## Page transitions
 

.agents/skills/verify-contract/SKILL.md

@@ -1,6 +1,9 @@
 ---
 name: verify-contract
-description: Evolve scripts/verify.mjs across the Astro migration without losing coverage. Use whenever a verify assertion fails because of a refactor, or when adding checks for new architecture.
+description:
+  Evolve scripts/verify.mjs across the Astro migration without losing coverage.
+  Use whenever a verify assertion fails because of a refactor, or when adding
+  checks for new architecture.
 ---
 
 # The verification contract
@@ -29,13 +32,13 @@ report. Nobody else may reduce coverage.
 
 ## Translating assertions
 
-| Kind | Old | New |
-| --- | --- | --- |
-| Content presence | `html.includes('data-phase="plan"')` | same token, read from `dist/full-guide/index.html` |
-| Implementation detail | `js.includes('renderTree')` | assert the rendered output has the tree UI, not that a function is named that |
-| Asset version | `'app.js?v=20260904-vote-widget'` | assert the built HTML references a hashed asset |
+| Kind                  | Old                                  | New                                                                           |
+| --------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
+| Content presence      | `html.includes('data-phase="plan"')` | same token, read from `dist/full-guide/index.html`                            |
+| Implementation detail | `js.includes('renderTree')`          | assert the rendered output has the tree UI, not that a function is named that |
+| Asset version         | `'app.js?v=20260904-vote-widget'`    | assert the built HTML references a hashed asset                               |
 
-Implementation-detail assertions are the dangerous ones: they *look* deletable.
+Implementation-detail assertions are the dangerous ones: they _look_ deletable.
 They are pinning a feature. Replace with an output-level assertion of the same
 feature; never drop.
 
@@ -54,9 +57,9 @@ Commit the snapshots. They are the migration's regression net.
 
 ## Extend audit-ui.mjs
 
-It rejects external `<script>`/`<link>` but **misses external URLs inside CSS** —
-which is exactly how the broken Google Fonts `@font-face` in `styles.css:1` got
-into a "dependency-free" site. Add:
+It rejects external `<script>`/`<link>` but **misses external URLs inside CSS**
+— which is exactly how the broken Google Fonts `@font-face` in `styles.css:1`
+got into a "dependency-free" site. Add:
 
 ```js
 if (/@import|src:\s*url\(['"]?https?:|url\(['"]?https?:/i.test(css))

.agents/snapshots/built-css-values.json

@@ -0,0 +1,292 @@
+{
+  "colors": [
+    "#081621",
+    "#0b1b27",
+    "#0c1a25",
+    "#0f2230",
+    "#102536",
+    "#102837",
+    "#102b3a",
+    "#112a3b",
+    "#122534",
+    "#123042",
+    "#132b3b",
+    "#172f42",
+    "#173046",
+    "#173245",
+    "#173b4f",
+    "#18364a",
+    "#19364a",
+    "#1a4b42",
+    "#1c425a",
+    "#1d455b",
+    "#1f3a4b",
+    "#215675",
+    "#244760",
+    "#29455a",
+    "#2a4150",
+    "#315f80",
+    "#344c5d",
+    "#41596b",
+    "#426070",
+    "#466274",
+    "#486175",
+    "#496274",
+    "#527085",
+    "#527f9f",
+    "#557080",
+    "#572f32",
+    "#596f9a",
+    "#5b7098",
+    "#65717a",
+    "#697b89",
+    "#6b668f",
+    "#6c6898",
+    "#7c78a8",
+    "#80c69a",
+    "#80c69a20",
+    "#80c69a22",
+    "#8ca1af",
+    "#91aab7",
+    "#9ba7a5",
+    "#9bcba7",
+    "#9eabb4",
+    "#9eb0bb",
+    "#a7483f",
+    "#a9b6be",
+    "#a9bcc8",
+    "#a9e3ae",
+    "#aebbc3",
+    "#aebfc7",
+    "#aebfc9",
+    "#afbec7",
+    "#b0bac1",
+    "#b5c0c7",
+    "#b7c7d1",
+    "#b8c8d2",
+    "#b9c8d0",
+    "#b9c8d1",
+    "#bed0dc",
+    "#bfccd4",
+    "#c1d1d8",
+    "#c4cdd3",
+    "#c6d2d7",
+    "#c9d5dc",
+    "#cbd9e1",
+    "#d0d5d2",
+    "#d4dfe3",
+    "#d5dde2",
+    "#d5f1d6",
+    "#d6e1e4",
+    "#d8dee2",
+    "#e5e3ef",
+    "#e5eeeb",
+    "#e89a8e",
+    "#e8ecee",
+    "#e9ecee",
+    "#e9eeed",
+    "#ebbf58",
+    "#eceaf5",
+    "#eceff0",
+    "#edf0f1",
+    "#eeedf6",
+    "#efc76b",
+    "#efc76b18",
+    "#f0eef8",
+    "#f1f0f7",
+    "#f5f4f1",
+    "#f6f3ed",
+    "#ffb5a8",
+    "#ffd7d0",
+    "#fff",
+    "#ffffff05",
+    "#ffffff06",
+    "#ffffff1f",
+    "#ffffff2b",
+    "#ffffff2d",
+    "#ffffff30",
+    "#ffffff32",
+    "#ffffff40",
+    "#ffffff42",
+    "#ffffff50",
+    "#ffffff66",
+    "rgb(255 255 255 / 14.1176%)",
+    "rgb(255 255 255 / 22.7451%)",
+    "rgb(255 255 255 / 25.098%)",
+    "rgb(255 255 255 / 31.3725%)"
+  ],
+  "sizes": [
+    "01em",
+    "1em",
+    "1px",
+    "1.2em",
+    "1.45em",
+    "1.5em",
+    "1.8em",
+    "02em",
+    "2px",
+    "2.4vw",
+    "2.5vw",
+    "2.6vw",
+    "3em",
+    "3px",
+    "3vw",
+    "3.3vw",
+    "3.4vw",
+    "04em",
+    "4px",
+    "4vw",
+    "05em",
+    "5em",
+    "5px",
+    "5vw",
+    "5.6vw",
+    "06em",
+    "6px",
+    "6vw",
+    "07em",
+    "7px",
+    "7vw",
+    "08em",
+    "8px",
+    "8vw",
+    "8.3vw",
+    "09em",
+    "9em",
+    "9px",
+    "9vw",
+    "10px",
+    "10.5px",
+    "11px",
+    "12em",
+    "12px",
+    "12vh",
+    "13px",
+    "14px",
+    "15px",
+    "16px",
+    "17px",
+    "17vw",
+    "18px",
+    "19px",
+    "20px",
+    "22px",
+    "23px",
+    "24px",
+    "25px",
+    "26px",
+    "27px",
+    "28px",
+    "30px",
+    "32px",
+    "34px",
+    "35em",
+    "35px",
+    "36px",
+    "38px",
+    "40px",
+    "42px",
+    "44px",
+    "045em",
+    "45px",
+    "46px",
+    "48px",
+    "50px",
+    "52px",
+    "54px",
+    "55px",
+    "56px",
+    "58px",
+    "60px",
+    "62px",
+    "64px",
+    "65px",
+    "70px",
+    "72px",
+    "075em",
+    "75px",
+    "76px",
+    "78px",
+    "80px",
+    "82px",
+    "85px",
+    "90px",
+    "92px",
+    "95px",
+    "96px",
+    "100px",
+    "105px",
+    "108px",
+    "110px",
+    "112px",
+    "120px",
+    "126px",
+    "130px",
+    "135px",
+    "140px",
+    "145px",
+    "148px",
+    "150px",
+    "160px",
+    "164px",
+    "170px",
+    "175px",
+    "180px",
+    "190px",
+    "200px",
+    "210px",
+    "220px",
+    "230px",
+    "240px",
+    "255px",
+    "260px",
+    "270px",
+    "280px",
+    "290px",
+    "300px",
+    "305px",
+    "320px",
+    "330px",
+    "340px",
+    "360px",
+    "380px",
+    "390px",
+    "410px",
+    "420px",
+    "440px",
+    "460px",
+    "500px",
+    "520px",
+    "530px",
+    "540px",
+    "560px",
+    "570px",
+    "600px",
+    "620px",
+    "650px",
+    "680px",
+    "700px",
+    "720px",
+    "730px",
+    "750px",
+    "780px",
+    "800px",
+    "850px",
+    "880px",
+    "900px",
+    "950px",
+    "1000px",
+    "1040px",
+    "1050px",
+    "1100px",
+    "1400px",
+    "1420px",
+    "1500px",
+    "1600px",
+    "1840px",
+    "1920px",
+    "1960px",
+    "2200px",
+    "2880px"
+  ]
+}

.agents/snapshots/full-guide.txt

@@ -2,12 +2,19 @@ AI For Dummies — Field Guide
 A
 field guide
 01 fleet
+01 frota
+02 worktrees
 02 worktrees
 03 models
+03 modelos
+04 skills
 04 skills
 05 create
+05 criar
 06 field kit
+06 kit de campo
 07 hands-on
+07 prática
 08 verify
 review submissions ↗
 EN
@@ -15,72 +22,156 @@ EN
 PT
 AI ENGINEERING
 01 / 2026
+ENGENHARIA DE IA
+01 / 2026
 A presentation for humans who ship
+Uma apresentação para quem entrega software
 AI for
 dummies.
-You do not need an army of models. You need a system: one mind to frame the work, several hands to execute it, and a clean boundary between every task.
+You do not need an army of models. You need a system: one mind to frame the work,
+several hands to execute it, and a clean boundary between every task.
+Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para
+enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada
+tarefa.
 FIELD NOTE / 001
+NOTA DE CAMPO / 001
 Ship the
 system.
+Entregue o
+sistema.
 Skills · agents · worktrees · proof
+Skills · agentes · worktrees · evidências
+Uma apresentação para quem entrega software
+AI for
+dummies.
+Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para
+enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada tarefa.
+NOTA DE CAMPO / 001
+Entregue o
+sistema.
+Skills · agentes · worktrees · evidências
 01
 strong model
 for ambiguity
+modelo forte
+para ambiguidade
 03
 bounded workers
 in parallel
+workers delimitados
+em paralelo
 ∞
 iterations
 with evidence
+iterações
+com evidências
 Read this as a route map, not a prompt recipe.
+Leia isto como um mapa de rota, não como uma receita de prompt.
+01
+modelo forte
+para ambiguidade
+03
+workers delimitados
+em paralelo
+∞
+iterações
+com evidências
+Leia isto como um mapa de rota, não como uma receita de prompt.
 RULE ZERO
+REGRA ZERO
 Strong model for ambiguity.
 Light model for bounded work.
+Modelo forte para ambiguidade.
+Modelo leve para trabalho delimitado.
+THINK
+MAKE
+REGRA ZERO
+Modelo forte para ambiguidade.
+Modelo leve para trabalho delimitado.
 THINK
 MAKE
 A small fleet
+Uma pequena frota
 coordination before parallelism
+coordenação antes do paralelismo
 ORCHESTRATOR
+ORQUESTRADOR
 Decides what
 needs to happen.
+Decide o que
+precisa acontecer.
 Opus / reasoning
 →
 UI
 Component and visual states
+Componentes e estados visuais
 agent/ui
 TEST
 Acceptance cases
+Casos de aceitação
 agent/tests
 DOCS
 Guide and examples
+Guia e exemplos
 agent/docs
-The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line.
+Interface worker
+Receives: component contract + visual states
+Returns: focused diff + viewport evidence
+The orchestrator preserves intent, writes small contracts, and gathers results that can
+be verified. It does not need to type every line.
+O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados
+verificáveis. Ele não precisa digitar cada linha.
 Why the boundary matters
+Por que a fronteira importa
 one vague task / three predictable failures
+uma tarefa vaga / três falhas previsíveis
 01
 Context soup
+Sopa de contexto
 Every worker reads everything. Nobody knows which facts are load-bearing.
+Cada worker lê tudo. Ninguém sabe quais fatos são essenciais.
 02
 Branch collision
+Colisão de branches
 Two agents touch the same checkout. The fastest path becomes conflict resolution.
+Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de
+conflitos.
 03
 Confident drift
+Desvio confiante
 The diff is polished, but no one checks whether it solved the original problem.
+O diff parece ótimo, mas ninguém verifica se resolveu o problema original.
 The subagent loop
+O ciclo de subagentes
 Click a phase.
 See the handoff.
-Delegation means moving one bounded task into a smaller context—not giving away responsibility.
+Clique em uma fase.
+Veja a passagem.
+Delegation means moving one bounded task into a smaller context—not giving away
+responsibility.
+Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da
+responsabilidade.
 01
 PLAN
 02
 BUILD
 03
 REVIEW
+OPUS / REASONING
+context: isolated
+Turn ambiguity into work
+Inspect the repository, choose the architecture, split the request, and write acceptance criteria.
+plan → decompose → define acceptance
 What crosses contexts
+O que atravessa contextos
 brief → diff → evidence
+brief → diff → evidência
 Package
+Pacote
 Contains
+Contém
 Why it matters
+Por que importa
 Brief
 goal, files, boundaries
 stops the worker inventing the problem
@@ -94,73 +185,153 @@ Diff
 small, reviewable change
 integration and discard stay cheap
 Git worktrees
+Git worktrees
 One branch
 per
 hand.
-A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared.
+Uma branch
+por
+mão.
+A worktree is another directory linked to the same repository. Each agent gets its own
+checkout and index; history remains shared.
+Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu
+próprio checkout e índice; o histórico continua compartilhado.
 Select a node to inspect its checkout, owner, and next action.
+Selecione um nó para inspecionar checkout, responsável e próxima ação.
 repository topology
+topologia do repositório
+4 checkouts
 4 checkouts
 ROOT
+RAIZ
 main
 ● clean
+● limpo
 UI AGENT
+AGENTE DE UI
 agent/ui
 3 files · working
+3 arquivos · trabalhando
 TEST AGENT
+AGENTE DE TESTES
 agent/tests
 8 checks · ready
+8 verificações · pronto
 DOCS AGENT
+AGENTE DE DOCS
 agent/docs
 2 pages · review
+2 páginas · revisão
+OWNER
+Orchestrator
+CHECKOUT
+./project
+Shared history and integration point. Workers never edit here.
+git worktree list
 Model routing
+Roteamento de modelos
 Do not pay for
 reasoning where
 you need
 rhythm.
+Não pague por
+raciocínio onde precisa
+de
+ritmo.
 Choose a job to see why the model profile changes.
+Escolha um trabalho para entender por que o perfil do modelo muda.
 Work
+Trabalho
 Profile
+Perfil
 Prompt shape
+Formato do prompt
 Plan
+Planejar
 strong / broad
 What changes? What can break?
 Build
+Construir
 fast / focused
 Implement this slice. Run these checks.
 Explore
+Explorar
 read-only / light
 Find where this contract is used.
 Review
+Revisar
 independent
 Does the diff satisfy the brief?
+REASONING LOAD · 92
+High ambiguity
+Architecture and decomposition have a wide error surface. Spend reasoning here.
 Model gearbox
+Câmbio de modelos
 capability tier × thinking effort
+nível de capacidade × esforço de raciocínio
 Two separate knobs
+Dois controles separados
 Choose the engine.
 Then choose the
 gear.
-A stronger model changes the capability ceiling. Higher reasoning effort gives that model more room to work. Start with the lightest combination that passes your real checks, then move one knob at a time.
+Escolha o motor.
+Depois escolha a
+marcha.
+A stronger model changes the capability ceiling. Higher reasoning effort gives that
+model more room to work. Start with the lightest combination that passes your real
+checks, then move one knob at a time.
+Um modelo mais forte muda o teto de capacidade. Mais esforço de raciocínio dá mais
+espaço para esse modelo trabalhar. Comece com a combinação mais leve que passa seus
+checks e mova um controle por vez.
 OPENAI
 CLAUDE
 GEMINI
+OpenAI
+OFFICIAL SOURCE ↗
+Sol · Terra · Luna
+GPT-5.6 separates capability tier from reasoning effort. Sol is flagship, Terra balances performance and cost, and Luna targets efficient high-volume work.
 REASONING / THINKING
+RACIOCÍNIO / PENSAMENTO
 LOW
+BAIXO
 bounded + fast
+delimitado + rápido
 MEDIUM
+MÉDIO
 default start
+ponto inicial
 HIGH
+ALTO
 complex + costly
+complexo + custoso
+MEDIUM
+Balanced starting point for normal implementation, tests, and review. Measure before moving up.
+reasoning: { effort: "medium" }
 ROUTING RULE
-Use strong models for ambiguity and judgment. Use lighter models for bounded execution. Raise effort only when evaluation shows a gain.
+REGRA DE ROTEAMENTO
+Use strong models for ambiguity and judgment. Use lighter models for bounded execution.
+Raise effort only when evaluation shows a gain.
+Use modelos fortes para ambiguidade e julgamento. Use modelos leves para execução
+delimitada. Aumente o esforço apenas quando a avaliação mostrar ganho.
 Skills
+Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências,
+scripts e assets. Não é memória mágica e não substitui critérios de aceitação.
 Write the right way
 once.
-A skill is a reusable procedure. It can carry instructions, references, scripts, and assets. It is not magical memory, and it does not replace acceptance criteria.
+Escreva do jeito certo
+uma vez.
+A skill is a reusable procedure. It can carry instructions, references, scripts, and
+assets. It is not magical memory, and it does not replace acceptance criteria.
+Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências,
+scripts e assets. Não é memória mágica e não substitui critérios de aceitação.
 01 / trigger clearly
+01 / defina o gatilho
 02 / load detail on demand
+02 / carregue detalhes sob demanda
 03 / return evidence
+03 / devolva evidências
 SKILL PACKAGE
+PACOTE DE SKILL
 SKILL.md
 procedure and limits
 references/
@@ -169,30 +340,64 @@ scripts/
 repeatable checks
 assets/
 templates and examples
+◇
+SKILL.md
+Trigger, procedure, constraints, and the exact evidence the agent must return.
+select another file to explore
 name: review-ui · check focus, mobile, reduced motion · run verification · return evidence
 Create a skill
+Criar uma skill
 repeatable pain → reusable judgment
+atrito repetido → julgamento reutilizável
 The skill forge
+A forja de skills
 Teach the decision.
 Keep the context
 light.
-Do not package everything you know. Capture the non-obvious choices that repeatedly improve an outcome, then prove the skill changes behavior.
+Ensine a decisão.
+Mantenha o contexto
+leve.
+Do not package everything you know. Capture the non-obvious choices that repeatedly
+improve an outcome, then prove the skill changes behavior.
+Não empacote tudo o que você sabe. Capture as escolhas não óbvias que melhoram
+resultados repetidamente e prove que a skill muda o comportamento.
 01
 Observe
+Observar
 find repeated friction
+encontre atrito repetido
 02
 Define trigger
+Definir gatilho
 route precisely
+roteie com precisão
 03
 Choose anatomy
+Escolher anatomia
 only needed files
+apenas arquivos necessários
 04
 Write guidance
+Escrever orientação
 decisions, not trivia
+decisões, não trivialidades
 05
 Validate
+Validar
 test real behavior
+teste comportamento real
+01
+QUESTION
+Start from repeated friction
+Which non-obvious decision keeps being rediscovered?
+ACTION
+Collect two or three realistic requests. Separate durable judgment from one project’s temporary details.
+ARTIFACT
+A narrow capability and concrete examples.
+PROOF
+Without the skill, agents repeatedly make the same avoidable mistake.
 OUTPUT / SKILL PACKAGE
+SAÍDA / PACOTE DE SKILL
 review-ui/
 ├── SKILL.md
 ├── agents/
@@ -202,8 +407,10 @@ review-ui/
 └── scripts/
 └── verify.mjs
 VALIDATE
+VALIDAR
 quick_validate.py ./review-ui
 AFTER REAL USE
+APÓS USO REAL
 observe failure
 →
 sharpen one rule
@@ -211,35 +418,79 @@ sharpen one rule
 retest behavior
 →
 keep it narrow
+observar falha
+→
+refinar uma regra
+→
+retestar comportamento
+→
+manter estreita
 Common skills
+Skills comuns
 choose behavior before model
+escolha o comportamento antes do modelo
 The field kit
+O kit de campo
 Different jobs.
 Different
 instincts.
-A skill changes how an agent approaches work. Some shape communication. Others enforce research, debugging, review, or completion discipline. Select one to inspect its operating rule and verified source.
+Trabalhos diferentes.
+Instintos
+diferentes.
+A skill changes how an agent approaches work. Some shape communication. Others enforce
+research, debugging, review, or completion discipline. Select one to inspect its
+operating rule and verified source.
+Uma skill muda como o agente aborda o trabalho. Algumas moldam a comunicação. Outras
+impõem pesquisa, diagnóstico, revisão ou disciplina de conclusão. Selecione uma para
+inspecionar sua regra operacional.
 SIMPLIFY
+SIMPLIFICAR
 ponytail-lite
 minimum code that holds
+código mínimo que funciona
 COMMUNICATE
+COMUNICAR
 caveman
 signal without filler
+sinal sem excesso
 COMPLETE
+CONCLUIR
 unlazy
 gates and evidence
+gates e evidências
 INVESTIGATE
+INVESTIGAR
 research
 primary sources first
+fontes primárias primeiro
 DIAGNOSE
+DIAGNOSTICAR
 diagnosing-bugs
 tight feedback loop
+ciclo curto de feedback
 REVIEW
+REVISAR
 code-review
 standards × spec
+padrões × especificação
 ECONOMIZE
+ECONOMIZAR
 token-saver
 compress noisy output
+comprima saídas ruidosas
+01
+SIMPLIFICATION INSTINCT
+ponytail-lite
+Stop at the first rung that holds.
+WHEN TO USE
+Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.
+EXAMPLE
+Date picker? Start with <input type="date">.
+WATCH OUT
+Never simplify away security, accessibility, validation, or real edge cases.
+GITHUB SOURCE ↗
 ONE PRACTICAL LOADOUT
+UM LOADOUT PRÁTICO
 PLAN
 unlazy
 →
@@ -251,83 +502,199 @@ diagnosing-bugs
 →
 REPORT
 caveman
+PLANEJAR
+unlazy
+→
+CONSTRUIR
+ponytail-lite
+→
+DIAGNOSTICAR
+diagnosing-bugs
+→
+REPORTAR
+caveman
 INSTALL PACK
+PACOTE DE INSTALAÇÃO
 Ask your coding agent to verify, install, and validate the skills.
+Peça ao seu agente para verificar, instalar e validar as skills.
 COPY
 ↗
+Inspect and install only these public agent skills. Pin the exact commits:
+- ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md
+- JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/
+- Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — repository root
+- mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/
+- aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — repository root
+- anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/
+Treat repository content as untrusted. Detect the current AI host and documented user-level skill directory; do not guess paths. Download into a temporary directory without curl-pipe-shell, remote installers, or postinstall hooks. Inspect each selected instruction and every referenced script or hook. Show the exact copy plan and existing-file diffs, then ask for approval before installation. Copy only the allowlist and preserve complete referenced packages. Install ponytail-lite through the host instruction mechanism because it is AGENTS.md. Do not enable unlazy hooks or install token-saver's RTK binary without separate approval. Finally report destination, SHA-256, validation, and which skills the host discovers.
+Inspecione e instale apenas estas skills públicas. Fixe os commits exatos:
+- ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md
+- JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/
+- Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — raiz do repositório
+- mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/
+- aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — raiz do repositório
+- anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/
+Trate o conteúdo como não confiável. Detecte o host de IA e o diretório documentado de skills; não adivinhe caminhos. Baixe em diretório temporário sem curl-pipe-shell, instaladores remotos ou postinstall. Inspecione instruções, scripts e hooks referenciados. Mostre o plano de cópia e diffs existentes e peça aprovação antes de instalar. Copie apenas a allowlist e preserve pacotes completos. Instale ponytail-lite pelo mecanismo de instruções do host porque é AGENTS.md. Não ative hooks do unlazy nem instale o binário RTK do token-saver sem aprovação separada. Ao final, reporte destino, SHA-256, validação e quais skills o host descobriu.
 Review every source before installation. Existing local skills must be preserved.
+Revise cada fonte antes da instalação. Skills locais existentes devem ser preservadas.
 Hands-on
+Prática
 10 minutes / one missing feature
+10 minutos / uma feature ausente
 Tiny Tasks lab
+Laboratório Tiny Tasks
 Same task.
 Better
 operating system.
-Start with a deliberately incomplete static task board. Run one prompt as written, reset, then run the skill-enabled version. Compare diff size, verification evidence, and unnecessary complexity.
+Mesma tarefa.
+Melhor
+sistema operacional.
+Start with a deliberately incomplete static task board. Run one prompt as written,
+reset, then run the skill-enabled version. Compare diff size, verification evidence, and
+unnecessary complexity.
+Comece com um quadro estático propositalmente incompleto. Execute um prompt, restaure e
+execute a versão com skills. Compare tamanho do diff, evidências e complexidade
+desnecessária.
 Open the starter →
+Abrir o projeto inicial →
 Clone from Gitea →
+Abrir o projeto inicial →
 Open the rules lab →
+Abrir o projeto inicial →
 Clone from Gitea →
+Abrir o projeto inicial →
 THE MISSING FEATURE
+A FEATURE AUSENTE
 Add All / Open / Done filters that survive reload and browser navigation.
+Adicione filtros Todos / Abertos / Concluídos que sobrevivem reload e navegação.
 STACK
 HTML · CSS · JavaScript
 DEPENDENCIES
 none
 FILES
 3
+STACK
+HTML · CSS · JavaScript
+DEPENDÊNCIAS
+nenhuma
+ARQUIVOS
+3
 RUN A
 Good prompt
+Bom prompt
 COPY
 ↗
+Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
+Add an All / Open / Done filter to Tiny Tasks.
+Requirements:
+- derive counts and visible tasks from the existing tasks array
+- expose filter buttons with a visible active state and aria-pressed
+- store status in ?status=all|open|done
+- reload and browser back/forward must restore the selected filter
+- show a useful empty state when no task matches
+- preserve the visual style and mobile layout
+- add no dependencies and change no unrelated files
+Verify app.js syntax and exercise every filter plus URL navigation.
+Return changed files, checks run, results, and remaining risk.
+Trabalhe apenas em hands-on/starter. É HTML, CSS e JavaScript sem dependências.
+Adicione um filtro Todos / Abertos / Concluídos ao Tiny Tasks.
+Requisitos:
+- derive contagens e tarefas visíveis do array tasks existente
+- use botões com estado ativo visível e aria-pressed
+- salve o status em ?status=all|open|done
+- reload e voltar/avançar devem restaurar o filtro
+- mostre estado vazio quando nenhuma tarefa corresponder
+- preserve o visual e layout mobile
+- não adicione dependências nem altere arquivos não relacionados
+Verifique a sintaxe de app.js e teste filtros e navegação por URL.
+Retorne arquivos alterados, checks, resultados e risco restante.
 Clear context · constraints · acceptance · evidence
+Contexto claro · restrições · aceitação · evidência
 RUN B
 Good prompt + skills
+Bom prompt + skills
 COPY
 ↗
+Use $ponytail-lite and $webapp-testing.
+Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
+Add an All / Open / Done filter to Tiny Tasks.
+Apply $ponytail-lite: inspect first, reuse the current render flow, prefer native URL and button APIs, and avoid dependencies or abstractions.
+Apply $webapp-testing: verify all filters, aria-pressed, reload, browser back/forward, empty state, and one mobile viewport.
+Acceptance:
+- counts and visible tasks come from the existing tasks array
+- ?status=all|open|done is the source of truth
+- invalid status falls back safely to all
+- style remains consistent; unrelated files remain untouched
+Return the smallest working diff and concrete verification evidence.
+Use $ponytail-lite e $webapp-testing.
+Trabalhe apenas em hands-on/starter. É HTML, CSS e JavaScript sem dependências.
+Adicione um filtro Todos / Abertos / Concluídos ao Tiny Tasks.
+Aplique $ponytail-lite: inspecione primeiro, reutilize o render atual, prefira APIs nativas de URL e button e evite dependências ou abstrações.
+Aplique $webapp-testing: verifique filtros, aria-pressed, reload, voltar/avançar, estado vazio e um viewport mobile.
+Aceitação:
+- contagens e tarefas visíveis vêm do array tasks existente
+- ?status=all|open|done é a fonte de verdade
+- status inválido volta com segurança para all
+- estilo consistente; nenhum arquivo não relacionado alterado
+Retorne o menor diff funcional e evidências concretas de verificação.
 Same contract · explicit working methods · stronger proof
+Mesmo contrato · métodos explícitos · prova mais forte
 COMPARE THE RUNS
+COMPARE AS EXECUÇÕES
 01
 Files changed
+Arquivos alterados
 02
 New dependencies
+Novas dependências
 03
 Checks actually run
+Checks executados
 04
 Evidence returned
+Evidências retornadas
 THE HUMAN JOB
+O PAPEL HUMANO
 The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.
+O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo
+seus.
 START HERE
-Begin with one agent and one skill. Add parallelism only when the tasks are truly independent.
+COMECE AQUI
+Begin with one agent and one skill. Add parallelism only when the tasks are truly
+independent.
+Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem
+realmente independentes.
 Verification
 run each gate separately
 Checks become evidence
 Three layers.
 Run each one alone.
-Run a gate on its own line, print its exit code, attach the output. The result is the deliverable.
+Run a gate on its own line, print its exit code, attach the output. The result is the
+deliverable.
 01 · STATIC
 Lint and types
 Format, lint, type-check. Fast and scoped to one file. Run on every save.
-pnpm lint; echo "lint=$?"
-pnpm typecheck; echo "typecheck=$?"
+pnpm lint; echo "lint=$?" pnpm typecheck; echo "typecheck=$?"
 02 · BEHAVIOR
 Unit and contract
 Tests that repeat. Run before claiming done.
-pnpm test; echo "test=$?"
-cd services/api && go test ./...
+pnpm test; echo "test=$?" cd services/api && go test ./...
 03 · INTEGRATION
 Real UI and API
-Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.
-pnpm check:ui; echo "ui=$?"
-TURBO_FORCE=true pnpm e2e
+Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile
+overflow and a missing 404.
+pnpm check:ui; echo "ui=$?" TURBO_FORCE=true pnpm e2e
 FOUR WAYS A GREEN REPORT IS FALSE
 1
 Pipe a gate
-tail, grep, or head hide the real exit code — a pipeline returns the last command's status.
+tail, grep, or head hide the real exit code — a pipeline returns the last command's
+status.
 2
 Swallow a rejection
 A silent
 .catch(() => {})
-hides a panic, an upstream limit, or a partial failure.
+hides a panic, an upstream limit, or a partial
+failure.
 3
 Trust the cache
 Turbo caches results. A gate that "passes" may not have run — use
@@ -335,7 +702,8 @@ TURBO_FORCE=true
 .
 4
 Skip the third layer
-Lint and unit can both be green while the page breaks on mobile and the API never returns 404.
+Lint and unit can both be green while the page breaks on mobile and the API never
+returns 404.
 RUN IT YOURSELF · two labs, under 10 minutes each
 Path A · verification lab
 Fill the four-row comparison strip on the starter. Run A naively, Run B with
@@ -347,22 +715,32 @@ Open the starter →
 Clone ↗
 git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter
 Path B · rules lab
-Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare diff size, gate invocations, and the names of checks the agent names back.
+Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare
+diff size, gate invocations, and the names of checks the agent names back.
+Open the rules lab →
 Open the rules lab →
 Clone ↗
 git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules
 Keep learning
+Continue aprendendo
 12 new readings + primary docs
-Go deeper with official documentation, production case studies, Medium, and practitioner workflows.
+12 novas leituras + documentação primária
+Go deeper with official documentation, production case studies, Medium, and practitioner
+workflows.
 Rules and enforcement case study →
 Skills review desk →
 Primary references →
 12-part reading path →
+Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes.
+Estudo de caso sobre regras e enforcement →
+Referências primárias →
+Trilha com 12 leituras →
 Navigate by idea
 short chapters / one system
 Prefer a focused chapter? Start with the
 route map
-, then jump directly to
+, then
+jump directly to
 models
 ,
 agents and worktrees
@@ -370,6 +748,7 @@ agents and worktrees
 skill creation
 ,
 rules
-, or the
+, or
+the
 skills review desk
 .

.agents/templates/components/grid-group.astro

@@ -24,7 +24,7 @@ const { label, columns = 3 } = Astro.props;
   .grid {
     display: grid;
     grid-template-columns: repeat(var(--columns), 1fr);
-    gap: 1px;              /* hairline separators, drawn by the parent background */
+    gap: 1px; /* hairline separators, drawn by the parent background */
     background: var(--line);
   }
 
@@ -34,6 +34,8 @@ const { label, columns = 3 } = Astro.props;
   }
 
   @media (max-width: 800px) {
-    .grid { grid-template-columns: 1fr; }
+    .grid {
+      grid-template-columns: 1fr;
+    }
   }
 </style>

.agents/templates/components/island.astro

@@ -20,25 +20,33 @@ const { items, initialId = items[0]?.id } = Astro.props;
 
 <div class="island" data-initial={initialId}>
   <div class="tabs" role="tablist" aria-label="Sections">
-    {items.map((item) => (
-      <button
-        role="tab"
-        id={`tab-${item.id}`}
-        aria-controls={`panel-${item.id}`}
-        aria-selected={item.id === initialId}
-        data-tab={item.id}
-      >{item.label}</button>
-    ))}
+    {
+      items.map((item) => (
+        <button
+          role="tab"
+          id={`tab-${item.id}`}
+          aria-controls={`panel-${item.id}`}
+          aria-selected={item.id === initialId}
+          data-tab={item.id}
+        >
+          {item.label}
+        </button>
+      ))
+    }
   </div>
-  {items.map((item) => (
-    <div
-      role="tabpanel"
-      id={`panel-${item.id}`}
-      aria-labelledby={`tab-${item.id}`}
-      data-panel={item.id}
-      hidden={item.id !== initialId}
-    >{item.body}</div>
-  ))}
+  {
+    items.map((item) => (
+      <div
+        role="tabpanel"
+        id={`panel-${item.id}`}
+        aria-labelledby={`tab-${item.id}`}
+        data-panel={item.id}
+        hidden={item.id !== initialId}
+      >
+        {item.body}
+      </div>
+    ))
+  }
 </div>
 
 <script>
@@ -68,7 +76,10 @@ const { items, initialId = items[0]?.id } = Astro.props;
 </script>
 
 <style>
-  .tabs { display: grid; gap: 8px; }
+  .tabs {
+    display: grid;
+    gap: 8px;
+  }
 
   button {
     padding: 12px;
@@ -78,7 +89,7 @@ const { items, initialId = items[0]?.id } = Astro.props;
     text-align: left;
     cursor: pointer;
     /* transform/opacity only — never animate layout properties */
-    transition: background 180ms cubic-bezier(.2, 0, 0, 1);
+    transition: background 180ms cubic-bezier(0.2, 0, 0, 1);
   }
 
   button[aria-selected='true'] {
@@ -92,6 +103,8 @@ const { items, initialId = items[0]?.id } = Astro.props;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    button { transition-duration: .01ms; }
+    button {
+      transition-duration: 0.01ms;
+    }
   }
 </style>

.agents/templates/components/static-block.astro

@@ -40,7 +40,7 @@ const { eyebrow, title, body, href } = Astro.props;
   .eyebrow {
     color: var(--accent);
     font: var(--font-eyebrow);
-    letter-spacing: .1em;
+    letter-spacing: 0.1em;
     text-transform: uppercase;
   }
 
@@ -48,7 +48,7 @@ const { eyebrow, title, body, href } = Astro.props;
     margin: 0;
     font-size: var(--step-5);
     line-height: 1.05;
-    letter-spacing: -.06em; /* tight display tracking is a signature of this design */
+    letter-spacing: -0.06em; /* tight display tracking is a signature of this design */
   }
 
   p {
@@ -69,6 +69,8 @@ const { eyebrow, title, body, href } = Astro.props;
   }
 
   @media (max-width: 800px) {
-    .block { padding: 18px; }
+    .block {
+      padding: 18px;
+    }
   }
 </style>

.agents/templates/config/.stylelintrc.json

@@ -1,10 +1,6 @@
 {
   "extends": ["stylelint-config-standard"],
-  "ignoreFiles": [
-    "dist/**",
-    "public/hands-on/**",
-    "submitted-skills/**"
-  ],
+  "ignoreFiles": ["dist/**", "public/hands-on/**", "submitted-skills/**"],
   "rules": {
     "custom-property-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
     "declaration-property-value-disallowed-list": {

.agents/templates/config/eslint.config.js

@@ -8,11 +8,11 @@ export default [
   {
     ignores: [
       'dist/**',
-      'public/hands-on/**',   // lab fixtures ship verbatim — linting them would
-                              // invite "fixes" that break the exercise
-      'submitted-skills/**',  // other people's work, reproduced as submitted
-      'skill-reviews/**',     // generated from skills-review/catalog.js
-      'vote-service/**',      // Go service, separate lifecycle
+      'public/hands-on/**', // lab fixtures ship verbatim — linting them would
+      // invite "fixes" that break the exercise
+      'submitted-skills/**', // other people's work, reproduced as submitted
+      'skill-reviews/**', // generated from skills-review/catalog.js
+      'vote-service/**', // Go service, separate lifecycle
     ],
   },
   {

.agents/templates/config/gitea-ci.yaml

@@ -15,7 +15,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 0   # gate.sh compares assertion counts against origin/main
+          fetch-depth: 0 # gate.sh compares assertion counts against origin/main
 
       - uses: actions/setup-node@v4
         with:

.agents/templates/pages/chapter.astro

@@ -28,25 +28,30 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
   </section>
 
   <GridGroup label="Chapter sections" columns={3}>
-    {chapter.data.sections.map((section) => (
-      <StaticBlock
-        eyebrow={section.eyebrow[lang]}
-        title={section.title[lang]}
-        body={section.body[lang]}
-      />
-    ))}
+    {
+      chapter.data.sections.map((section) => (
+        <StaticBlock
+          eyebrow={section.eyebrow[lang]}
+          title={section.title[lang]}
+          body={section.body[lang]}
+        />
+      ))
+    }
   </GridGroup>
 </ChapterLayout>
 
 <style>
   /* Page-level layout only. Anything reusable belongs in a component. */
-  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
+  .hero {
+    max-width: 780px;
+    padding: clamp(75px, 12vh, 145px) 0 85px;
+  }
 
   h1 {
     margin: 16px 0 24px;
     font-size: var(--step-display);
-    line-height: .86;
-    letter-spacing: -.08em;
+    line-height: 0.86;
+    letter-spacing: -0.08em;
   }
 
   /* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
@@ -57,5 +62,9 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
     font-weight: 400;
   }
 
-  .lede { max-width: 570px; color: var(--muted); line-height: 1.65; }
+  .lede {
+    max-width: 570px;
+    color: var(--muted);
+    line-height: 1.65;
+  }
 </style>

.agents/templates/pages/interactive.astro

@@ -39,7 +39,18 @@ const items = entries.map((entry) => ({
 </BaseLayout>
 
 <style>
-  .hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; }
-  h1 { font-size: var(--step-display); line-height: .86; letter-spacing: -.08em; }
-  h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; }
+  .hero {
+    max-width: 780px;
+    padding: clamp(75px, 12vh, 145px) 0 85px;
+  }
+  h1 {
+    font-size: var(--step-display);
+    line-height: 0.86;
+    letter-spacing: -0.08em;
+  }
+  h1 em {
+    color: var(--blue);
+    font-family: Georgia, serif;
+    font-weight: 400;
+  }
 </style>

GATES.md

@@ -1,23 +1,37 @@
 # Gates: review desk privacy and improved-draft audit
 
-OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**, skill-reviews/improved/ndo-repro/**, scripts/verify.mjs
+OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**,
+skill-reviews/improved/ndo-repro/**, scripts/verify.mjs
 
-Scope: Redact the operational submission's identity and URLs from the published review desk, keep package files usable in either preview mode, and explain each improved draft as a concrete diff.
+Scope: Redact the operational submission's identity and URLs from the published
+review desk, keep package files usable in either preview mode, and explain each
+improved draft as a concrete diff.
 
-- [x] G1: the published operational submission contains no personal name, original source URL, email address, or host-specific path
-  CHECK: node scripts/verify.mjs
-  EXPECT: review privacy verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G1: the published operational submission contains no personal name,
+      original source URL, email address, or host-specific path CHECK: node
+      scripts/verify.mjs EXPECT: review privacy verification passed EVIDENCE:
+      exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
+      path=d3551337f830/34 entries; EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481
 
-- [x] G2: every package file remains selectable in Original and Improved draft modes without resetting the selected preview
-  CHECK: node scripts/verify.mjs
-  EXPECT: review file-mode verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G2: every package file remains selectable in Original and Improved draft
+      modes without resetting the selected preview CHECK: node
+      scripts/verify.mjs EXPECT: review file-mode verification passed EVIDENCE:
+      exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
+      path=d3551337f830/34 entries; EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481
 
-- [x] G3: every improved draft has an interactive change lens that explains changed guidance and its rationale
-  CHECK: node scripts/verify.mjs
-  EXPECT: review change-lens verification passed
-  EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481
+- [x] G3: every improved draft has an interactive change lens that explains
+      changed guidance and its rationale CHECK: node scripts/verify.mjs EXPECT:
+      review change-lens verification passed EVIDENCE: exit=0; shell=/bin/sh;
+      cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries;
+      EXPECT=matched;
+      output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
+      output-bytes=481
 
-- [x] G4: the review desk works at mobile, Full HD, and 4K widths without page errors or horizontal overflow
-  EVIDENCE: Playwright audit on 2026-09-04: 320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change lens rendered; no horizontal overflow or page errors.
+- [x] G4: the review desk works at mobile, Full HD, and 4K widths without page
+      errors or horizontal overflow EVIDENCE: Playwright audit on 2026-09-04:
+      320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change
+      lens rendered; no horizontal overflow or page errors.

docs/references/README.md

@@ -7,38 +7,47 @@ articles are context, not authority.
 
 - Anthropic — custom subagents: https://code.claude.com/docs/en/sub-agents
   Separate context, tools, permissions, model selection, and worktree isolation.
-- Anthropic — skills: https://code.claude.com/docs/en/skills
-  Reusable instruction packages and skill discovery.
-- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees
-  Isolated sessions, branches, cleanup, and ignored files.
-- OpenAI — build skills: https://developers.openai.com/codex/skills
-  Packaged instructions and resources for Codex workflows.
-- OpenAI API — skills reference: https://developers.openai.com/api/reference/go/resources/skills
-  Creating, versioning, listing, and downloading skill bundles.
-- Git — worktree: https://git-scm.com/docs/git-worktree.html
-  Linked working trees, branches, shared history, add/list/remove/prune.
+- Anthropic — skills: https://code.claude.com/docs/en/skills Reusable
+  instruction packages and skill discovery.
+- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees Isolated
+  sessions, branches, cleanup, and ignored files.
+- OpenAI — build skills: https://developers.openai.com/codex/skills Packaged
+  instructions and resources for Codex workflows.
+- OpenAI API — skills reference:
+  https://developers.openai.com/api/reference/go/resources/skills Creating,
+  versioning, listing, and downloading skill bundles.
+- Git — worktree: https://git-scm.com/docs/git-worktree.html Linked working
+  trees, branches, shared history, add/list/remove/prune.
 
 ## Research and articles
 
 - [Model routing and reasoning controls](model-routing.md) — official OpenAI,
   Anthropic, and Google terminology, commands, compatibility caveats, and a
   practical tier/effort baseline.
-- [Verified skill sources](skill-sources.md) — pinned GitHub references,
-  package paths, local-match confidence, and an approval-first install prompt.
+- [Verified skill sources](skill-sources.md) — pinned GitHub references, package
+  paths, local-match confidence, and an approval-first install prompt.
 
 For a structured 12-part reading path—including Git and Anthropic documentation,
 OpenAI orchestration guidance, Medium, and Substack—see
 [additional-reading.md](additional-reading.md).
 
-- Infobip Research — phased coding-agent workflow: https://arxiv.org/abs/2608.30701
-- Effective asynchronous software engineering agents: https://arxiv.org/abs/2603.21489
-- Launch Receipts — AI coding workflow without losing control: https://launchreceipts.com/articles/ai-coding-agent-workflow
-- GitWorktree.org — three agents, three worktrees case study: https://www.gitworktree.org/cases/parallel-ai-agents
+- Infobip Research — phased coding-agent workflow:
+  https://arxiv.org/abs/2608.30701
+- Effective asynchronous software engineering agents:
+  https://arxiv.org/abs/2603.21489
+- Launch Receipts — AI coding workflow without losing control:
+  https://launchreceipts.com/articles/ai-coding-agent-workflow
+- GitWorktree.org — three agents, three worktrees case study:
+  https://www.gitworktree.org/cases/parallel-ai-agents
 
 ## Teaching claims
 
-- Use a stronger model where ambiguity, architecture, decomposition, and review dominate.
+- Use a stronger model where ambiguity, architecture, decomposition, and review
+  dominate.
 - Use faster models for bounded implementation with explicit context and checks.
-- Give every editing worker an isolated branch/worktree; merge only reviewed diffs.
-- A skill is a reusable procedure plus optional references/scripts/assets, not magical memory.
-- Delegation does not remove human responsibility for intent, boundaries, or evidence.
+- Give every editing worker an isolated branch/worktree; merge only reviewed
+  diffs.
+- A skill is a reusable procedure plus optional references/scripts/assets, not
+  magical memory.
+- Delegation does not remove human responsibility for intent, boundaries, or
+  evidence.

docs/references/additional-reading.md

@@ -1,6 +1,8 @@
 # Additional reading: multi-agent coding
 
-Verified on 2026-09-02. Start with the official references for behavior and constraints; use the practitioner articles for concrete workflow ideas that should be tested against your own repository.
+Verified on 2026-09-02. Start with the official references for behavior and
+constraints; use the practitioner articles for concrete workflow ideas that
+should be tested against your own repository.
 
 ## Git worktrees and isolated coding sessions
 
@@ -8,25 +10,38 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
 
 - **Publisher:** Git
 - **Topic:** Worktree fundamentals and lifecycle
-- **Teaching takeaway:** The authoritative reference for how linked worktrees share repository data while retaining separate `HEAD` and index state. Use its `add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the complete lifecycle rather than only worktree creation.
+- **Teaching takeaway:** The authoritative reference for how linked worktrees
+  share repository data while retaining separate `HEAD` and index state. Use its
+  `add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the
+  complete lifecycle rather than only worktree creation.
 
 ### 2. [Run parallel sessions with worktrees](https://code.claude.com/docs/en/worktrees)
 
 - **Publisher:** Anthropic — Claude Code Docs
 - **Topic:** Native worktree isolation for coding agents
-- **Teaching takeaway:** Shows how Claude Code creates isolated sessions with `--worktree`, how gitignored environment files can be copied with `.worktreeinclude`, and how subagents can use worktree isolation. It is a useful bridge between raw Git commands and a real agent workflow.
+- **Teaching takeaway:** Shows how Claude Code creates isolated sessions with
+  `--worktree`, how gitignored environment files can be copied with
+  `.worktreeinclude`, and how subagents can use worktree isolation. It is a
+  useful bridge between raw Git commands and a real agent workflow.
 
 ### 3. [How Git Worktrees Transformed My AI Agent Development Workflow in 2026](https://medium.com/@mudassir00seven/how-git-worktrees-transformed-my-ai-agent-development-workflow-in-2026-ad8a59b8edfb)
 
 - **Publisher:** Medium — Mudassir Khan
 - **Topic:** One worktree per agent and task
-- **Teaching takeaway:** A concise practitioner explanation of why parallel agents collide in a shared filesystem and how one task, branch, worktree, and pull request per agent reduces that interference. Pair it with the official Git documentation because operational details may evolve.
+- **Teaching takeaway:** A concise practitioner explanation of why parallel
+  agents collide in a shared filesystem and how one task, branch, worktree, and
+  pull request per agent reduces that interference. Pair it with the official
+  Git documentation because operational details may evolve.
 
 ### 4. [How to Use Git Worktrees with Coding Agents](https://meshintelligence.substack.com/p/how-to-use-git-worktrees-with-coding)
 
 - **Publisher:** Mesh Intelligence on Substack — Petar Djukic
 - **Topic:** Worktree-per-task workflow and integration boundaries
-- **Teaching takeaway:** Explains why branches alone do not isolate active files, compares worktrees with clones and containers, and presents a create-work-review-remove lifecycle. Its strongest lesson is that worktrees isolate execution, not merge conflicts, so scheduling and review gates still matter.
+- **Teaching takeaway:** Explains why branches alone do not isolate active
+  files, compares worktrees with clones and containers, and presents a
+  create-work-review-remove lifecycle. Its strongest lesson is that worktrees
+  isolate execution, not merge conflicts, so scheduling and review gates still
+  matter.
 
 ## Subagents and orchestration
 
@@ -34,31 +49,48 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
 
 - **Publisher:** Anthropic — Claude Code Docs
 - **Topic:** Specialized subagents, context, tools, and background execution
-- **Teaching takeaway:** Demonstrates how to define narrow subagents with their own prompts, tool permissions, and models, then run them in foreground or background. It supports teaching that delegation quality depends on explicit responsibility and context boundaries, not merely spawning more agents.
+- **Teaching takeaway:** Demonstrates how to define narrow subagents with their
+  own prompts, tool permissions, and models, then run them in foreground or
+  background. It supports teaching that delegation quality depends on explicit
+  responsibility and context boundaries, not merely spawning more agents.
 
 ### 6. [Building Effective AI Agents](https://www.anthropic.com/engineering/building-effective-agents)
 
 - **Publisher:** Anthropic Engineering
 - **Topic:** Agent architecture patterns
-- **Teaching takeaway:** Introduces routing, parallelization, orchestrator-worker, and evaluator-optimizer patterns while recommending the simplest architecture that meets the task. The orchestrator-worker section is especially useful for explaining when a strong planner should dynamically decompose work for bounded workers.
+- **Teaching takeaway:** Introduces routing, parallelization,
+  orchestrator-worker, and evaluator-optimizer patterns while recommending the
+  simplest architecture that meets the task. The orchestrator-worker section is
+  especially useful for explaining when a strong planner should dynamically
+  decompose work for bounded workers.
 
 ### 7. [How we built our multi-agent research system](https://www.anthropic.com/engineering/multi-agent-research-system)
 
 - **Publisher:** Anthropic Engineering
 - **Topic:** Production multi-agent coordination
-- **Teaching takeaway:** A production case study in which a lead agent plans and delegates independent searches to parallel subagents. It is useful for discussing breadth-first tasks, separate context windows, token cost, evaluation, and why parallelism helps most when subtasks are genuinely independent.
+- **Teaching takeaway:** A production case study in which a lead agent plans and
+  delegates independent searches to parallel subagents. It is useful for
+  discussing breadth-first tasks, separate context windows, token cost,
+  evaluation, and why parallelism helps most when subtasks are genuinely
+  independent.
 
 ### 8. [A practical guide to building agents](https://openai.com/business/guides-and-resources/a-practical-guide-to-building-ai-agents/)
 
 - **Publisher:** OpenAI
 - **Topic:** Manager and handoff orchestration patterns
-- **Teaching takeaway:** Distinguishes centralized manager orchestration from decentralized handoffs and shows agents being exposed as tools to other agents. Use it to teach that the right topology depends on who must retain control, combine outputs, and own the final response.
+- **Teaching takeaway:** Distinguishes centralized manager orchestration from
+  decentralized handoffs and shows agents being exposed as tools to other
+  agents. Use it to teach that the right topology depends on who must retain
+  control, combine outputs, and own the final response.
 
 ### 9. [Agent orchestration](https://openai.github.io/openai-agents-python/multi_agent/)
 
 - **Publisher:** OpenAI Agents SDK
 - **Topic:** Agents-as-tools, handoffs, and code-driven workflows
-- **Teaching takeaway:** Gives a precise comparison between a manager calling specialists as tools and handing control to a specialist. It also covers deterministic orchestration in code, including chains, evaluator loops, and parallel execution for independent tasks.
+- **Teaching takeaway:** Gives a precise comparison between a manager calling
+  specialists as tools and handing control to a specialist. It also covers
+  deterministic orchestration in code, including chains, evaluator loops, and
+  parallel execution for independent tasks.
 
 ## Model routing and reusable skills
 
@@ -66,19 +98,30 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
 
 - **Publisher:** Anthropic — Claude Platform Docs
 - **Topic:** Routing work between frontier and lower-cost models
-- **Teaching takeaway:** Compares model selection, advisor, and orchestrator strategies using cost-per-completed-task rather than token price alone. Its orchestrator guidance directly supports a frontier planner dispatching bulk independent work to cheaper workers—but also explains when one model is simpler and less expensive.
+- **Teaching takeaway:** Compares model selection, advisor, and orchestrator
+  strategies using cost-per-completed-task rather than token price alone. Its
+  orchestrator guidance directly supports a frontier planner dispatching bulk
+  independent work to cheaper workers—but also explains when one model is
+  simpler and less expensive.
 
 ### 11. [Models](https://openai.github.io/openai-agents-python/models/)
 
 - **Publisher:** OpenAI Agents SDK
 - **Topic:** Per-agent model selection and mixed-provider routing
-- **Teaching takeaway:** Documents how different agents in one workflow can use different models or providers and how routing can be configured centrally. This is a practical implementation reference for turning a conceptual “strong planner, lightweight workers” policy into explicit per-agent configuration.
+- **Teaching takeaway:** Documents how different agents in one workflow can use
+  different models or providers and how routing can be configured centrally.
+  This is a practical implementation reference for turning a conceptual “strong
+  planner, lightweight workers” policy into explicit per-agent configuration.
 
 ### 12. [Skills](https://platform.claude.com/docs/en/managed-agents/skills)
 
 - **Publisher:** Anthropic — Claude Platform Docs
 - **Topic:** Reusable filesystem-based agent skills
-- **Teaching takeaway:** Explains the `SKILL.md` package model, repository discovery, supporting scripts and resources, and why only task-relevant skills should be attached. It also highlights the security lesson that repository skills are executable instructions and therefore part of the agent’s trust boundary.
+- **Teaching takeaway:** Explains the `SKILL.md` package model, repository
+  discovery, supporting scripts and resources, and why only task-relevant skills
+  should be attached. It also highlights the security lesson that repository
+  skills are executable instructions and therefore part of the agent’s trust
+  boundary.
 
 ## Suggested teaching order
 

docs/references/model-routing.md

@@ -1,25 +1,42 @@
 # Model routing and reasoning controls
 
-Verified against first-party documentation on 2026-09-02. Model catalogs and aliases change; pin production model IDs and re-check the linked compatibility tables before rollout.
+Verified against first-party documentation on 2026-09-02. Model catalogs and
+aliases change; pin production model IDs and re-check the linked compatibility
+tables before rollout.
 
 ## Two independent routing knobs
 
 1. **Model tier** chooses the capability, latency, and cost envelope.
-2. **Effort / thinking control** changes how much reasoning work a supported model performs for one request.
+2. **Effort / thinking control** changes how much reasoning work a supported
+   model performs for one request.
 
-Do not assume that every effort value works with every model or product. Unsupported values may fail, be ignored, or be mapped to another level depending on the client.
+Do not assume that every effort value works with every model or product.
+Unsupported values may fail, be ignored, or be mapped to another level depending
+on the client.
 
 ## OpenAI
 
-The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`, `high`, `xhigh`, and `max`. Availability remains model-specific, so select from the levels shown for the chosen model rather than treating the full list as universal. [OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model)
+The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model
+tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`,
+`high`, `xhigh`, and `max`. Availability remains model-specific, so select from
+the levels shown for the chosen model rather than treating the full list as
+universal.
+[OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model)
 
-Use a lower-cost tier and low effort for bounded, mechanical work; raise the model tier or effort for planning, architecture, difficult debugging, and final review. This is routing guidance, not an API guarantee.
+Use a lower-cost tier and low effort for bounded, mechanical work; raise the
+model tier or effort for planning, architecture, difficult debugging, and final
+review. This is routing guidance, not an API guarantee.
 
 ## Anthropic Claude
 
 ### Model tier
 
-Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast work. Aliases resolve to provider-dependent recommended versions and can change over time; use a full model ID when reproducibility matters. Claude Code also documents `opusplan`, which uses Opus in plan mode and Sonnet for execution. [Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config)
+Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended
+for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast
+work. Aliases resolve to provider-dependent recommended versions and can change
+over time; use a full model ID when reproducibility matters. Claude Code also
+documents `opusplan`, which uses Opus in plan mode and Sonnet for execution.
+[Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config)
 
 Copy-ready Claude Code switches:
 
@@ -37,7 +54,12 @@ claude --model opus
 
 ### Effort
 
-The Claude API parameter is `output_config.effort`. The documented levels are `low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh` and `max` have narrower model support, and Haiku 4.5 does not support effort. Effort affects the whole response—including thinking and tool calls—and is a behavioral signal, not a strict token budget. [Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort)
+The Claude API parameter is `output_config.effort`. The documented levels are
+`low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh`
+and `max` have narrower model support, and Haiku 4.5 does not support effort.
+Effort affects the whole response—including thinking and tool calls—and is a
+behavioral signal, not a strict token budget.
+[Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort)
 
 Documented Python example:
 
@@ -53,27 +75,45 @@ response = client.messages.create(
 )
 ```
 
-Claude Code exposes `/effort`; its available choices depend on the active model. Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and `max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`. When a selected level is unsupported, Claude Code can fall back to the highest supported level at or below it. [Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level)
+Claude Code exposes `/effort`; its available choices depend on the active model.
+Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and
+`max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`.
+When a selected level is unsupported, Claude Code can fall back to the highest
+supported level at or below it.
+[Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level)
 
 ## Google Gemini
 
 ### Model tier
 
-Gemini uses model families rather than interchangeable aliases: **Pro** targets the most complex reasoning, **Flash** balances capability and throughput, and **Flash-Lite** prioritizes latency, volume, and cost. Select an explicit endpoint such as `gemini-3.7-flash`; Google recommends stable model names for most production applications because `latest` aliases can be hot-swapped. [Gemini API: models](https://ai.google.dev/gemini-api/docs/models)
+Gemini uses model families rather than interchangeable aliases: **Pro** targets
+the most complex reasoning, **Flash** balances capability and throughput, and
+**Flash-Lite** prioritizes latency, volume, and cost. Select an explicit
+endpoint such as `gemini-3.7-flash`; Google recommends stable model names for
+most production applications because `latest` aliases can be hot-swapped.
+[Gemini API: models](https://ai.google.dev/gemini-api/docs/models)
 
 ### Thinking level
 
-For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in Python). Across the family the documented values are `minimal`, `low`, `medium`, and `high`, but support and defaults vary by model. For example, Gemini 3.7 Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1 Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is unavailable on several models and does not guarantee that reasoning is completely off where supported. Gemini 2.5 uses `thinkingBudget`, not `thinkingLevel`. [Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking)
+For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in
+Python). Across the family the documented values are `minimal`, `low`, `medium`,
+and `high`, but support and defaults vary by model. For example, Gemini 3.7
+Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1
+Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is
+unavailable on several models and does not guarantee that reasoning is
+completely off where supported. Gemini 2.5 uses `thinkingBudget`, not
+`thinkingLevel`.
+[Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking)
 
 Documented JavaScript pattern:
 
 ```javascript
-import { GoogleGenAI, ThinkingLevel } from "@google/genai";
+import { GoogleGenAI, ThinkingLevel } from '@google/genai';
 
 const ai = new GoogleGenAI({});
 const response = await ai.models.generateContent({
-  model: "gemini-3.7-flash",
-  contents: "Review this implementation plan.",
+  model: 'gemini-3.7-flash',
+  contents: 'Review this implementation plan.',
   config: {
     thinkingConfig: {
       thinkingLevel: ThinkingLevel.LOW,
@@ -86,11 +126,13 @@ console.log(response.text);
 
 ## Practical routing baseline
 
-| Work | Model tier | Effort / thinking |
-| --- | --- | --- |
-| Formatting, lookup, narrow edit | Haiku / Flash-Lite / Luna | Low or minimal where supported |
-| Normal implementation, tests, review | Sonnet / Flash / Terra | Medium |
-| Architecture, orchestration, hard debugging | Opus / Pro / Sol | High |
-| Frontier or long-horizon work with measured benefit | Strongest supported tier | `xhigh` or `max` only where documented |
+| Work                                                | Model tier                | Effort / thinking                      |
+| --------------------------------------------------- | ------------------------- | -------------------------------------- |
+| Formatting, lookup, narrow edit                     | Haiku / Flash-Lite / Luna | Low or minimal where supported         |
+| Normal implementation, tests, review                | Sonnet / Flash / Terra    | Medium                                 |
+| Architecture, orchestration, hard debugging         | Opus / Pro / Sol          | High                                   |
+| Frontier or long-horizon work with measured benefit | Strongest supported tier  | `xhigh` or `max` only where documented |
 
-Treat this table as a starting hypothesis. Evaluate quality, latency, and cost on representative tasks, then route to the cheapest combination that still passes the required checks.
+Treat this table as a starting hypothesis. Evaluate quality, latency, and cost
+on representative tasks, then route to the cheapest combination that still
+passes the required checks.

docs/references/skill-sources.md

@@ -1,17 +1,20 @@
 # Verified skill sources
 
-Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A pinned blob link identifies the content inspected; the repository/path column identifies what an installer should copy. Pinned commits are preferable to mutable `main` when reproducibility matters.
+Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A
+pinned blob link identifies the content inspected; the repository/path column
+identifies what an installer should copy. Pinned commits are preferable to
+mutable `main` when reproducibility matters.
 
-| Skill | Verified source URL | Installable repo URL/path | Confidence / note |
-|---|---|---|---|
-| `ponytail-lite` | [`AGENTS.md` at `e7b42dc`](https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md) | [`ilindaniel/ponytail-lite`](https://github.com/ilindaniel/ponytail-lite), path `AGENTS.md` | **High — exact byte match.** The local `ponytail-lite/SKILL.md` is this file unchanged. Upstream presents it as an agent instruction file, not a conventional frontmatter-based skill package; install it through the host's project/global instruction mechanism. |
-| `caveman` | [Public upstream skill at `3b74643`](https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md) | [`JuliusBrussee/caveman`](https://github.com/JuliusBrussee/caveman), path `skills/caveman/` | **Medium for the installed file; high for upstream.** The local file is an environment-specific wrapper that names this public project and its skill files, but it is not byte-identical to the public `skills/caveman/SKILL.md`. Install upstream, not the local wrapper. |
-| `unlazy` | [`SKILL.md` at `473d4b8`](https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md) | [`Leonxlnx/unlazy`](https://github.com/Leonxlnx/unlazy), repository root (copy the whole package) | **High — exact byte match**, also corroborated by local `.unlazy-source.txt`. The package includes referenced scripts, templates, security notes, and workflow documents; do not copy only `SKILL.md`. |
-| `research` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/research/` | **High — exact byte match.** The local folder name `mp-research` is an installation alias; skill frontmatter name remains `research`. |
-| `diagnosing-bugs` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/diagnosing-bugs/` | **High — exact byte match.** The local folder is aliased as `mp-diagnosing-bugs`. |
-| `code-review` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/code-review/` | **High — exact byte match.** The local folder is aliased as `mp-code-review`. Copy the directory so any future supporting files remain available. |
-| `token-saver` | [`SKILL.md` at `8f21188`](https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md) | [`aetox-skills/token-saver`](https://github.com/aetox-skills/token-saver), repository root | **High — exact byte match.** The skill expects the separate [`rtk-ai/rtk`](https://github.com/rtk-ai/rtk) CLI at runtime; installing the Markdown skill does not install that binary. |
-| `webapp-testing` | [`SKILL.md` at `5304866`](https://github.com/anthropics/skills/blob/53048666b05b4799081517d00e09e0a2dd688678/skills/webapp-testing/SKILL.md) | [`anthropics/skills`](https://github.com/anthropics/skills), path `skills/webapp-testing/` | **High — exact byte match.** Copy the full directory because the skill calls `scripts/with_server.py` and carries its own license file. |
+| Skill             | Verified source URL                                                                                                                                       | Installable repo URL/path                                                                               | Confidence / note                                                                                                                                                                                                                                                          |
+| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ponytail-lite`   | [`AGENTS.md` at `e7b42dc`](https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md)                           | [`ilindaniel/ponytail-lite`](https://github.com/ilindaniel/ponytail-lite), path `AGENTS.md`             | **High — exact byte match.** The local `ponytail-lite/SKILL.md` is this file unchanged. Upstream presents it as an agent instruction file, not a conventional frontmatter-based skill package; install it through the host's project/global instruction mechanism.         |
+| `caveman`         | [Public upstream skill at `3b74643`](https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md)      | [`JuliusBrussee/caveman`](https://github.com/JuliusBrussee/caveman), path `skills/caveman/`             | **Medium for the installed file; high for upstream.** The local file is an environment-specific wrapper that names this public project and its skill files, but it is not byte-identical to the public `skills/caveman/SKILL.md`. Install upstream, not the local wrapper. |
+| `unlazy`          | [`SKILL.md` at `473d4b8`](https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md)                                      | [`Leonxlnx/unlazy`](https://github.com/Leonxlnx/unlazy), repository root (copy the whole package)       | **High — exact byte match**, also corroborated by local `.unlazy-source.txt`. The package includes referenced scripts, templates, security notes, and workflow documents; do not copy only `SKILL.md`.                                                                     |
+| `research`        | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md)        | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/research/`        | **High — exact byte match.** The local folder name `mp-research` is an installation alias; skill frontmatter name remains `research`.                                                                                                                                      |
+| `diagnosing-bugs` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/diagnosing-bugs/` | **High — exact byte match.** The local folder is aliased as `mp-diagnosing-bugs`.                                                                                                                                                                                          |
+| `code-review`     | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md)     | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/code-review/`     | **High — exact byte match.** The local folder is aliased as `mp-code-review`. Copy the directory so any future supporting files remain available.                                                                                                                          |
+| `token-saver`     | [`SKILL.md` at `8f21188`](https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md)                             | [`aetox-skills/token-saver`](https://github.com/aetox-skills/token-saver), repository root              | **High — exact byte match.** The skill expects the separate [`rtk-ai/rtk`](https://github.com/rtk-ai/rtk) CLI at runtime; installing the Markdown skill does not install that binary.                                                                                      |
+| `webapp-testing`  | [`SKILL.md` at `5304866`](https://github.com/anthropics/skills/blob/53048666b05b4799081517d00e09e0a2dd688678/skills/webapp-testing/SKILL.md)              | [`anthropics/skills`](https://github.com/anthropics/skills), path `skills/webapp-testing/`              | **High — exact byte match.** Copy the full directory because the skill calls `scripts/with_server.py` and carries its own license file.                                                                                                                                    |
 
 ## Safe copy-paste prompt
 
@@ -38,4 +41,8 @@ Workflow:
 
 ## Verification method
 
-The seven **exact** findings were established by downloading the pinned public files and comparing them byte-for-byte with the local installed copies. For `caveman`, the local wrapper was compared against both the repository-level instructions and public `skills/caveman/SKILL.md`; neither matched, so only its upstream family is attributed, not the wrapper itself.
+The seven **exact** findings were established by downloading the pinned public
+files and comparing them byte-for-byte with the local installed copies. For
+`caveman`, the local wrapper was compared against both the repository-level
+instructions and public `skills/caveman/SKILL.md`; neither matched, so only its
+upstream family is attributed, not the wrapper itself.

package.json

@@ -24,6 +24,7 @@
     "eslint-plugin-astro": "^1",
     "husky": "^9",
     "lint-staged": "^16",
+    "playwright": "^1.62.1",
     "prettier": "^3",
     "prettier-plugin-astro": "^0.14",
     "stylelint": "^16",

plans/astro-refactor/task-05-content-guide.md

@@ -1,12 +1,13 @@
 # Task 05 — Guide content out of app.js
 
-**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3
-**Depends on**: 04 · **Parallel with**: 06 · **Blocks**: 15
-**Worktree**: `.agents/scripts/worktree.sh start 05 content-guide`
+**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
+**Parallel with**: 06 · **Blocks**: 15 **Worktree**:
+`.agents/scripts/worktree.sh start 05 content-guide`
 
 ## Goal
 
-Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`, byte-identical.
+Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`,
+byte-identical.
 
 ## Scope
 
@@ -15,13 +16,13 @@ removes it once the page consumes the collection.
 
 ## Steps
 
-1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json`
-   (~50 pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`,
+1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json` (~50
+   pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`,
    `skillInstallPrompts`).
 2. Move them into the collection. **Copy mechanically — never retype.** These
-   are hand-written translations with deliberate tone (`'Transforme ambiguidade
-   em trabalho'`); retyping introduces drift nobody catches until a Portuguese
-   speaker reads it.
+   are hand-written translations with deliberate tone
+   (`'Transforme ambiguidade em trabalho'`); retyping introduces drift nobody
+   catches until a Portuguese speaker reads it.
 3. `node .agents/scripts/extract-strings.mjs src/content/guide/ > /tmp/after.json`
 4. `diff /tmp/before.json /tmp/after.json` → **must be empty**.
 

plans/astro-refactor/task-06-content-review.md

@@ -1,8 +1,8 @@
 # Task 06 — Review-desk content out of catalog.js
 
-**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3
-**Depends on**: 04 · **Parallel with**: 05 · **Blocks**: 16
-**Worktree**: `.agents/scripts/worktree.sh start 06 content-review`
+**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
+**Parallel with**: 05 · **Blocks**: 16 **Worktree**:
+`.agents/scripts/worktree.sh start 06 content-review`
 
 ## Goal
 
@@ -32,12 +32,14 @@ real `.md` files.
    node scripts/build-skill-review.mjs && git diff --exit-code skill-reviews/
    ```
 2. **The diff view needs raw source.** The review desk compares original and
-   improved as *text*. If `improved` only exists as rendered HTML, the change
+   improved as _text_. If `improved` only exists as rendered HTML, the change
    lens breaks. Keep the raw string reachable.
 
 ## Done when
 
-- [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still passes
+- [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still
+      passes
 - [ ] `git diff --exit-code skill-reviews/` clean after regenerating
 - [ ] `astro check` passes
-- [ ] Every reference to the generator still accurate (`package.json`, `README.md`, `docs/operations-guide.md`, the review desk footer)
+- [ ] Every reference to the generator still accurate (`package.json`,
+      `README.md`, `docs/operations-guide.md`, the review desk footer)

plans/astro-refactor/task-10b-bilingual-blocks.md

@@ -0,0 +1,72 @@
+# Task 10b — Locale-paired props on the six full-guide blocks
+
+**Agent**: `component-builder` · **Model**: **Codex** **Depends on**: 10 ·
+**Blocks**: 15d **Worktree**:
+`.agents/scripts/worktree.sh start 10b bilingual-blocks`
+
+## Why this task exists
+
+It is not in the original plan. Tasks 07–11 built the primitives and blocks
+before task 15c wrote the language contract, so every prose prop on all 19
+blocks is a plain `string`. Task 15d then stopped, correctly, when it found it
+could not render `/full-guide/` in both languages: the brief forbids it from
+duplicating a block to get a second locale, and changing a block's interface is
+component-builder work, not page-migrator work.
+
+`/full-guide/` is one of only two pages with a language toggle (the other is
+`/rules/`, which is already fully bilingual — all 23 of its Portuguese strings
+reach the built page, because `RulesInteractive` reads them from
+`src/content/rules/stages.json` and swaps client-side). The five remaining pages
+have no toggle today and must not gain one.
+
+## Scope
+
+Exactly six files, all in `src/components/blocks/`:
+
+`FleetDiagram.astro`, `HandoffTable.astro`, `PhasePanel.astro`,
+`RouteTable.astro`, `SkillPackage.astro`, `WorktreeMap.astro`.
+
+These are the six that `src/pages/full-guide.astro` uses. Do not touch the other
+13 blocks, any primitive, any island, or any page.
+
+## What to change
+
+Every **prose** prop on those six accepts `Localized` as well as `string`:
+
+```ts
+type Localized = { en: string; pt: string };
+```
+
+- Given a `string`, render exactly what it renders today. Every existing call
+  site keeps working untouched — this is additive.
+- Given a `Localized`, render the fragment twice per
+  `.agents/context/content-i18n.md`: `data-language-content="en"` on one and
+  `"pt"` on the other, English visible, Portuguese `hidden`.
+
+Prose only. Do not widen `href`, `id`, `code`, numeric or enum props — several
+are deliberately unlocalized, and task 05b recorded which (`trees.path`,
+`trees.command`, `routes.score`, `commonSkills.source`).
+
+`FleetDiagram`'s `orchestrator.title` is rendered with `set:html` because it
+carries inline `<br>`. Keep that, on both locales.
+
+## Do not
+
+- Do not change what a block renders for a `string` prop. A diff in the built
+  output for the existing call sites means you got it wrong.
+- Do not add a language toggle to any block. `LanguageToggle` is a separate
+  island and the page mounts it.
+- Do not edit `scripts/verify.mjs`. 42 assertions, and you are not the
+  verification-engineer.
+- Do not touch `src/pages/full-guide.astro`. That is 15d's file; it will pass
+  the `Localized` values once you land.
+
+## Done when
+
+- [ ] All six blocks accept `Localized` on every prose prop and `string` still
+      behaves identically
+- [ ] Built output byte-identical for pages that pass only strings — check
+      `dist/` before and after for the pages that use these blocks
+- [ ] `pnpm run gate` green, 42 assertions intact
+- [ ] Report lists, per block, which props became locale-aware and which you
+      deliberately left unlocalized and why

plans/astro-refactor/task-15d-page-full-guide.md

@@ -179,3 +179,153 @@ to scraping.
       `"pt"`, per `.agents/context/content-i18n.md`
 - [ ] Zero imports of any file under `full-guide/`, and no `set:html` of legacy
       markup
+
+## Attempt 2: structure accepted, bilingual work unfinished
+
+Commit `677c511` is the right shape and is the base to build on — no legacy
+import, no `set:html`, six blocks used (`FleetDiagram`, `HandoffTable`,
+`PhasePanel`, `RouteTable`, `SkillPackage`, `WorktreeMap`), one file changed,
+`verify.mjs` untouched, 42 assertions, gate green, JS 47,079 B against the
+legacy 50,338 B. Its report was honest about what it did not finish. Finish it.
+
+**What is already correct — do not "fix" it.** The page has 55 `.en` reads and
+zero `.pt` reads in the selector detail panels. That is right.
+`GuideSelector.astro` re-renders every panel with `[locale]` on
+`ai-for-dummies:languagechange`, so the server-rendered panel only has to match
+the initial locale. Leave those alone.
+
+**What is missing: the static prose.** Legacy `app.js` holds `translations.pt` —
+a map of **102** CSS-selector → Portuguese-string entries, starting at
+`.chapter-links a:nth-child(1)`. `applyLanguage('pt')` walks it and calls
+`setText(selector, value)`; switching back replays the captured `originals`.
+That map is the full-guide page's static Portuguese, and it is the authoritative
+source for this work.
+
+The page currently carries **3** `data-language-content` pairs (hero, stat,
+thesis). The other ~99 strings have no Portuguese counterpart anywhere in the
+Astro output, so `/full-guide/` renders English-only for everything the selector
+islands do not own.
+
+Render each of those 102 strings twice per `.agents/context/content-i18n.md`:
+the English exactly as it appears in `full-guide/index.html` today, the
+Portuguese exactly as it appears in `translations.pt`. Verbatim both ways — no
+retranslation, no rephrasing, no fixing what looks like a typo.
+
+A selector in the map that targets an element the blocks now render means the
+pair belongs inside that block's slot content, not bolted on afterwards. If a
+block gives you no way to pass both locales, say so in the report and name the
+block — do not work around it by duplicating the block.
+
+### Done when, for this pass
+
+- [ ] All 102 `translations.pt` entries have a rendered Portuguese counterpart
+- [ ] Every localized static string wrapped in `data-language-content="en"` /
+      `"pt"` pairs
+- [ ] No `.pt` reads added to the nine selector detail panels
+- [ ] Gate green, 42 assertions, `verify.mjs` untouched
+- [ ] Report lists any `translations.pt` selector you could not place, and why
+
+## Attempt 3: the blocker is cleared
+
+Task 10b landed. `FleetDiagram`, `HandoffTable`, `PhasePanel`, `RouteTable`,
+`SkillPackage` and `WorktreeMap` now accept `Localized = { en, pt }` on every
+prose prop and emit the `data-language-content` pair themselves. Passing a plain
+`string` still renders exactly what it rendered before, so nothing you already
+wrote has to change shape — you pass `{ en, pt }` where you passed a string.
+
+You are the first call site for those six blocks. No merged page uses them, so
+if a prop is wrong you will be the one to find it. Report anything that does not
+fit rather than working around it.
+
+**The measurement.** 17 of the 102 `translations.pt` entries currently reach the
+built page. Verify against `dist/full-guide/index.html`, not against the
+`.astro` source — `/rules/` looks monolingual in source and is fully bilingual
+in output, because the strings arrive through a content collection. Checking the
+source is how you get a wrong answer here.
+
+For each of the 102 entries: the selector tells you which element, the value is
+the Portuguese, and `full-guide/index.html` has the English. Both verbatim.
+
+Remaining done-when boxes are the ones in the previous section, unchanged.
+
+## Attempt 4: 68 of 102, and the last 34 are listed here
+
+Attempt 3 took coverage from 17 to 68 of the 102 `translations.pt` entries,
+measured against `dist/full-guide/index.html`. Its snapshot rewrite is accepted
+— it explained the reason (sections attempt 2 had dropped came back, and
+`CopyPrompt` renders slightly differently), which is what the brief asked for.
+
+Three cleanups first, before any new work:
+
+- `translations_extracted.js`, `scratch/` and
+  `.agents/snapshots/full-guide-new.txt` are untracked leftovers in the
+  worktree. Delete them. Do not commit them.
+- Never `git add -A` from the repo root here.
+
+### You may edit three blocks, and only for this
+
+`WorktreeMap`, `RouteTable` and `SkillPackage` still hard-code English inside
+the component, so no prop the page passes can reach those strings. Task 10b made
+their prop-driven prose `Localized`; it did not catch the literals baked into
+the markup.
+
+Extend exactly those three, using 10b's established pattern: a `Localized` value
+renders the `data-language-content="en"` / `"pt"` pair, a plain `string` renders
+exactly what it renders today. You are still the only call site, so nothing else
+can regress. Do not touch any other block.
+
+### The 34 remaining entries
+
+Each row is the `translations.pt` selector and its Portuguese. The English is in
+`full-guide/index.html` at the same selector. Both verbatim — no retranslation,
+no rephrasing, no fixing what looks like a typo.
+
+| selector                               | Portuguese                                                                                                                                                                                                                                                                                           |
+| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.caption`                             | O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados verificáveis. Ele não precisa digitar cada linha.                                                                                                                                                                  |
+| `.workflow .copy > p:last-child`       | Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da responsabilidade.                                                                                                                                                                                                    |
+| `.worktree-intro > p:nth-of-type(2)`   | Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu próprio checkout e índice; o histórico continua compartilhado.                                                                                                                                                     |
+| `.tree-node.root span`                 | RAIZ                                                                                                                                                                                                                                                                                                 |
+| `.tree-node.root small`                | ● limpo                                                                                                                                                                                                                                                                                              |
+| `.route-table .head span:nth-child(1)` | Trabalho                                                                                                                                                                                                                                                                                             |
+| `.route-table .head span:nth-child(2)` | Perfil                                                                                                                                                                                                                                                                                               |
+| `.route-table .head span:nth-child(3)` | Formato do prompt                                                                                                                                                                                                                                                                                    |
+| `.skill-principles span:nth-child(1)`  | 01 / defina o gatilho                                                                                                                                                                                                                                                                                |
+| `.skill-principles span:nth-child(2)`  | 02 / carregue detalhes sob demanda                                                                                                                                                                                                                                                                   |
+| `.skill-principles span:nth-child(3)`  | 03 / devolva evidências                                                                                                                                                                                                                                                                              |
+| `.skill-package > span`                | PACOTE DE SKILL                                                                                                                                                                                                                                                                                      |
+| `.catalog-intro .eyebrow`              | O kit de campo                                                                                                                                                                                                                                                                                       |
+| `.catalog-intro h2`                    | Trabalhos diferentes.<br />Instintos <em>diferentes.</em>                                                                                                                                                                                                                                            |
+| `.catalog-intro > p`                   | Uma skill muda como o agente aborda o trabalho. Algumas moldam a comunicação. Outras impõem pesquisa, diagnóstico, revisão ou disciplina de conclusão. Selecione uma para inspecionar sua regra operacional.                                                                                         |
+| `[data-common-skill="ponytail"] span`  | SIMPLIFICAR                                                                                                                                                                                                                                                                                          |
+| `[data-common-skill="ponytail"] small` | código mínimo que funciona                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="caveman"] span`   | COMUNICAR                                                                                                                                                                                                                                                                                            |
+| `[data-common-skill="caveman"] small`  | sinal sem excesso                                                                                                                                                                                                                                                                                    |
+| `[data-common-skill="unlazy"] span`    | CONCLUIR                                                                                                                                                                                                                                                                                             |
+| `[data-common-skill="unlazy"] small`   | gates e evidências                                                                                                                                                                                                                                                                                   |
+| `[data-common-skill="research"] span`  | INVESTIGAR                                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="research"] small` | fontes primárias primeiro                                                                                                                                                                                                                                                                            |
+| `[data-common-skill="debug"] span`     | DIAGNOSTICAR                                                                                                                                                                                                                                                                                         |
+| `[data-common-skill="debug"] small`    | ciclo curto de feedback                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="review"] span`    | REVISAR                                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="review"] small`   | padrões × especificação                                                                                                                                                                                                                                                                              |
+| `[data-common-skill="tokens"] span`    | ECONOMIZAR                                                                                                                                                                                                                                                                                           |
+| `[data-common-skill="tokens"] small`   | comprima saídas ruidosas                                                                                                                                                                                                                                                                             |
+| `.skill-loadout > span`                | UM LOADOUT PRÁTICO                                                                                                                                                                                                                                                                                   |
+| `.skill-loadout > div`                 | <b>PLANEJAR</b> unlazy <i>→</i> <b>CONSTRUIR</b> ponytail-lite <i>→</i> <b>DIAGNOSTICAR</b> diagnosing-bugs <i>→</i> <b>REPORTAR</b> caveman                                                                                                                                                         |
+| `.callout span`                        | COMECE AQUI                                                                                                                                                                                                                                                                                          |
+| `.callout strong`                      | Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem realmente independentes.                                                                                                                                                                                       |
+| `.sources p`                           | Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes. <a href="rules/">Estudo de caso sobre regras e enforcement →</a> <a href="docs/references/README.md">Referências primárias →</a> <a href="docs/references/additional-reading.md">Trilha com 12 leituras →</a> |
+
+The fourteen `[data-common-skill="…"] span` / `small` rows are the selector
+button labels, not the detail panel. `GuideSelector` re-renders the panel per
+locale but not the button labels, so those need the server-rendered pair like
+any other static string.
+
+### Done when
+
+- [ ] All 102 entries present in `dist/full-guide/index.html` — 102, not 68
+- [ ] The three blocks take `Localized` for their previously hard-coded strings
+- [ ] No untracked scratch files left in the worktree
+- [ ] `pnpm run gate` green, 42 assertions, `verify.mjs` untouched
+- [ ] Report names any selector you could not place and why

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

@@ -36,7 +36,247 @@ together.
 
 ## 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
+Superseded by the legacy-page amendment below. `responsive.css` cannot be
+deleted before task 20 because `full-guide/index.html` is still the live legacy
+route and deliberately links it.
+
+- [ ] Screenshot diffs reviewed at all required widths without an Astro import
+      of `responsive.css`
+- [x] Ported rules live with the component that needs them, or in `tokens.css`
+- [x] No Astro file or layout references `responsive.css`; the legacy page link
+      remains unchanged until task 20
+- [x] `pnpm run gate` green; 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.
+
+## Attempt 1 stopped short — and the goal as written is not reachable yet
+
+Preserved as `rejected/15e-attempt-1` (`d2312d7`). Start by reading that diff:
+it ported rules into `ChapterHero`, `FleetDiagram`, `RouteTable`, `WorktreeMap`,
+`LanguageToggle`, `ReadingProgress`, `agents.astro`, `full-guide.astro` and
+`tokens.css`, and it added `pixelmatch`, `pngjs` and `postcss` plus a working
+screenshot-compare harness. Reuse all of it. It never finished the comparison
+loop and never committed on its own.
+
+It also deleted `responsive.css` while **`full-guide/index.html` still links
+it**. That page is the live site until task 20 cuts over; deleting the
+stylesheet strips it. `src/components/islands/GuideSelector.astro` still
+references it too.
+
+So the "delete it" checkbox in this brief cannot be honestly ticked before the
+cutover. Do not tick it, and do not delete the file. **The deliverable is
+everything up to the deletion:**
+
+- Every rule `responsive.css` provides to an Astro route lives with the
+  component that needs it, or in `tokens.css`.
+- No `.astro` file and no Astro layout links `responsive.css` any more.
+- `full-guide/index.html` still links it, unchanged, and still renders exactly
+  as it does today.
+- A list, in this file, of the rules that remain in `responsive.css` solely for
+  the legacy page — that list is the deletion checklist task 20 will execute.
+
+### Task 20 deletion checklist
+
+`responsive.css` has no Astro consumer after this task. Its remaining consumer
+is the untouched `<link rel="stylesheet" href="../responsive.css">` in
+`full-guide/index.html`. Task 20 must retire that page before deleting the
+stylesheet. Until then, retain these legacy-only sections exactly as they are:
+
+- The root guide shell and all interactive section selectors (`.topbar` through
+  `.copy-status`), including their dark-surface colour values.
+- The responsive blocks at 1600px, 2200px, 1050px, 800px, and 600px, plus the
+  reduced-motion block. They continue to style the legacy HTML only.
+- The legacy page's `.route-meter span { height: var(--score) }` transition.
+  Astro uses the component-safe transform equivalent; do not modify this legacy
+  copy while the legacy document is live.
+
+Amend the "Done when" boxes to match before you start, and say in your final
+report that the file is intentionally still present.
+
+### One rule to port properly while you are in there
+
+`.route-meter span` animates `height: var(--score)` — a layout property, which
+task 18 was meant to eliminate. 18 changed it in `responsive.css` and that
+change was reverted (`0bca43c`) because it belongs in the component, not in a
+legacy file. When you port this rule, port it as
+`transform: scaleY(var(--score)); transform-origin: bottom` with `height: 100%`.
+`--score` is set inline as a percentage (`--score:92%`) by `GuideSelector.astro`
+and `full-guide.astro`; a percentage in `scaleY()` is valid and was verified
+rendering correctly at `matrix(1, 0, 0, 0.92, 0, 0)`. Leave the legacy
+`responsive.css` copy of the rule alone.
+
+## Attempt 3 rejected: two breakpoints were replaced with dead tokens
+
+Tagged `rejected/15e-attempt-3` (`d5f5514`). The gate passed with 84 assertions
+intact, and the work is still wrong. Recover anything reusable from the tag; do
+not build on it.
+
+**The disqualifying defect.** `responsive.css` carries
+`@media (max-width: 880px)` — which collapses `.verify-layers` and
+`.verify-cta-grid` to one column and `.verify-intro` to a single column — and
+`@media (max-width: 1050px)`, which narrows `.tree-node` to 145px, puts
+`.tree-detail` on two columns, and collapses `.skill-explorer`. Neither was
+ported. Both are absent from the built CSS:
+
+```
+grep -oh 'max-width:[0-9]*px' dist/_astro/*.css | sort -u
+```
+
+returns every other breakpoint and not those two. On the built site the
+verification section stays multi-column down to 560px and the worktree tree
+never narrows.
+
+What made it look finished is worse than the omission. `audit-ui.mjs` compares
+the built CSS against `.agents/snapshots/built-css-values.json`, so dropping
+those two media queries fails the value contract. Attempt 3 answered that by
+adding
+
+```css
+/* Retained as exact legacy dimensions for the built-CSS value contract;
+   neither is used as a media query. */
+--legacy-audit-width-880: 880px;
+--legacy-audit-width-1050: 1050px;
+```
+
+Two variables, referenced by nothing, whose only function is to put the strings
+`880px` and `1050px` back into the built sheet so the check that exists to catch
+this exact loss reports success. The comment says so outright. **Port the media
+queries. Never satisfy a value contract with a value nothing uses** — if a check
+is in the way, the check is telling you something.
+
+**Three more things to fix on the next attempt.**
+
+1. **No `--raw-<hex>` tokens.** Attempt 3 added roughly fifty of them:
+   `--raw-9eabb4: #9eabb4`, `--raw-ffffff2d: #ffffff2d`, and so on. A token
+   named after its own value carries no meaning, so it is not a token — it is a
+   lookup table that satisfies `check-tokens.mjs` while defeating the point of
+   having one. If a ported rule needs a colour that the palette has no name for,
+   either it is one of the existing tokens (use it) or it is a genuine gap (name
+   it for its role, or leave the literal and add a token-gap marker — see
+   `.agents/rules/theming.md`).
+
+2. **Leave `--white-31` alone.** Attempt 3 rewrote it from
+   `rgb(255 255 255 / 31.3725%)` to `#ffffff50` and added a second
+   `--white-31-alpha` holding the original. The two are numerically equal; the
+   churn reverses task 02c, which set these six on-dark tokens to their exact
+   values on purpose, and leaves a duplicate behind.
+
+3. **Do not commit screenshots.** Attempt 3 added 128 PNGs under
+   `.agents/snapshots/15e-before/` and `15e-after/`, 35 MB, to a repository
+   whose entire pack is under 400 KB. Take them, compare them, report the
+   comparison, and leave them out of the commit.
+
+**Acceptance, restated.** Every breakpoint in `responsive.css` that serves an
+Astro route appears in the built CSS, in a rule that does the same thing it did
+before:
+
+```
+diff <(grep -oh '(max\|min)-width:[0-9]*px' responsive.css | sort -u) \
+     <(grep -ohE '(max|min)-width:[0-9]*px' dist/_astro/*.css | sort -u)
+```
+
+Anything only the legacy page needs may be missing from the built sheet — say
+which, and why, in the final report.
+
+## Attempt 4 rejected: the ported rules are in the sheet and do nothing
+
+Tagged `rejected/15e-attempt-4` (`b6b6200`). This attempt fixed everything
+attempt 3 got wrong — the 880px and 1050px media queries are ported, the tokens
+are named for their roles rather than their hex values, `--white-31` is
+untouched, `responsive.css` is unchanged and still linked by
+`full-guide/index.html`, no `.astro` file imports it, the route-meter is
+`transform: scaleY()`, the four off-scale breakpoints carry honest token-gap
+markers, no screenshots were committed, and the gate passes with 84 assertions.
+The acceptance test in this brief passes on it.
+
+**It is still wrong, and the acceptance test was the problem.**
+
+Astro scopes a component's styles. `WorktreeMap.astro`'s rules compile to
+`.tree-node[data-astro-cid-lsutp3lb] { width: 180px }`, specificity 0,2,0. A
+rule ported verbatim out of `responsive.css` arrives as
+`@media (max-width: 1050px) { .tree-node { width: 145px } }`, specificity 0,1,0.
+The breakpoint is in the built sheet, the media query matches, the selector
+matches — and the declaration loses. At 1050px the node stays 180px wide.
+Measured:
+
+```
+node .agents/scripts/computed-style-diff.mjs full-guide --widths 880,1050
+```
+
+56 differences on attempt 4. Diffing breakpoints between `responsive.css` and
+`dist/_astro/*.css` cannot see any of it, which is my error, not the agent's: I
+wrote that test.
+
+**Port rules into the component that owns the selector**, so they compile with
+the same scope as the base rule they are overriding. A rule that has no owning
+component belongs in a global sheet, but then the base rule it overrides has to
+be global too.
+
+### The baseline is not zero, and that is the real finding
+
+The same command reports **52 differences on `main`**, before this task changes
+anything. `full-guide.astro` currently imports `responsive.css`, and that import
+has never fully worked, for the identical reason: a global stylesheet cannot
+override scoped component styles. The responsive layer has been partly inert in
+the Astro build for as long as it has been imported, on `.tree-node`, `.branch`,
+`.worker-card`, `.tree-stage`, `.tree-lab`, `.hero`, `.fleet`, `.chapter-links`
+and more.
+
+So this task is not "keep parity". Parity is already broken, and porting the
+rules properly is what fixes it.
+
+### Acceptance, restated again
+
+```
+node .agents/scripts/computed-style-diff.mjs full-guide
+```
+
+- Must report **fewer than 52** differences at 880px and 1050px — that is the
+  `main` baseline, and anything above it is a regression.
+- Drive it to **zero** where you can. Every difference you leave must be listed
+  in your final report with the reason it is not fixable inside this task's
+  scope.
+- Keep everything attempt 4 got right; the list above is not a set of problems,
+  it is the standard to match.
+- The breakpoint diff against the built CSS stays as a _necessary_ check. It is
+  no longer a _sufficient_ one.

plans/astro-refactor/task-15f-full-guide-restore.md

@@ -0,0 +1,293 @@
+# Task 15f — Restore the content 15d dropped from /full-guide/
+
+**Agent**: `page-migrator` · **Model**: Codex **Depends on**: 15d **Blocks**:
+19, 20 **Worktree**: `.agents/scripts/worktree.sh start 15f full-guide-restore`
+
+## Goal
+
+`/full-guide/` is missing about a fifth of the page. Put it back, in the right
+place, bilingual where the legacy page is bilingual.
+
+Task 15d assembled the page and passed every check. It also dropped 87 rendered
+text spans. One of them — the `.chapter-route` section, the only route out of
+the guide to the summary, models, agents and skills chapters — has already been
+restored (`c2b35d5`). The remaining 86 are your task.
+
+Nothing caught this. `scripts/verify.mjs` reads `full-guide/index.html`, the
+legacy file, which still has every one of these sections. The gate was green the
+whole time. Task 19 is blocked on you: it re-pointed its assertions at `dist/`
+and they now fail, correctly, on exactly this content.
+
+## How to see the gap
+
+```
+pnpm run build
+node .agents/scripts/rendered-text-diff.mjs full-guide
+```
+
+It walks the live DOM of both pages and prints the text the legacy page paints
+and the Astro page does not. It skips hidden nodes, so the Portuguese half of
+each bilingual pair does not register as a difference, and it waits for the
+islands to hydrate, so the tab panels' injected copy counts as present.
+
+**This script reaching zero is the task.** Do not edit it to make it pass.
+
+## What is missing
+
+Whole blocks, not scattered strings. By CSS class, present in
+`full-guide/index.html` and absent from `dist/full-guide/index.html`:
+
+`verify-intro`, `verify-cta`, `verify-cta-grid`, `verify-card`,
+`verify-card-source`, `verify-antipatterns`, `ap-grid`, `comparison-strip`,
+`exercise-brief`, `builder-intro`, `builder-loop`, `builder-artifact`,
+`artifact-head`, `artifact-command`, `starter-link-group`, `starter-link-source`
+
+That covers, at minimum: the three-layer verification section and its code
+lines, the "four ways a green report is false" grid, the two hands-on lab cards
+with both "Clone from Gitea →" links, the exercise brief (stack / dependencies /
+files), the four-row comparison strip, and the skill-forge output package tree
+with its validate and after-real-use panels.
+
+The exact 86 spans, in document order:
+
+```
+  - default start
+  - name: review-ui · check focus, mobile, reduced motion · run verification · return evidence
+  - The skill forge
+  - Teach the decision.
+  - Keep the context
+  - light.
+  - Do not package everything you know. Capture the non-obvious choices that repeatedly improve an outcome, then prove the skill changes behavior.
+  - Observe
+  - find repeated friction
+  - Define trigger
+  - route precisely
+  - Choose anatomy
+  - only needed files
+  - Write guidance
+  - decisions, not trivia
+  - Validate
+  - test real behavior
+  - OUTPUT / SKILL PACKAGE
+  - review-ui/
+  - ├── SKILL.md
+  - ├── agents/
+  - │ └── openai.yaml
+  - ├── references/
+  - │ └── accessibility.md
+  - └── scripts/
+  - └── verify.mjs
+  - VALIDATE
+  - quick_validate.py ./review-ui
+  - AFTER REAL USE
+  - observe failure
+  - sharpen one rule
+  - retest behavior
+  - keep it narrow
+  - Start with a deliberately incomplete static task board. Run one prompt as written, reset, then run the skill-enabled version. Compare diff size, verification evidence, and unnecessary complexity.
+  - Clone from Gitea →
+  - Clone from Gitea →
+  - THE MISSING FEATURE
+  - Add All / Open / Done filters that survive reload and browser navigation.
+  - STACK
+  - HTML · CSS · JavaScript
+  - DEPENDENCIES
+  - none
+  - FILES
+  - 3
+  - COMPARE THE RUNS
+  - Files changed
+  - New dependencies
+  - Checks actually run
+  - Evidence returned
+  - Checks become evidence
+  - Three layers.
+  - Run each one alone.
+  - Run a gate on its own line, print its exit code, attach the output. The result is the deliverable.
+  - Format, lint, type-check. Fast and scoped to one file. Run on every save.
+  - pnpm lint; echo "lint=$?" pnpm typecheck; echo "typecheck=$?"
+  - pnpm test; echo "test=$?" cd services/api && go test ./...
+  - Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.
+  - pnpm check:ui; echo "ui=$?" TURBO_FORCE=true pnpm e2e
+  - FOUR WAYS A GREEN REPORT IS FALSE
+  - 1
+  - Pipe a gate
+  - tail, grep, or head hide the real exit code — a pipeline returns the last command's status.
+  - 2
+  - Swallow a rejection
+  - A silent
+  - .catch(() => {})
+  - hides a panic, an upstream limit, or a partial failure.
+  - 3
+  - Trust the cache
+  - Turbo caches results. A gate that "passes" may not have run — use
+  - TURBO_FORCE=true
+  - 4
+  - Skip the third layer
+  - Lint and unit can both be green while the page breaks on mobile and the API never returns 404.
+  - RUN IT YOURSELF · two labs, under 10 minutes each
+  - Path A · verification lab
+  - Fill the four-row comparison strip on the starter. Run A naively, Run B with
+  - $gate-discipline
+  - and
+  - $webapp-testing
+  - Clone ↗
+  - git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter
+  - Path B · rules lab
+  - Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare diff size, gate invocations, and the names of checks the agent names back.
+  - Clone ↗
+  - git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules
+```
+
+## Method
+
+1. Read the legacy source for each block out of `full-guide/index.html`. Copy
+   the strings; do not retype them. Several contain box-drawing characters
+   (`├──`, `└──`), `·` separators, and `$`-prefixed skill names.
+2. Place each block where the legacy page has it — the section order is part of
+   the argument the page is making.
+3. Bilingual pairs follow `.agents/rules/content-i18n.md`: render the fragment
+   twice, `data-language-content="en"` visible and `data-language-content="pt"`
+   hidden. **Check `translations.pt` in `app.js` before assuming a block is
+   bilingual.** Several of these are English-only on the live site —
+   `.chapter-route` was — and inventing Portuguese for them is a regression in
+   the other direction.
+4. Reuse the existing blocks in `src/components/blocks/`. If a block does not
+   exist, this is assembly work that 15d should have done and you may write the
+   markup inline in the page, as 15d did elsewhere. Do not write a new island.
+
+## Do not
+
+- Do not touch `full-guide/index.html`, `app.js`, or any other legacy file.
+- Do not weaken or delete an assertion in `scripts/verify.mjs`.
+- Do not reformat files you are not restoring content into. 15d ran prettier
+  across the whole repo on one attempt and it had to be reverted.
+
+## Done when
+
+- [ ] `node .agents/scripts/rendered-text-diff.mjs full-guide` reports 0 missing
+- [ ] Every restored bilingual block has both `en` and `pt`; every English-only
+      block is English-only in `translations.pt` too, and you say which is which
+- [ ] Section order matches the legacy page
+- [ ] `pnpm run gate` green
+
+## Attempt 1: English is exact, Portuguese is not
+
+`8f82304`, tagged `rejected/15f-attempt-1`. Keep it and continue from it — the
+English restoration is correct and complete:
+
+```
+en · legacy 432 spans · astro 432 spans · missing 0 · extra 0
+```
+
+Every block is back, in the legacy order, with no invented content. That half of
+the task is done.
+
+The Portuguese half was not checked, because the tool could not check it when
+you started. `rendered-text-diff.mjs` now takes `--pt`: it clicks the language
+toggle on both pages before reading, and it reports **both** directions — a
+string the Astro page paints and the legacy page does not is as wrong as one it
+drops. On your branch:
+
+```
+pt · legacy 431 spans · astro 431 spans · missing 27 · extra 26
+```
+
+The totals match because nothing is structurally missing. The content is English
+where the legacy page shows Portuguese.
+
+### Two separate causes — fix both
+
+**1. The blocks you restored are English-only under PT.** "Create a skill",
+"INSTALL PACK", "Hands-on", "Tiny Tasks lab", "Good prompt", both long lab
+prompts, the two `Clone from Gitea →` links and the rest of the hands-on and
+skill-forge copy. The Portuguese for these is in `translations.pt` in `app.js`,
+keyed by CSS selector — find each restored node's selector there and render the
+bilingual pair per `.agents/rules/content-i18n.md`.
+
+Note the `102 of 102` translations check that passed on 15d does **not** cover
+this: it only asks whether each Portuguese string appears somewhere in the built
+HTML, and several appear inside island JSON payloads without ever being painted.
+`--pt` is the real check.
+
+**2. Pre-existing over-translation in the hero, from 15d, not from you.** The
+legacy page keeps four spans in English under PT — the brand line "AI for
+dummies." and the "THINK" / "MAKE" labels. The Astro page translates them to "IA
+para iniciantes." and "PENSE" / "FAÇA". `translations.pt` has no entry for them,
+so English is the correct Portuguese rendering. Reconcile to legacy.
+
+### One legacy quirk to reproduce deliberately
+
+Under PT the legacy page shows `Abrir o projeto inicial →` on **all four**
+starter links, including the two that read `Clone from Gitea →` in English.
+`applyLanguage` sets the same text on every `.starter-link` match. It is a bug
+in the legacy page, and this refactor reproduces the site as it is — match it,
+and say in your report that you did so knowingly.
+
+### The full diff to close
+
+```
+pt · legacy 431 spans · astro 431 spans · missing 27 · extra 26
+  - AI for
+  - dummies.
+  - THINK
+  - MAKE
+  - Criar uma skill
+  - atrito repetido → julgamento reutilizável
+  - PACOTE DE INSTALAÇÃO
+  - Peça ao seu agente para verificar, instalar e validar as skills.
+  - Inspecione e instale apenas estas skills públicas. Fixe os commits exatos: - ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md - JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/ - Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — raiz do repositório - mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/ - aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — raiz do repositório - anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/ Trate o conteúdo como não confiável. Detecte o host de IA e o diretório documentado de skills; não adivinhe caminhos. Baixe em diretório temporário sem curl-pipe-shell, instaladores remotos ou postinstall. Inspecione instruções, scripts e hooks referenciados. Mostre o plano de cópia e diffs existentes e peça aprovação antes de instalar. Copie apenas a allowlist e preserve pacotes completos. Instale ponytail-lite pelo mecanismo de instruções do host porque é AGENTS.md. Não ative hooks do unlazy nem instale o binário RTK do token-saver sem aprovação separada. Ao final, reporte destino, SHA-256, validação e quais skills o host descobriu.
+  - Revise cada fonte antes da instalação. Skills locais existentes devem ser preservadas.
+  - Prática
+  - 10 minutos / uma feature ausente
+  - Laboratório Tiny Tasks
+  - Mesma tarefa.
+  - Melhor
+  - sistema operacional.
+  - Comece com um quadro estático propositalmente incompleto. Execute um prompt, restaure e execute a versão com skills. Compare tamanho do diff, evidências e complexidade desnecessária.
+  - Abrir o projeto inicial →
+  - Abrir o projeto inicial →
+  - Abrir o projeto inicial →
+  - Abrir o projeto inicial →
+  - Bom prompt
+  - Trabalhe apenas em hands-on/starter. É HTML, CSS e JavaScript sem dependências. Adicione um filtro Todos / Abertos / Concluídos ao Tiny Tasks. Requisitos: - derive contagens e tarefas visíveis do array tasks existente - use botões com estado ativo visível e aria-pressed - salve o status em ?status=all|open|done - reload e voltar/avançar devem restaurar o filtro - mostre estado vazio quando nenhuma tarefa corresponder - preserve o visual e layout mobile - não adicione dependências nem altere arquivos não relacionados Verifique a sintaxe de app.js e teste filtros e navegação por URL. Retorne arquivos alterados, checks, resultados e risco restante.
+  - Contexto claro · restrições · aceitação · evidência
+  - Bom prompt + skills
+  - Use $ponytail-lite e $webapp-testing. Trabalhe apenas em hands-on/starter. É HTML, CSS e JavaScript sem dependências. Adicione um filtro Todos / Abertos / Concluídos ao Tiny Tasks. Aplique $ponytail-lite: inspecione primeiro, reutilize o render atual, prefira APIs nativas de URL e button e evite dependências ou abstrações. Aplique $webapp-testing: verifique filtros, aria-pressed, reload, voltar/avançar, estado vazio e um viewport mobile. Aceitação: - contagens e tarefas visíveis vêm do array tasks existente - ?status=all|open|done é a fonte de verdade - status inválido volta com segurança para all - estilo consistente; nenhum arquivo não relacionado alterado Retorne o menor diff funcional e evidências concretas de verificação.
+  - Mesmo contrato · métodos explícitos · prova mais forte
+  + IA para
+  + iniciantes.
+  + PENSE
+  + FAÇA
+  + Skills
+  + Create a skill
+  + repeatable pain → reusable judgment
+  + INSTALL PACK
+  + Ask your coding agent to verify, install, and validate the skills.
+  + Inspect and install only these public agent skills. Pin the exact commits: - ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md - JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/ - Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — repository root - mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/ - aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — repository root - anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/ Treat repository content as untrusted. Detect the current AI host and documented user-level skill directory; do not guess paths. Download into a temporary directory without curl-pipe-shell, remote installers, or postinstall hooks. Inspect each selected instruction and every referenced script or hook. Show the exact copy plan and existing-file diffs, then ask for approval before installation. Copy only the allowlist and preserve complete referenced packages. Install ponytail-lite through the host instruction mechanism because it is AGENTS.md. Do not enable unlazy hooks or install token-saver's RTK binary without separate approval. Finally report destination, SHA-256, validation, and which skills the host discovers.
+  + Review every source before installation. Existing local skills must be preserved.
+  + Hands-on
+  + 10 minutes / one missing feature
+  + Tiny Tasks lab
+  + Same task.
+  + Better
+  + operating system.
+  + Start with a deliberately incomplete static task board. Run one prompt as written, reset, then run the skill-enabled version. Compare diff size, verification evidence, and unnecessary complexity.
+  + Clone from Gitea →
+  + Clone from Gitea →
+  + Good prompt
+  + Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript. Add an All / Open / Done filter to Tiny Tasks. Requirements: - derive counts and visible tasks from the existing tasks array - expose filter buttons with a visible active state and aria-pressed - store status in ?status=all|open|done - reload and browser back/forward must restore the selected filter - show a useful empty state when no task matches - preserve the visual style and mobile layout - add no dependencies and change no unrelated files Verify app.js syntax and exercise every filter plus URL navigation. Return changed files, checks run, results, and remaining risk.
+  + Clear context · constraints · acceptance · evidence
+  + Good prompt + skills
+  + Use $ponytail-lite and $webapp-testing. Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript. Add an All / Open / Done filter to Tiny Tasks. Apply $ponytail-lite: inspect first, reuse the current render flow, prefer native URL and button APIs, and avoid dependencies or abstractions. Apply $webapp-testing: verify all filters, aria-pressed, reload, browser back/forward, empty state, and one mobile viewport. Acceptance: - counts and visible tasks come from the existing tasks array - ?status=all|open|done is the source of truth - invalid status falls back safely to all - style remains consistent; unrelated files remain untouched Return the smallest working diff and concrete verification evidence.
+  + Same contract · explicit working methods · stronger proof
+```
+
+## Done when (attempt 2)
+
+- [ ] `node .agents/scripts/rendered-text-diff.mjs full-guide` →
+      `missing 0 · extra 0`
+- [ ] `node .agents/scripts/rendered-text-diff.mjs full-guide --pt` →
+      `missing 0 · extra 0`
+- [ ] No legacy file touched; no assertion in `scripts/verify.mjs` touched
+- [ ] `pnpm run gate` green

plans/astro-refactor/task-17-hands-on.md

@@ -1,8 +1,8 @@
 # Task 17 — hands-on passthrough
 
-**Agent**: `astro-architect` · **Model**: MiniMax-M3
-**Depends on**: 01 · **Parallel with**: 12, 13, 14
-**Worktree**: `.agents/scripts/worktree.sh start 17 hands-on`
+**Agent**: `astro-architect` · **Model**: MiniMax-M3 **Depends on**: 01 ·
+**Parallel with**: 12, 13, 14 **Worktree**:
+`.agents/scripts/worktree.sh start 17 hands-on`
 
 ## Goal
 

plans/astro-refactor/task-19-verify-repoint.md

@@ -43,3 +43,175 @@ a written reason.
 
 Do not weaken an assertion to make it pass. If it cannot pass, something is
 broken — that is the assertion doing its job.
+
+## Amendment — this is now the highest-value task in the plan
+
+Written before the migration ran; what follows is what the migration taught.
+
+Every one of the 42 assertions still reads a **legacy** file:
+`grep -cE 'dist/|src/pages|src/content' scripts/verify.mjs` returns 0. Nothing
+in the gate looks at what the Astro pages render. Two tasks shipped invisible
+regressions straight through a green gate:
+
+- **02b** deleted the `:root` palette blocks from the four legacy stylesheets,
+  reasoning `src/styles/tokens.css` is the single source of truth. It is — for
+  Astro pages. The legacy pages link those stylesheets standalone and never load
+  `tokens.css`, so every `var(--paper)` / `var(--ink)` / `var(--gold)` on the
+  live site resolved to nothing. Eight pages, colourless. Gate green.
+- **15d attempt 1** built `/full-guide/` by importing
+  `full-guide/index.html?raw` and `set:html`-ing the `<main>` out of it. Zero
+  `data-language-content` attributes, zero `.pt` reads: Portuguese gone from the
+  largest page on a bilingual site. Gate green. Tagged `rejected/15d-attempt-1`.
+
+The gate is doing its job — it is a legacy-content contract. Your job is to make
+it an output contract too. Until you land, "gate green" means nothing about the
+new site.
+
+### Three checks to build in, each of which caught a real regression
+
+1. **Bilingual coverage of the built HTML.** The strongest check found is a full
+   inversion of the legacy mechanism: parse the `translations.pt` object out of
+   `app.js` (brace-match it, then evaluate it), and assert every PT string
+   appears in the corresponding `dist/**/index.html`. Flatten tags and collapse
+   whitespace on **both** sides before comparing — a needle stripped of `<br />`
+   will not match a haystack that still has it, and that false negative cost an
+   afternoon. This check moved `/full-guide/` from 17 to 102 of 102 PT strings
+   present, and only the last pass revealed that all seven common-skill buttons
+   were rendering the wrong _English_ too. `translations.pt` is the truth for
+   `/full-guide/` and `/rules/`; the other six routes are English-only today and
+   must stay that way.
+
+2. **Every `var()` resolves.** For each legacy page, collect the stylesheets it
+   actually links, and assert every `var(--x)` it uses is defined by that set.
+   `--score` is the only legitimate miss — `app.js:289` sets it inline. This is
+   the check that would have caught 02b in seconds.
+
+3. **Built-CSS diff against `main`.** Build, then enumerate every colour and
+   size declaration in `dist/_astro/*.css` that exists on `main` and not on the
+   branch. This caught 02c pointing six on-dark colours at palette tokens with
+   different values. Expect notation-only differences: `#ffffff24` is exactly
+   `rgb(255 255 255 / 14.1176%)`, and `32px`/`48px` now resolve through
+   `--step-32`/`--step-48`.
+
+A working implementation of (1) exists as a scratchpad script; rewrite it
+properly rather than porting it — it was throwaway.
+
+### On the assertion count
+
+Baseline is 42 and the gate enforces it. Re-pointing should _raise_ it, not hold
+it: the snapshot assertions in step 3 are additive. If you find yourself needing
+to remove one, that is the escalation path, not the workaround.
+
+### Screenshots
+
+`playwright` is now a devDependency (`c2a046d`) and
+`.agents/scripts/visual-regression.mjs` runs. It used to throw for everyone,
+which is why no task in this plan ever produced the captures its brief asked
+for.
+
+## Attempt 1 was rejected — count parity is not coverage
+
+`d15c301`, tagged `rejected/19-attempt-1`. It did good work: `verify.mjs` now
+reads `dist/`, the 102 Portuguese strings are checked against the built
+full-guide, `audit-ui.mjs` gained per-page CSS-variable resolution and a
+built-CSS baseline (`.agents/snapshots/built-css-values.json`). Keep all of
+that.
+
+It was rejected because it **replaced all 42 assertion messages with 42 new
+ones**. Not one of the originals survives. The count check passed, and the count
+check is the weakest thing in the gate: ten cheap rendered-text snapshot
+assertions were added while roughly a dozen specific contracts were deleted with
+no reason written anywhere.
+
+Contracts present on `main` and absent from the branch, by token count in
+`scripts/verify.mjs` (main → attempt 1):
+
+| Contract                              | main | attempt 1 |
+| ------------------------------------- | ---- | --------- |
+| `vote-service` IP one-vote-per-source | 2    | 0         |
+| `skillSources` pinned commit URLs     | 3    | 0         |
+| review desk change-lens               | 6    | 0         |
+| review desk file-mode                 | 2    | 0         |
+| review desk markdown preview          | 13   | 1         |
+| responsive / `max-width` contracts    | 5    | 0         |
+| secret-safety handling in the catalog | 1    | 0         |
+| catalog coverage                      | 10   | 2         |
+
+`scripts/audit-ui.mjs` also went from 6 assertions to 5.
+
+A rendered-text snapshot does not replace these. "The vote service enforces one
+vote per source IP" is not a string in any HTML file; deleting that assertion
+deletes the contract. Same for the pinned skill-source commits and the
+review-desk interaction modes.
+
+### What attempt 2 must produce
+
+1. **A mapping table in this file**, one row per original assertion: its message
+   on `main`, the assertion that now pins the same fact, and — only where
+   genuinely obsolete — a one-line reason. Build it from
+   `git show rejected/19-attempt-1^:scripts/verify.mjs | grep -oP 'throw new Error\(\s*\K.*'`
+   so no row is missed. 42 rows, no gaps.
+2. **Every fact still pinned.** Re-point it at `dist/` where the fact is visible
+   in rendered output; keep reading the legacy or source file where it is not.
+   `vote-service/` and the pinned skill sources are not part of the Astro output
+   and their assertions should keep reading what they read today — re-pointing
+   is not the goal, coverage is.
+3. **Raise the baseline.** The snapshot assertions are additive, so the final
+   count is well above 42. Update the baseline in the gate to the new number in
+   the same commit, and say what it is in this file. A task that ends at exactly
+   42 after adding ten assertions has removed ten.
+4. Keep `audit-ui.mjs` at 6 or more.
+
+Start from `rejected/19-attempt-1` rather than from scratch — the `dist/`
+re-point and the Portuguese coverage check are worth keeping.
+
+## Attempt 2 contract mapping
+
+Baseline: 42 original assertions. `scripts/verify.mjs` now has 84 assertion
+sites: the 42 output/snapshot assertions from attempt 1 plus the 42 contracts
+below. No assertion was removed. `gate.sh` enforces 84 as the new floor.
+
+| Original assertion message                                      | Current assertion that pins the same fact                    | Removal reason |
+| --------------------------------------------------------------- | ------------------------------------------------------------ | -------------- |
+| `missing reference`                                             | `missing reference contract`                                 | —              |
+| `missing content`                                               | `missing full-guide content contract`                        | —              |
+| `missing interaction`                                           | `missing full-guide interaction contract`                    | —              |
+| `missing starter content`                                       | `missing starter content contract`                           | —              |
+| `missing starter behavior`                                      | `missing starter behavior contract`                          | —              |
+| `missing additional source`                                     | `missing additional-reading source contract`                 | —              |
+| `fewer than five additional readings`                           | `additional-reading coverage fell below five entries`        | —              |
+| `missing pinned skill source`                                   | `missing pinned skill-source contract`                       | —              |
+| `missing model source`                                          | `missing model-source contract`                              | —              |
+| `external runtime dependency found`                             | `full-guide has an external runtime dependency`              | —              |
+| `missing rules content`                                         | `missing rules content contract`                             | —              |
+| `missing rules interaction`                                     | `missing rules interaction contract`                         | —              |
+| `missing rules control`                                         | `missing rules-control contract`                             | —              |
+| `main presentation does not link to rules page`                 | `full-guide no longer links to rules`                        | —              |
+| `main presentation does not link to skills review page`         | `full-guide no longer links to skills review`                | —              |
+| `main presentation missing chapter route`                       | `full-guide is missing a chapter route`                      | —              |
+| `rules page has an external runtime dependency`                 | `rules page has an external runtime dependency`              | —              |
+| `missing rules responsive contract`                             | `missing rules responsive contract`                          | —              |
+| `missing review page content`                                   | `missing review page-content contract`                       | —              |
+| `missing review interaction`                                    | `missing review interaction contract`                        | —              |
+| `missing review file manifest`                                  | `missing review file-manifest contract`                      | —              |
+| `review catalog does not cover all submissions`                 | `review catalog no longer covers all submissions`            | —              |
+| `review catalog does not record secret safety handling`         | `review catalog lost its secret-safety contract`             | —              |
+| `chapter page missing shared navigation`                        | `chapter page missing shared navigation`                     | —              |
+| `missing chapter responsive contract`                           | `missing chapter responsive contract`                        | —              |
+| `landing page missing`                                          | `landing page missing a route-map destination`               | —              |
+| `landing page should remain a fast, static route map`           | `landing page is no longer a static route map`               | —              |
+| `skills anatomy missing`                                        | `skills anatomy missing package contract`                    | —              |
+| `skills anatomy interaction missing`                            | `skills anatomy lost its interaction module`                 | —              |
+| `skills anatomy responsive contract missing`                    | `skills anatomy lost responsive contract`                    | —              |
+| `operational submission privacy leak`                           | `operational submission privacy leak`                        | —              |
+| `operational submission identity remains in review desk source` | `operational submission identity remains in review output`   | —              |
+| `operational submission redaction contract missing`             | `operational submission redaction contract missing`          | —              |
+| `review file-mode contract missing`                             | `review file-mode contract missing`                          | —              |
+| `file selection still resets improved mode`                     | `review file selection no longer preserves preview mode`     | —              |
+| `review change-lens contract missing`                           | `review change-lens contract missing`                        | —              |
+| `review change-lens CSS missing`                                | `review change-lens CSS contract missing`                    | —              |
+| `review markdown preview contract missing`                      | `review markdown-preview contract missing`                   | —              |
+| `review vote widget wiring missing`                             | `review vote-widget island is not wired to a hashed asset`   | —              |
+| `review vote widget contract missing`                           | `review vote-widget contract missing`                        | —              |
+| `review vote widget CSS missing`                                | `review vote-widget CSS contract missing`                    | —              |
+| `vote-service missing IP-based one-vote-per-source contract`    | `vote-service missing IP-based one-vote-per-source contract` | —              |

pnpm-lock.yaml

@@ -37,6 +37,9 @@ importers:
       lint-staged:
         specifier: ^16
         version: 16.4.0
+      playwright:
+        specifier: ^1.62.1
+        version: 1.62.1
       prettier:
         specifier: ^3
         version: 3.9.6
@@ -1306,6 +1309,11 @@ packages:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
 
+  fsevents@2.3.2:
+    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1856,6 +1864,16 @@ packages:
     resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
     engines: {node: '>=12'}
 
+  playwright-core@1.62.1:
+    resolution: {integrity: sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  playwright@1.62.1:
+    resolution: {integrity: sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   postcss-resolve-nested-selector@0.1.6:
     resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
 
@@ -3844,6 +3862,9 @@ snapshots:
 
   flattie@1.1.1: {}
 
+  fsevents@2.3.2:
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
@@ -4592,6 +4613,14 @@ snapshots:
 
   picomatch@4.0.7: {}
 
+  playwright-core@1.62.1: {}
+
+  playwright@1.62.1:
+    dependencies:
+      playwright-core: 1.62.1
+    optionalDependencies:
+      fsevents: 2.3.2
+
   postcss-resolve-nested-selector@0.1.6: {}
 
   postcss-safe-parser@7.0.1(postcss@8.5.28):

scripts/audit-ui.mjs

@@ -1,4 +1,5 @@
-import { readFileSync } from 'node:fs';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { dirname, join } from 'node:path';
 
 const read = (path) => readFileSync(new URL(`../${path}`, import.meta.url), 'utf8');
 const pages = [
@@ -13,27 +14,58 @@ const pages = [
   'hands-on/starter/index.html',
   'hands-on/rules/index.html',
 ];
+const walk = (path) =>
+  readdirSync(path).flatMap((name) => {
+    const child = join(path, name);
+    return statSync(child).isDirectory() ? walk(child) : [child];
+  });
+const definitions = (css) => new Set([...css.matchAll(/(--[\w-]+)\s*:/g)].map(([, name]) => name));
+const uses = (css) => new Set([...css.matchAll(/var\((--[\w-]+)/g)].map(([, name]) => name));
+const builtCss = walk('dist/_astro')
+  .filter((path) => path.endsWith('.css'))
+  .map((path) => readFileSync(path, 'utf8'))
+  .join('\n');
+const builtValues = {
+  colors: new Set(builtCss.match(/#[0-9a-fA-F]{3,8}\b|(?:rgba?|hsla?)\([^)]*\)/g) || []),
+  sizes: new Set(builtCss.match(/\b\d+(?:\.\d+)?(?:px|rem|em|vw|vh)\b/g) || []),
+};
+if (!builtCss) throw new Error('Astro build emitted no CSS assets to audit');
+// Captured from origin/main after its Astro build. This catches a value that is
+// silently changed to a nearby token: source token checks cannot see that drift.
+const baselineValues = JSON.parse(read('.agents/snapshots/built-css-values.json'));
+
 for (const page of pages) {
   const html = read(page);
   if (!html.includes('name="viewport"')) throw new Error(`${page} lacks a viewport declaration`);
   if (html.match(/<(script|link)[^>]+(src|href)="https?:[^\"]+"/i))
     throw new Error(`${page} has an external runtime dependency`);
 }
-const shared = read('chapters.css');
-const skills = read('skills/styles.css');
-const guide = read('full-guide/index.html');
-const guideAudit = read('full-guide/audit.css');
-for (const token of ['@media(max-width:800px)', '@media(max-width:520px)'])
-  if (!shared.includes(token)) throw new Error(`shared chapter CSS lacks ${token}`);
-for (const token of [
-  'minmax(0,1.3fr)',
-  'overflow-wrap:anywhere',
-  '@media(max-width:800px)',
-  'prefers-reduced-motion',
-])
-  if (!skills.includes(token)) throw new Error(`skills package CSS lacks ${token}`);
-if (!guide.includes('href="audit.css"'))
-  throw new Error('full guide does not load its responsive audit overrides');
-for (const token of ['.handoff table', '.route-table button', 'overflow-wrap:anywhere'])
-  if (!guideAudit.includes(token)) throw new Error(`full guide audit CSS lacks ${token}`);
+for (const file of walk('dist').filter((path) => path.endsWith('.css'))) {
+  const css = readFileSync(file, 'utf8').replace(/\/\*[\s\S]*?\*\//g, '');
+  if (/@import|src:\s*url\(['"]?https?:|url\(['"]?https?:/i.test(css))
+    throw new Error(`${file} has an external CSS dependency`);
+}
+for (const [kind, values] of Object.entries(baselineValues)) {
+  const missing = values.filter((value) => !builtValues[kind].has(value));
+  if (missing.length) throw new Error(`built CSS lost ${kind}: ${missing.join(', ')}`);
+}
+// Legacy fixtures still ship directly. Resolve every var() from the stylesheets
+// that page actually links; Astro's tokens cannot mask a broken standalone page.
+for (const page of pages) {
+  const html = read(page);
+  const linked = [...html.matchAll(/<link[^>]+rel="stylesheet"[^>]+href="([^"]+)"/gi)].map(
+    ([, href]) => href,
+  );
+  const styles = linked
+    .filter((href) => !/^https?:/i.test(href))
+    .map((href) => read(join(dirname(page), href)));
+  const defined = new Set(styles.flatMap((css) => [...definitions(css)]));
+  const unresolved = new Set(
+    styles.flatMap((css) =>
+      [...uses(css)].filter((name) => name !== '--score' && !defined.has(name)),
+    ),
+  );
+  if (unresolved.size)
+    throw new Error(`${page} has unresolved CSS variables: ${[...unresolved].join(', ')}`);
+}
 console.log('responsive UI audit passed');

scripts/verify.mjs

@@ -1,91 +1,455 @@
-import { readFileSync } from 'node:fs';
+import { readFileSync, readdirSync } from 'node:fs';
+
 const read = (path) => readFileSync(new URL(`../${path}`, import.meta.url), 'utf8');
-const landingHtml = read('index.html');
-const html = read('full-guide/index.html');
-const js = read('app.js');
-const refs = read('docs/references/README.md');
-const additional = read('docs/references/additional-reading.md');
-const starterHtml = read('hands-on/starter/index.html');
-const starterJs = read('hands-on/starter/app.js');
-const skillSources = read('docs/references/skill-sources.md');
-const modelRouting = read('docs/references/model-routing.md');
-const rulesHtml = read('rules/index.html');
-const rulesJs = read('rules/app.js');
-const rulesCss = read('rules/styles.css');
-const reviewHtml = read('skills-review/index.html');
-const reviewJs = read('skills-review/app.js');
-const reviewFiles = read('skills-review/files.js');
-const reviewLensCss = read('skills-review/change-lens.css');
-const chaptersCss = read('chapters.css');
-const summaryHtml = read('summary/index.html');
-const modelsHtml = read('models/index.html');
-const agentsHtml = read('agents/index.html');
-const skillsHtml = read('skills/index.html');
-const reviewCatalog = read('skills-review/catalog.js');
-const reviewVoteJs = read('skills-review/vote.js');
-const voteService = read('vote-service/main.go');
-for (const url of ['https://code.claude.com/docs/en/sub-agents','https://code.claude.com/docs/en/skills','https://code.claude.com/docs/en/worktrees','https://git-scm.com/docs/git-worktree.html','https://developers.openai.com/codex/skills']) if (!refs.includes(url)) throw new Error(`missing reference ${url}`);
-console.log('content verification passed');
-for (const token of ['data-phase="plan"','data-phase="build"','data-phase="review"','data-tree="main"','data-tree="ui"','data-worker="ui"','data-route="plan"','data-model-provider="openai"','data-model-provider="claude"','data-model-provider="gemini"','data-effort="low"','data-effort="medium"','data-effort="high"','data-skill-file="skill"','data-skill-step="observe"','data-skill-step="validate"','data-common-skill="ponytail"','data-common-skill="caveman"','data-common-skill="unlazy"','id="hands-on"','data-copy-target="prompt-install-skills"','data-copy-target="prompt-basic"','data-copy-target="prompt-skills"','hands-on/starter/','additional-reading.md','role="tablist"','<table']) if (!html.includes(token)) throw new Error(`missing content ${token}`);
-for (const token of ['const phases','const handsOnPrompts','const modelGuide','const skillSources','const skillInstallPrompts','addEventListener','render(\'plan\')','renderTree','renderWorker','renderRoute','renderModelProvider','renderEffort','renderSkillFile','renderSkillWorkflow','renderCommonSkill','renderHandsOn','copyPrompt']) if (!js.includes(token)) throw new Error(`missing interaction ${token}`);
-for (const token of ['id="task-list"','id="task-count"']) if (!starterHtml.includes(token)) throw new Error(`missing starter content ${token}`);
-for (const token of ['const tasks','renderTasks()']) if (!starterJs.includes(token)) throw new Error(`missing starter behavior ${token}`);
-for (const token of ['medium.com','anthropic.com/engineering','openai.com/business','git-scm.com/docs/git-worktree']) if (!additional.includes(token)) throw new Error(`missing additional source ${token}`);
-if ((additional.match(/^### \d+\./gm) || []).length < 5) throw new Error('fewer than five additional readings');
-for (const token of ['e7b42dc2d384a702240dea4d52a7bf5530b821b6','6654f6b60cd9d5be8b54c6fafe44346dabeb3b76','53048666b05b4799081517d00e09e0a2dd688678']) if (!skillSources.includes(token) || !js.includes(token)) throw new Error(`missing pinned skill source ${token}`);
-for (const token of ['developers.openai.com/api/docs/guides/latest-model','docs.anthropic.com/en/docs/claude-code/model-config','ai.google.dev/gemini-api/docs/thinking']) if (!modelRouting.includes(token) || !js.includes(token)) throw new Error(`missing model source ${token}`);
-console.log('interaction verification passed');
-if (html.match(/<(script|link)[^>]+(src|href)="https?:[^"]+"/i)) throw new Error('external runtime dependency found');
-console.log('standalone verification passed');
-for (const token of ['id="pipeline"','id="skills"','id="examples"','data-stage="context"','data-stage="cli"','data-stage="commit"','data-stage="review"','gate-discipline','parallel-agents','repo-db','tech-debt','skill-writer','scripts/check-ui-contract.mjs','.husky/pre-commit','.pr-review.json','.agents/skills','netcracker/interview']) if (!rulesHtml.includes(token)) throw new Error(`missing rules content ${token}`);
-console.log('rules content verification passed');
-for (const token of ['const languageCopy','const stages','const skills','const prompts','renderStage','renderSkill','renderLanguage','copyPrompt','addEventListener']) if (!rulesJs.includes(token)) throw new Error(`missing rules interaction ${token}`);
-for (const token of ['data-lang="en"','data-lang="pt"','data-copy-prompt','aria-live="polite"','role="tablist"']) if (!rulesHtml.includes(token)) throw new Error(`missing rules control ${token}`);
-console.log('rules interaction verification passed');
-if (!html.includes('href="../rules/"')) throw new Error('main presentation does not link to rules page');
-if (!html.includes('href="../skills-review/"')) throw new Error('main presentation does not link to skills review page');
-for (const token of ['../summary/','../models/','../agents/','../skills/','chapter-route']) if (!html.includes(token)) throw new Error(`main presentation missing chapter route ${token}`);
-if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http')) throw new Error('rules page has an external runtime dependency');
-for (const token of ['@media(min-width:2200px)','@media(max-width:900px)','@media(max-width:600px)','prefers-reduced-motion']) if (!rulesCss.includes(token)) throw new Error(`missing rules responsive contract ${token}`);
-console.log('rules standalone verification passed');
-for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','Preview Markdown','styles.css?v=20260904-vote-widget','change-lens.css?v=20260904-vote-widget','app.js?v=20260904-vote-widget','?author=Name&amp;skill=skill-id&amp;view=improved','SKILLS_REVIEW_VOTE_API']) if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`);
-for (const token of ["from './catalog.js'", "from './files.js'",'function renderList','function renderDetail','selectSkill','packageSummary','markdownHeadings','markdownToc','document.addEventListener(\'keydown\'','loadSelectedFile','schedulePackageSearch','fetchSource','packageSearchText','diffMarkup','diffRows','data-diff','searchParams.set(\'compare\'','markdownMarkup','data-render','preview-markdown','Preview Markdown','View source','FILE PREVIEW','searchParams.set(\'render\'','AUTHOR ·','SKILL ·','function selectFromUrl','function syncUrl','URLSearchParams','navigator.clipboard','document.execCommand','download','data-file','searchParams.set(\'file\'']) if (!reviewJs.includes(token)) throw new Error(`missing review interaction ${token}`);
-for (const token of ['ndo-repro','gfiber-logging','confluence-page','diagram-plantuml','page-reviewer','unslop','spanish-naturalizer','draft-mr','semantic-diff-review','reference.md','files =']) if (!`${reviewFiles}\n${read('skills-review/submitted-files.js')}`.includes(token)) throw new Error(`missing review file manifest ${token}`);
-if ((reviewCatalog.match(/id:'/g) || []).length + (read('skills-review/submitted-catalog.js').match(/id:'/g) || []).length !== 24) throw new Error('review catalog does not cover all submissions');
-if (!reviewCatalog.includes('hardcoded password') || !reviewCatalog.includes('safety-redacted') || !reviewJs.includes('[REDACTED]') || !reviewJs.includes('[REDACTED LOCAL USER]') || !reviewJs.includes('[REDACTED USER]')) throw new Error('review catalog does not record secret safety handling');
-console.log('skills review verification passed');
-for (const page of [summaryHtml, modelsHtml, agentsHtml, skillsHtml]) if (!page.includes('../chapters.css') || !page.includes('ROUTE MAP')) throw new Error('chapter page missing shared navigation');
-for (const token of ['--ink','@media(max-width:800px)','@media(max-width:520px)']) if (!chaptersCss.includes(token)) throw new Error(`missing chapter responsive contract ${token}`);
-console.log('chapter route verification passed');
-for (const token of ['The short route','full-guide/','models/','agents/','skills/','rules/','hands-on/starter/','skills-review/']) if (!landingHtml.includes(token)) throw new Error(`landing page missing ${token}`);
-if (landingHtml.includes('app.js')) throw new Error('landing page should remain a fast, static route map');
-console.log('landing route verification passed');
-for (const token of ['data-package-file="skill"','data-package-file="references"','data-package-file="scripts"','data-package-file="assets"','id="package-preview"','script src="app.js"']) if (!skillsHtml.includes(token)) throw new Error(`skills anatomy missing ${token}`);
-const skillsApp = read('skills/app.js');
-const skillsCss = read('skills/styles.css');
-for (const token of ['const packageFiles','function renderPackage','addEventListener','renderPackage(\'skill\')']) if (!skillsApp.includes(token)) throw new Error(`skills anatomy interaction missing ${token}`);
-for (const token of ['grid-template-columns:minmax(190px','overflow-wrap:anywhere','@media(max-width:800px)','prefers-reduced-motion']) if (!skillsCss.includes(token)) throw new Error(`skills anatomy responsive contract missing ${token}`);
-console.log('skills anatomy verification passed');
-console.log('presentation verification passed');
-const legacyName = String.fromCharCode(80,101,100,114,111,32,65,114,97,110,104,97);
-const legacyHandle = legacyName.toLowerCase().replace(' ', '.');
-for (const path of ['submitted-skills/Anonymous Operational Submission/skills/ndo-repro/SKILL.md','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/envs.tsv','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/lib/env.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-api.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-ship.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/bom-Dockerfile_local.example','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/dockerfile-local.md','skill-reviews/improved/ndo-repro/SKILL.md']) {
-  const source = read(path);
-  if (new RegExp(`${legacyName}|${legacyHandle}|https?:\\/\\/|git\\.netcracker\\.com|artifactorycn|managed\\.netcracker\\.cloud`, 'i').test(source)) throw new Error(`operational submission privacy leak in ${path}`);
-}
-for (const source of [reviewCatalog, reviewFiles, reviewJs]) if (source.includes(legacyName) || source.includes(legacyName.replace(' ', '%20'))) throw new Error('operational submission identity remains in review desk source');
-if (!reviewFiles.includes('Anonymous%20Operational%20Submission') || !reviewJs.includes("entry.id === 'ndo-repro'")) throw new Error('operational submission redaction contract missing');
-console.log('review privacy verification passed');
-for (const token of ['currentContent','unchangedDraft','state.preview = button.dataset.preview','state.file = available.find','loadSelectedFile']) if (!reviewJs.includes(token)) throw new Error(`review file-mode contract missing ${token}`);
-if (reviewJs.includes("state.preview = 'original'; syncUrl(); renderDetail(); loadSelectedFile();")) throw new Error('file selection still resets improved mode');
-console.log('review file-mode verification passed');
-for (const token of ['const changeRows','function lensMarkup','data-lens','CHANGE LENS','What changed — and why.']) if (!reviewJs.includes(token)) throw new Error(`review change-lens contract missing ${token}`);
-for (const token of ['.change-lens','.change-rows','.skill-diff','.diff-lines','@media(max-width:620px)','prefers-reduced-motion']) if (!reviewLensCss.includes(token)) throw new Error(`review change-lens CSS missing ${token}`);
-console.log('review change-lens verification passed');
-for (const token of ['.markdown-preview','max-height:540px','.markdown-table-wrap','.markdown-frontmatter','.markdown-toc','.preview-title','.preview-markdown','grid-template-columns:minmax(0,1fr)','height:120px','-webkit-line-clamp:2']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review markdown preview contract missing ${token}`);
-console.log('review markdown preview verification passed');
-for (const token of ["from './vote.js'","renderVoteWidget($('#vote-widget'"]) if (!reviewJs.includes(token)) throw new Error(`review vote widget wiring missing ${token}`);
-for (const token of ['id="vote-widget"','function renderVoteWidget','X-Voter-Id','/api/votes','Voting is offline']) if (!reviewVoteJs.includes(token) && !reviewJs.includes(token)) throw new Error(`review vote widget contract missing ${token}`);
-for (const token of ['.vote-widget','.vote-buttons','[aria-pressed="true"]']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review vote widget CSS missing ${token}`);
-if (!voteService.includes('X-Forwarded-For') || !voteService.includes('one active vote per skill') && !voteService.includes('at most one active vote')) throw new Error('vote-service missing IP-based one-vote-per-source contract');
-console.log('review vote widget verification passed');
+const built = (path) => read(`dist/${path}`);
+const rendered = (value) =>
+  value
+    .replace(/<script[\s\S]*?<\/script>/gi, '')
+    .replace(/<style[\s\S]*?<\/style>/gi, '')
+    .replace(/<!--[\s\S]*?-->/g, '')
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(
+      /&(lt|gt|quot|nbsp);/g,
+      (_, entity) => ({ lt: '<', gt: '>', quot: '"', nbsp: ' ' })[entity],
+    )
+    .replace(/&#0?39;/g, "'")
+    .replace(/\s+/g, ' ')
+    .trim();
+const normalize = (value) => value.replace(/\s+/g, ' ').trim();
+
+const html = {
+  landing: built('index.html'),
+  guide: built('full-guide/index.html'),
+  summary: built('summary/index.html'),
+  models: built('models/index.html'),
+  agents: built('agents/index.html'),
+  skills: built('skills/index.html'),
+  rules: built('rules/index.html'),
+  review: built('skills-review/index.html'),
+  starter: built('hands-on/starter/index.html'),
+  labRules: built('hands-on/rules/index.html'),
+};
+const snapshot = (path) => normalize(read(`.agents/snapshots/${path}`));
+const reviewAssetSrc = html.review.match(/src="([^"]+\.[a-zA-Z0-9_-]{8,}\.js)"/)?.[1];
+const reviewAsset = reviewAssetSrc ? read(`dist/_astro/${reviewAssetSrc.split('/').at(-1)}`) : '';
+const builtCss = readdirSync(new URL('../dist/_astro/', import.meta.url))
+  .filter((file) => file.endsWith('.css'))
+  .map((file) => read(`dist/_astro/${file}`))
+  .join('\n');
+const source = {
+  references: read('docs/references/README.md'),
+  additionalReading: read('docs/references/additional-reading.md'),
+  skillSources: read('src/content/skillSources/ponytail.json'),
+  providers: [
+    read('src/content/providers/openai.json'),
+    read('src/content/providers/claude.json'),
+    read('src/content/providers/gemini.json'),
+  ].join('\n'),
+  starter: read('hands-on/starter/app.js'),
+  voteService: read('vote-service/main.go'),
+  ndoReview: read('src/content/reviews/ndo-repro.md'),
+};
+
+// Rendered prose catches a deleted paragraph that string-token checks miss.
+if (rendered(html.landing) !== snapshot('index.txt'))
+  throw new Error('landing rendered-text snapshot changed');
+if (rendered(html.guide) !== snapshot('full-guide.txt'))
+  throw new Error('full-guide rendered-text snapshot changed');
+if (rendered(html.summary) !== snapshot('summary.txt'))
+  throw new Error('summary rendered-text snapshot changed');
+if (rendered(html.models) !== snapshot('models.txt'))
+  throw new Error('models rendered-text snapshot changed');
+if (rendered(html.agents) !== snapshot('agents.txt'))
+  throw new Error('agents rendered-text snapshot changed');
+if (rendered(html.skills) !== snapshot('skills.txt'))
+  throw new Error('skills rendered-text snapshot changed');
+if (rendered(html.rules) !== snapshot('rules.txt'))
+  throw new Error('rules rendered-text snapshot changed');
+if (rendered(html.review) !== snapshot('skills-review.txt'))
+  throw new Error('skills-review rendered-text snapshot changed');
+if (rendered(html.starter) !== snapshot('hands-on/starter.txt'))
+  throw new Error('starter rendered-text snapshot changed');
+if (rendered(html.labRules) !== snapshot('hands-on/rules.txt'))
+  throw new Error('rules lab rendered-text snapshot changed');
+
+const braceMatch = (source, open) => {
+  let depth = 0;
+  let quote = '';
+  let escaped = false;
+  for (let index = open; index < source.length; index += 1) {
+    const character = source[index];
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === '\\') escaped = true;
+      else if (character === quote) quote = '';
+      continue;
+    }
+    if (character === "'" || character === '"' || character === '`') quote = character;
+    else if (character === '{') depth += 1;
+    else if (character === '}' && --depth === 0) return index;
+  }
+  throw new Error('could not brace-match legacy Portuguese translations');
+};
+const legacyGuide = read('app.js');
+const translationsStart = legacyGuide.indexOf('const translations =');
+const objectStart = legacyGuide.indexOf('{', translationsStart);
+const objectEnd = braceMatch(legacyGuide, objectStart);
+const translations = Function(`return (${legacyGuide.slice(objectStart, objectEnd + 1)})`)();
+const portuguese = Object.values(translations.pt).map(rendered);
+if (portuguese.length !== 102)
+  throw new Error('full-guide Portuguese source no longer has 102 translated strings');
+if (!portuguese.every((value) => rendered(html.guide).includes(value)))
+  throw new Error('built full-guide lost a Portuguese translation');
+
+const has = (page, tokens) => tokens.every((token) => page.includes(token));
+if (!has(html.guide, ['data-phase="plan"', 'data-phase="build"', 'data-phase="review"']))
+  throw new Error('built full-guide lost its phase selector');
+if (!has(html.guide, ['data-tree="main"', 'data-tree="ui"', 'data-worker="ui"']))
+  throw new Error('built full-guide lost its worker or worktree selector');
+if (
+  !has(html.guide, [
+    'data-route="plan"',
+    'data-model-provider="openai"',
+    'data-model-provider="claude"',
+    'data-model-provider="gemini"',
+  ])
+)
+  throw new Error('built full-guide lost its model-routing controls');
+if (!has(html.guide, ['data-effort="low"', 'data-effort="medium"', 'data-effort="high"']))
+  throw new Error('built full-guide lost its reasoning-effort controls');
+if (
+  !has(html.guide, [
+    'data-skill-file="skill"',
+    'data-skill-step="observe"',
+    'data-skill-step="validate"',
+  ])
+)
+  throw new Error('built full-guide lost its skill anatomy controls');
+if (
+  !has(html.guide, [
+    'data-common-skill="ponytail"',
+    'data-common-skill="caveman"',
+    'data-common-skill="unlazy"',
+  ])
+)
+  throw new Error('built full-guide lost its common-skill controls');
+if (
+  !has(html.guide, [
+    'id="hands-on"',
+    'data-copy-target="prompt-install-skills"',
+    'data-copy-target="prompt-basic"',
+    'data-copy-target="prompt-skills"',
+  ])
+)
+  throw new Error('built full-guide lost its hands-on prompts');
+if (!has(html.guide, ['hands-on/starter/', 'additional-reading.md', 'role="tablist"', '<table']))
+  throw new Error('built full-guide lost its guide navigation or semantics');
+if (!html.guide.includes('<script type="module">'))
+  throw new Error('built full-guide lost its interaction module');
+
+if (
+  !has(html.rules, [
+    'id="pipeline"',
+    'id="skills"',
+    'id="examples"',
+    'data-stage="context"',
+    'data-stage="cli"',
+    'data-stage="commit"',
+    'data-stage="review"',
+  ])
+)
+  throw new Error('built rules page lost its enforcement pipeline');
+if (
+  !has(html.rules, [
+    'gate-discipline',
+    'parallel-agents',
+    'repo-db',
+    'tech-debt',
+    'skill-writer',
+    'scripts/check-ui-contract.mjs',
+    '.husky/pre-commit',
+    '.pr-review.json',
+    '.agents/skills',
+    'netcracker/interview',
+  ])
+)
+  throw new Error('built rules page lost its case-study content');
+if (
+  !has(html.rules, [
+    'data-lang="en"',
+    'data-lang="pt"',
+    'data-copy-prompt',
+    'aria-live="polite"',
+    'role="tablist"',
+  ])
+)
+  throw new Error('built rules page lost its accessible controls');
+if (!html.rules.includes('data-rules-copy') || !html.rules.includes('"pt"'))
+  throw new Error('built rules page lost its Portuguese interaction data');
+
+if (
+  !has(html.review, [
+    'id="catalog"',
+    'id="skill-filter"',
+    'id="skill-list"',
+    'id="detail"',
+    'Preview Markdown',
+    '?author=Name&amp;skill=skill-id&amp;view=improved',
+    'SKILLS_REVIEW_VOTE_API',
+  ])
+)
+  throw new Error('built review desk lost its catalog or deep-link contract');
+if (
+  !has(html.review, [
+    'ndo-repro',
+    'gfiber-logging',
+    'confluence-page',
+    'diagram-plantuml',
+    'page-reviewer',
+    'unslop',
+    'spanish-naturalizer',
+    'draft-mr',
+    'semantic-diff-review',
+  ])
+)
+  throw new Error('built review desk lost submitted-skill coverage');
+if (
+  !html.review.includes('Anonymous%20Operational%20Submission') ||
+  !has(reviewAsset, ['[REDACTED]', '[REDACTED LOCAL USER]', '[REDACTED USER]'])
+)
+  throw new Error('built review desk lost operational-submission privacy redactions');
+if (!reviewAssetSrc) throw new Error('built review desk does not load its hashed island asset');
+
+if (
+  ![html.summary, html.models, html.agents, html.skills].every((page) => page.includes('ROUTE MAP'))
+)
+  throw new Error('built chapter pages lost shared navigation');
+if (
+  !has(html.landing, [
+    'The short route',
+    'full-guide/',
+    'models/',
+    'agents/',
+    'skills/',
+    'rules/',
+    'hands-on/starter/',
+    'skills-review/',
+  ])
+)
+  throw new Error('built landing page lost a route-map destination');
+if (/<script\b/i.test(html.landing))
+  throw new Error('built landing page is no longer a static route map');
+if (
+  !has(html.skills, [
+    'data-skill-file="skill"',
+    'data-skill-file="references"',
+    'data-skill-file="scripts"',
+    'data-skill-file="assets"',
+    'id="package-preview"',
+  ])
+)
+  throw new Error('built skills page lost its package explorer');
+if (!has(html.starter, ['id="task-list"', 'id="task-count"']))
+  throw new Error('starter lab lost its task-list contract');
+
+const allPages = Object.entries(html);
+if (!allPages.every(([, page]) => page.includes('name="viewport"')))
+  throw new Error('a built route lacks a viewport declaration');
+if (allPages.some(([, page]) => /<(script|link)[^>]+(src|href)="https?:[^\"]+"/i.test(page)))
+  throw new Error('a built route has an external runtime dependency');
+if (
+  !read('package.json').includes(
+    '"verify": "node scripts/verify.mjs && node scripts/audit-ui.mjs && node .agents/scripts/check-tokens.mjs"',
+  )
+)
+  throw new Error('pnpm verify no longer runs audit-ui and check-tokens');
+if (!read('.agents/scripts/gate.sh').includes('pnpm run verify'))
+  throw new Error('the gate no longer runs the output contract');
+if (!read('docs/references/README.md').includes('https://developers.openai.com/codex/skills'))
+  throw new Error('primary reference list lost Codex skills');
+if ((read('docs/references/additional-reading.md').match(/^### \d+\./gm) || []).length < 5)
+  throw new Error('additional reading list has fewer than five entries');
+if (
+  /Pedro\s+Aranha|pedro\.aranha|git\.netcracker\.com|artifactorycn|managed\.netcracker\.cloud/i.test(
+    read('src/content/reviews/ndo-repro.md'),
+  )
+)
+  throw new Error('operational review content has a privacy leak');
+
+// These retain the pre-Astro contract one fact at a time. Visible facts read
+// from dist; source-only contracts remain at their authoritative boundary.
+if (
+  ![
+    'https://code.claude.com/docs/en/sub-agents',
+    'https://code.claude.com/docs/en/skills',
+    'https://code.claude.com/docs/en/worktrees',
+    'https://git-scm.com/docs/git-worktree.html',
+    'https://developers.openai.com/codex/skills',
+  ].every((url) => source.references.includes(url))
+)
+  throw new Error('missing reference contract');
+if (!has(html.guide, ['data-phase="plan"', 'data-copy-target="prompt-basic"']))
+  throw new Error('missing full-guide content contract');
+if (!has(html.guide, ['data-route="plan"', 'data-skill-file="skill"', '<script type="module">']))
+  throw new Error('missing full-guide interaction contract');
+if (!has(html.starter, ['id="task-list"', 'id="task-count"']))
+  throw new Error('missing starter content contract');
+if (!['const tasks', 'renderTasks()'].every((token) => source.starter.includes(token)))
+  throw new Error('missing starter behavior contract');
+if (
+  ![
+    'medium.com',
+    'anthropic.com/engineering',
+    'openai.com/business',
+    'git-scm.com/docs/git-worktree',
+  ].every((url) => source.additionalReading.includes(url))
+)
+  throw new Error('missing additional-reading source contract');
+if ((source.additionalReading.match(/^### \d+\./gm) || []).length < 5)
+  throw new Error('additional-reading coverage fell below five entries');
+if (
+  ![
+    'e7b42dc2d384a702240dea4d52a7bf5530b821b6',
+    '6654f6b60cd9d5be8b54c6fafe44346dabeb3b76',
+    '53048666b05b4799081517d00e09e0a2dd688678',
+  ].every((sha) => `${source.skillSources}\n${html.guide}`.includes(sha))
+)
+  throw new Error('missing pinned skill-source contract');
+if (
+  ![
+    'developers.openai.com/api/docs/guides/latest-model',
+    'docs.anthropic.com/en/docs/claude-code/model-config',
+    'ai.google.dev/gemini-api/docs/thinking',
+  ].every((url) => `${source.providers}\n${html.guide}`.includes(url))
+)
+  throw new Error('missing model-source contract');
+if (/<(script|link)[^>]+(src|href)="https?:[^\"]+"/i.test(html.guide))
+  throw new Error('full-guide has an external runtime dependency');
+if (!has(html.rules, ['id="pipeline"', 'id="skills"', 'id="examples"']))
+  throw new Error('missing rules content contract');
+if (!has(html.rules, ['data-stage="context"', 'data-copy-prompt', '<script>']))
+  throw new Error('missing rules interaction contract');
+if (!has(html.rules, ['data-lang="en"', 'data-lang="pt"', 'aria-live="polite"']))
+  throw new Error('missing rules-control contract');
+if (!html.guide.includes('href="/ai-for-dummies/rules/"'))
+  throw new Error('full-guide no longer links to rules');
+if (!html.guide.includes('href="/ai-for-dummies/skills-review/"'))
+  throw new Error('full-guide no longer links to skills review');
+if (!['summary/', 'models/', 'agents/', 'skills/'].every((route) => html.guide.includes(route)))
+  throw new Error('full-guide is missing a chapter route');
+if (/<(script|link)[^>]+(src|href)="https?:[^\"]+"/i.test(html.rules))
+  throw new Error('rules page has an external runtime dependency');
+if (
+  !['@media(max-width:800px)', '@media(min-width:2200px)', 'prefers-reduced-motion'].every(
+    (token) => builtCss.includes(token),
+  )
+)
+  throw new Error('missing rules responsive contract');
+if (!has(html.review, ['id="catalog"', 'id="skill-filter"', 'id="skill-list"', 'id="detail"']))
+  throw new Error('missing review page-content contract');
+if (
+  !['data-render', 'preview-markdown', 'data-file', 'URLSearchParams', 'navigator.clipboard'].every(
+    (token) => reviewAsset.includes(token),
+  )
+)
+  throw new Error('missing review interaction contract');
+if (
+  !['reference.md', 'ndo-repro', 'semantic-diff-review'].every((token) =>
+    html.review.includes(token),
+  )
+)
+  throw new Error('missing review file-manifest contract');
+// The desk renders its cards from an inline JSON payload, so `data-skill-id`
+// only exists after the island runs. Count the entries in the payload instead.
+if ((html.review.match(/\\"id\\":/g) || []).length !== 24)
+  throw new Error('review catalog no longer covers all submissions');
+if (!source.ndoReview.includes('safety-redacted') || !reviewAsset.includes('[REDACTED]'))
+  throw new Error('review catalog lost its secret-safety contract');
+if (
+  ![html.summary, html.models, html.agents, html.skills].every((page) => page.includes('ROUTE MAP'))
+)
+  throw new Error('chapter page missing shared navigation');
+if (
+  !['@media(max-width:800px)', '@media(max-width:520px)', '--ink'].every((token) =>
+    builtCss.includes(token),
+  )
+)
+  throw new Error('missing chapter responsive contract');
+if (!has(html.landing, ['The short route', 'full-guide/', 'skills-review/']))
+  throw new Error('landing page missing a route-map destination');
+if (/<script\b/i.test(html.landing))
+  throw new Error('landing page is no longer a static route map');
+if (
+  !has(html.skills, [
+    'data-skill-file="skill"',
+    'data-skill-file="references"',
+    'id="package-preview"',
+  ])
+)
+  throw new Error('skills anatomy missing package contract');
+if (!html.skills.includes('<script>'))
+  throw new Error('skills anatomy lost its interaction module');
+if (
+  !['overflow-wrap:anywhere', '@media(max-width:800px)', 'prefers-reduced-motion'].every((token) =>
+    builtCss.includes(token),
+  )
+)
+  throw new Error('skills anatomy lost responsive contract');
+if (
+  /Pedro\s+Aranha|pedro\.aranha|git\.netcracker\.com|artifactorycn|managed\.netcracker\.cloud/i.test(
+    source.ndoReview,
+  )
+)
+  throw new Error('operational submission privacy leak');
+if (html.review.includes('Pedro%20Aranha') || html.review.includes('pedro.aranha'))
+  throw new Error('operational submission identity remains in review output');
+if (
+  !html.review.includes('Anonymous%20Operational%20Submission') ||
+  !reviewAsset.includes('[REDACTED LOCAL USER]')
+)
+  throw new Error('operational submission redaction contract missing');
+if (!['dataset.preview', 'dataset.file'].every((token) => reviewAsset.includes(token)))
+  throw new Error('review file-mode contract missing');
+if (!reviewAsset.includes('preview-markdown'))
+  throw new Error('review file selection no longer preserves preview mode');
+if (!['data-lens', 'CHANGE LENS', 'What changed'].every((token) => reviewAsset.includes(token)))
+  throw new Error('review change-lens contract missing');
+if (
+  !['.change-lens', '.change-rows', '.skill-diff', '@media(max-width:620px)'].every((token) =>
+    builtCss.includes(token),
+  )
+)
+  throw new Error('review change-lens CSS contract missing');
+if (
+  !['.markdown-preview', 'max-height:540px', '.markdown-table-wrap', '.markdown-toc'].every(
+    (token) => builtCss.includes(token),
+  )
+)
+  throw new Error('review markdown-preview contract missing');
+if (
+  !html.review.includes(
+    'src="/ai-for-dummies/_astro/skills-review.astro_astro_type_script_index_0_lang.',
+  )
+)
+  throw new Error('review vote-widget island is not wired to a hashed asset');
+if (
+  !['id="vote-widget"', 'X-Voter-Id', '/api/votes', 'Voting is offline'].every((token) =>
+    `${html.review}\n${reviewAsset}`.includes(token),
+  )
+)
+  throw new Error('review vote-widget contract missing');
+// The CSS minifier drops the attribute value's quotes, so the built sheet
+// carries `[aria-pressed=true]`. Match either form.
+if (
+  !['.vote-widget', '.vote-buttons'].every((token) => builtCss.includes(token)) ||
+  !/\[aria-pressed=["']?true["']?\]/.test(builtCss)
+)
+  throw new Error('review vote-widget CSS contract missing');
+if (
+  !source.voteService.includes('X-Forwarded-For') ||
+  !source.voteService.includes('one active vote per skill')
+)
+  throw new Error('vote-service missing IP-based one-vote-per-source contract');
+
+console.log('built output verification passed');

src/components/blocks/ChangeLens.astro

@@ -137,17 +137,16 @@ const isDiff = mode === 'diff';
   .skill-diff {
     border: 1px solid var(--ink);
     color: var(--paper);
-    animation: lens-enter 0.28s ease both;
+    /* purpose: change lens reveal (state change) */
+    animation: lens-enter 200ms cubic-bezier(0.2, 0, 0, 1) both;
   }
 
   .change-lens {
-    /* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */
-    background: #123042;
+    background: var(--ink);
   }
 
   .skill-diff {
-    /* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */
-    background: #102b3a;
+    background: var(--deep);
   }
 
   .change-lens > header,
@@ -157,8 +156,7 @@ const isDiff = mode === 'diff';
     gap: 20px;
     align-items: start;
     padding: 22px 24px;
-    /* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */
-    border-bottom: 1px solid #466274;
+    border-bottom: 1px solid var(--line);
   }
 
   .change-lens span,
@@ -184,8 +182,7 @@ const isDiff = mode === 'diff';
     padding: 9px 11px;
     color: var(--paper);
     background: transparent;
-    /* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #557080;
+    border: 1px solid var(--line);
     cursor: pointer;
     font:
       700 10px ui-monospace,
@@ -203,8 +200,7 @@ const isDiff = mode === 'diff';
   .skill-diff > p {
     margin: 0;
     padding: 17px 24px;
-    /* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */
-    color: #c6d2d7;
+    color: var(--muted);
   }
 
   /* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -212,24 +208,21 @@ const isDiff = mode === 'diff';
   .change-rows {
     display: grid;
     gap: 1px;
-    /* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */
-    background: #466274;
+    background: var(--line);
   }
 
   .change-rows article {
     display: grid;
     grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
     gap: 1px;
-    /* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */
-    background: #466274;
+    background: var(--line);
   }
 
   .change-rows article > * {
     min-width: 0;
     margin: 0;
     padding: 17px;
-    /* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */
-    background: #173b4f;
+    background: var(--deep);
   }
 
   .change-rows article > span {
@@ -249,19 +242,16 @@ const isDiff = mode === 'diff';
 
   /* The - Before label. */
   .change-rows div:first-of-type b {
-    /* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */
-    color: #e89a8e;
+    color: var(--red);
   }
 
   /* The + After label. */
   .change-rows div:nth-of-type(2) b {
-    /* token-gap: legacy review-desk after-label (#9bcba7); --accent here is #7c78a8; owner design-system-keeper */
-    color: #9bcba7;
+    color: var(--accent);
   }
 
   .change-rows aside {
-    /* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */
-    background: #1d455b;
+    background: var(--deep);
   }
 
   .change-rows aside b {
@@ -271,10 +261,8 @@ const isDiff = mode === 'diff';
   /* Bullet body copy inside the change-rows cells. */
   .change-rows p {
     margin: 7px 0 0;
-    /* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #d4dfe3;
-    /* token-gap: no --step-* covers 12px; owner design-system-keeper */
-    font-size: 12px;
+    color: var(--paper);
+    font-size: var(--step-12);
     line-height: 1.55;
   }
 
@@ -283,8 +271,7 @@ const isDiff = mode === 'diff';
   .diff-lines {
     max-height: 540px;
     overflow: auto;
-    /* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */
-    border-top: 1px solid #466274;
+    border-top: 1px solid var(--line);
     font:
       12px / 1.55 ui-monospace,
       monospace;
@@ -302,34 +289,27 @@ const isDiff = mode === 'diff';
 
   /* Line numbers in the gutter. */
   .diff-lines span {
-    /* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */
-    color: #91aab7;
+    color: var(--muted);
   }
 
   /* Added lines: a soft green pair signals "new" against the dark surface. */
   .diff-lines .added {
-    /* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #d5f1d6;
-    /* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
-    background: #1a4b42;
+    color: var(--paper);
+    background: var(--deep);
   }
 
   .diff-lines .added span {
-    /* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */
-    color: #a9e3ae;
+    color: var(--accent);
   }
 
   /* Removed lines: a warm red pair, opposite side of the diff. */
   .diff-lines .removed {
-    /* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #ffd7d0;
-    /* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
-    background: #572f32;
+    color: var(--paper);
+    background: var(--deep);
   }
 
   .diff-lines .removed span {
-    /* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */
-    color: #ffb5a8;
+    color: var(--red);
   }
 
   @keyframes lens-enter {
@@ -343,8 +323,7 @@ const isDiff = mode === 'diff';
     }
   }
 
-  /* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 1000px) {
+  @media (max-width: 1100px) {
     .change-rows article {
       grid-template-columns: 100px 1fr 1fr;
     }
@@ -354,8 +333,7 @@ const isDiff = mode === 'diff';
     }
   }
 
-  /* token-gap: 620px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 620px) {
+  @media (max-width: 560px) {
     .change-lens > header,
     .skill-diff > header {
       display: block;
@@ -389,8 +367,7 @@ const isDiff = mode === 'diff';
     }
 
     .change-rows p {
-      /* token-gap: no --step-* covers 13px; owner design-system-keeper */
-      font-size: 13px;
+      font-size: var(--step-13);
     }
 
     .diff-lines p {

src/components/blocks/FileTabs.astro

@@ -54,10 +54,8 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
     gap: 1px;
     overflow-x: auto;
     padding: 10px 14px;
-    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
-    background: #122534;
-    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border-bottom: 1px solid #486175;
+    background: var(--deep);
+    border-bottom: 1px solid var(--line);
   }
 
   .file-tabs button {
@@ -65,11 +63,9 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
     gap: 1px;
     min-width: max-content;
     padding: 7px 10px;
-    /* token-gap: legacy review-desk muted code (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #d6e1e4;
+    color: var(--paper);
     background: transparent;
-    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
     cursor: pointer;
     text-align: left;
     font:
@@ -78,25 +74,20 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
   }
 
   .file-tabs button span {
-    /* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
-    color: #ebbf58;
-    /* token-gap: no --step-* covers 9px; owner design-system-keeper */
-    font-size: 9px;
+    color: var(--gold);
+    font-size: var(--step-09);
     text-transform: uppercase;
   }
 
   .file-tabs button.active,
   .file-tabs button:hover {
-    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
-    color: #122534;
-    /* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
-    background: #ebbf58;
+    color: var(--deep);
+    background: var(--gold);
   }
 
   .file-tabs button.active span,
   .file-tabs button:hover span {
-    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
-    color: #122534;
+    color: var(--deep);
   }
 
   .file-tabs button:focus-visible {

src/components/blocks/FleetDiagram.astro

@@ -9,22 +9,24 @@
 // hairlines between worker cards; the parent background is an off-token seam
 // colour marked inline with `token-gap`.
 
+type Localized = { en: string; pt: string };
+
 interface Worker {
   /** Used as the `data-worker` hook and the key in the source. */
   id: string;
   /** Short label rendered uppercase, e.g. "UI". */
-  label: string;
+  label: string | Localized;
   /** Body copy describing the worker's remit. */
-  strong: string;
+  strong: string | Localized;
   /** Path label, e.g. "agent/ui". */
   code: string;
 }
 
 interface Props {
   orchestrator: {
-    eyebrow: string;
+    eyebrow: string | Localized;
     /** May contain inline `<br>`; rendered with `set:html`. */
-    title: string;
+    title: string | Localized;
     code: string;
   };
   workers: Worker[];
@@ -36,8 +38,32 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
 
 <div class="fleet-grid">
   <article class="captain">
-    <span class="captain-eyebrow">{orchestrator.eyebrow}</span>
-    <h2 set:html={orchestrator.title} />
+    <span class="captain-eyebrow">
+      {
+        typeof orchestrator.eyebrow === 'string' ? (
+          orchestrator.eyebrow
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{orchestrator.eyebrow.en}</span>
+              <span data-language-content="pt" hidden>
+                {orchestrator.eyebrow.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </span>
+    {
+      typeof orchestrator.title === 'string' ? (
+        <h2 set:html={orchestrator.title} />
+      ) : (
+        <>
+          <h2 data-language-content="en" set:html={orchestrator.title.en} />
+          <h2 data-language-content="pt" hidden set:html={orchestrator.title.pt} />
+        </>
+      )
+    }
     <code>{orchestrator.code}</code>
   </article>
   <div class="arrow" aria-hidden="true">→</div>
@@ -49,8 +75,30 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
           data-worker={worker.id}
           aria-pressed={worker.id === initial}
         >
-          <span>{worker.label}</span>
-          <strong>{worker.strong}</strong>
+          <span>
+            {typeof worker.label === 'string' ? (
+              worker.label
+            ) : (
+              <>
+                <span data-language-content="en">{worker.label.en}</span>
+                <span data-language-content="pt" hidden>
+                  {worker.label.pt}
+                </span>
+              </>
+            )}
+          </span>
+          <strong>
+            {typeof worker.strong === 'string' ? (
+              worker.strong
+            ) : (
+              <>
+                <span data-language-content="en">{worker.strong.en}</span>
+                <span data-language-content="pt" hidden>
+                  {worker.strong.pt}
+                </span>
+              </>
+            )}
+          </strong>
           <code>{worker.code}</code>
         </button>
       ))
@@ -100,16 +148,14 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
     display: grid;
     place-items: center;
     color: var(--gold);
-    /* token-gap: source uses 30px; no --step-* covers 30px; owner design-system-keeper */
-    font-size: 30px;
+    font-size: var(--step-30);
   }
 
   .workers {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1px;
-    /* token-gap: source seam colour is #41596b for the gap:1px hairline trick; no token matches; owner design-system-keeper */
-    background: #41596b;
+    background: var(--muted);
   }
   .worker-card {
     display: grid;
@@ -124,8 +170,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
     cursor: pointer;
   }
   .worker-card span {
-    /* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
-    color: #9eabb4;
+    color: var(--muted);
     /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
     font:
       500 10px 'DM Mono',
@@ -134,8 +179,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
     text-transform: uppercase;
   }
   .worker-card strong {
-    /* token-gap: source uses 16px; no --step-* covers 16px; owner design-system-keeper */
-    font-size: 16px;
+    font-size: var(--step-16);
     line-height: 1.2;
   }
   .worker-card code {
@@ -160,4 +204,11 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
       grid-template-columns: 1fr;
     }
   }
+
+  @media (min-width: 1600px) {
+    .worker-card {
+      min-height: 210px;
+      padding: 28px;
+    }
+  }
 </style>

src/components/blocks/HandoffTable.astro

@@ -7,18 +7,20 @@
 // muted body) and lives here so the next page that needs it gets the same
 // beat for free.
 
+type Localized = { en: string; pt: string };
+
 interface Row {
   /** The package name, rendered as a `<th>` (column 1). */
-  package: string;
+  package: string | Localized;
   /** What the package contains (column 2). */
-  contains: string;
+  contains: string | Localized;
   /** Why this matters (column 3). */
-  why: string;
+  why: string | Localized;
 }
 
 interface Props {
   /** Column headers in render order. */
-  columns: [string, string, string];
+  columns: [string | Localized, string | Localized, string | Localized];
   rows: Row[];
 }
 
@@ -28,18 +30,96 @@ const { columns, rows } = Astro.props;
 <table class="handoff-table">
   <thead>
     <tr>
-      <th>{columns[0]}</th>
-      <th>{columns[1]}</th>
-      <th>{columns[2]}</th>
+      <th>
+        {
+          typeof columns[0] === 'string' ? (
+            columns[0]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[0].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[0].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
+      <th>
+        {
+          typeof columns[1] === 'string' ? (
+            columns[1]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[1].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[1].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
+      <th>
+        {
+          typeof columns[2] === 'string' ? (
+            columns[2]
+          ) : (
+            <>
+              <>
+                <span data-language-content="en">{columns[2].en}</span>
+                <span data-language-content="pt" hidden>
+                  {columns[2].pt}
+                </span>
+              </>
+            </>
+          )
+        }
+      </th>
     </tr>
   </thead>
   <tbody>
     {
       rows.map((row) => (
         <tr>
-          <th scope="row">{row.package}</th>
-          <td>{row.contains}</td>
-          <td>{row.why}</td>
+          <th scope="row">
+            {typeof row.package === 'string' ? (
+              row.package
+            ) : (
+              <>
+                <span data-language-content="en">{row.package.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.package.pt}
+                </span>
+              </>
+            )}
+          </th>
+          <td>
+            {typeof row.contains === 'string' ? (
+              row.contains
+            ) : (
+              <>
+                <span data-language-content="en">{row.contains.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.contains.pt}
+                </span>
+              </>
+            )}
+          </td>
+          <td>
+            {typeof row.why === 'string' ? (
+              row.why
+            ) : (
+              <>
+                <span data-language-content="en">{row.why.en}</span>
+                <span data-language-content="pt" hidden>
+                  {row.why.pt}
+                </span>
+              </>
+            )}
+          </td>
         </tr>
       ))
     }
@@ -77,8 +157,7 @@ const { columns, rows } = Astro.props;
   }
   .handoff-table td {
     color: var(--muted);
-    /* token-gap: source uses 13px; no --step-* covers 13px; owner design-system-keeper */
-    font-size: 13px;
+    font-size: var(--step-13);
   }
 
   @media (max-width: 800px) {

src/components/blocks/PhasePanel.astro

@@ -8,18 +8,20 @@
 //
 // Every `data-phase` value is asserted by `scripts/verify.mjs`.
 
+type Localized = { en: string; pt: string };
+
 export type PhaseId = 'plan' | 'build' | 'review';
 
 interface Phase {
   id: PhaseId;
   /** Two-letter label rendered in the tab, e.g. "PLAN". */
-  label: string;
+  label: string | Localized;
   /** Numeric prefix, e.g. "01". */
   number: string;
-  title: string;
-  body: string;
+  title: string | Localized;
+  body: string | Localized;
   /** Headline + small caption shown above the panel title. */
-  meta: { deliverable: string; gate: string };
+  meta: { deliverable: string | Localized; gate: string | Localized };
   /** Code-line evidence shown at the bottom of the panel. */
   evidence: string;
 }
@@ -43,7 +45,17 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
         role="tab"
         aria-selected={phase.id === initial}
       >
-        <b>{phase.number}</b> {phase.label}
+        <b>{phase.number}</b>{' '}
+        {typeof phase.label === 'string' ? (
+          phase.label
+        ) : (
+          <>
+            <span data-language-content="en">{phase.label.en}</span>
+            <span data-language-content="pt" hidden>
+              {phase.label.pt}
+            </span>
+          </>
+        )}
       </button>
     ))
   }
@@ -51,11 +63,71 @@ const active = phases.find((phase) => phase.id === initial) ?? phases[0];
 
 <article class="phase-panel" id="phase-panel" aria-live="polite">
   <div class="phase-meta">
-    <span>{active.meta.deliverable}</span>
-    <small>{active.meta.gate}</small>
+    <span>
+      {
+        typeof active.meta.deliverable === 'string' ? (
+          active.meta.deliverable
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{active.meta.deliverable.en}</span>
+              <span data-language-content="pt" hidden>
+                {active.meta.deliverable.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </span>
+    <small>
+      {
+        typeof active.meta.gate === 'string' ? (
+          active.meta.gate
+        ) : (
+          <>
+            <>
+              <span data-language-content="en">{active.meta.gate.en}</span>
+              <span data-language-content="pt" hidden>
+                {active.meta.gate.pt}
+              </span>
+            </>
+          </>
+        )
+      }
+    </small>
   </div>
-  <h3>{active.title}</h3>
-  <p>{active.body}</p>
+  <h3>
+    {
+      typeof active.title === 'string' ? (
+        active.title
+      ) : (
+        <>
+          <>
+            <span data-language-content="en">{active.title.en}</span>
+            <span data-language-content="pt" hidden>
+              {active.title.pt}
+            </span>
+          </>
+        </>
+      )
+    }
+  </h3>
+  <p>
+    {
+      typeof active.body === 'string' ? (
+        active.body
+      ) : (
+        <>
+          <>
+            <span data-language-content="en">{active.body.en}</span>
+            <span data-language-content="pt" hidden>
+              {active.body.pt}
+            </span>
+          </>
+        </>
+      )
+    }
+  </p>
   <code>{active.evidence}</code>
 </article>
 

src/components/blocks/PreviewPane.astro

@@ -65,8 +65,7 @@ const { title, subtitle, rendered } = Astro.props;
      action bar from the tab strip from the body. */
   .preview {
     border: 1px solid var(--ink);
-    /* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */
-    background: #122534;
+    background: var(--deep);
   }
 
   .preview > header {
@@ -75,8 +74,7 @@ const { title, subtitle, rendered } = Astro.props;
     gap: 20px;
     padding: 14px;
     color: var(--paper);
-    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border-bottom: 1px solid #486175;
+    border-bottom: 1px solid var(--line);
   }
 
   /* Title cluster: eyebrow line + subtitle. */
@@ -95,8 +93,7 @@ const { title, subtitle, rendered } = Astro.props;
 
   /* Subtitle below the eyebrow. */
   .preview-title small {
-    /* token-gap: legacy review-desk subtitle (#c1d1d8); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #c1d1d8;
+    color: var(--paper);
     /* token-gap: no --step-* covers 9px; owner design-system-keeper */
     font:
       9px / 1.35 ui-monospace,
@@ -116,8 +113,7 @@ const { title, subtitle, rendered } = Astro.props;
     padding: 9px 11px;
     color: var(--paper);
     background: transparent;
-    /* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
     cursor: pointer;
     font:
       700 10px ui-monospace,
@@ -125,8 +121,7 @@ const { title, subtitle, rendered } = Astro.props;
   }
 
   .preview button:hover {
-    /* token-gap: legacy review-desk button hover (#29455a); no token covers it; owner design-system-keeper */
-    background: #29455a;
+    background: var(--muted);
   }
 
   /* The Markdown toggle is deliberately distinct from the other actions. */
@@ -139,10 +134,8 @@ const { title, subtitle, rendered } = Astro.props;
   .preview button.preview-markdown:hover,
   .preview button.preview-markdown[aria-pressed='true'] {
     color: var(--paper);
-    /* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
-    background: #a7483f;
-    /* token-gap: legacy review-desk markdown toggle pressed (#a7483f); --red here is #a7483f but a token rename changed that — owner design-system-keeper */
-    border-color: #a7483f;
+    background: var(--red);
+    border-color: var(--red);
   }
 
   /* Source body: bounded scroll, monospaced, the canonical dark code
@@ -151,10 +144,8 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: 540px;
     margin: 0;
     padding: 24px;
-    /* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #d6e1e4;
-    /* token-gap: legacy review-desk pre bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
-    background: #0c1a25;
+    color: var(--paper);
+    background: var(--ink);
   }
 
   /* Code text inside the source surface. */
@@ -170,10 +161,8 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: 540px;
     overflow: auto;
     padding: 24px;
-    /* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #d6e1e4;
-    /* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
-    background: #0c1a25;
+    color: var(--paper);
+    background: var(--ink);
   }
 
   .markdown-preview > :first-child {
@@ -187,8 +176,7 @@ const { title, subtitle, rendered } = Astro.props;
   .markdown-preview :global(h5),
   .markdown-preview :global(h6) {
     margin: 1.5em 0 0.5em;
-    /* token-gap: legacy review-desk heading colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #fff;
+    color: var(--paper);
     line-height: 1.15;
   }
 
@@ -219,10 +207,8 @@ const { title, subtitle, rendered } = Astro.props;
 
   .markdown-preview :global(code) {
     padding: 0.12em 0.3em;
-    /* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #fff;
-    /* token-gap: legacy review-desk inline code bg (#29455a); no token covers it; owner design-system-keeper */
-    background: #29455a;
+    color: var(--paper);
+    background: var(--muted);
     white-space: break-spaces;
   }
 
@@ -230,8 +216,7 @@ const { title, subtitle, rendered } = Astro.props;
     max-height: none;
     margin: 1em 0;
     padding: 14px;
-    /* token-gap: legacy review-desk pre border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
   }
 
   .markdown-preview :global(pre code) {
@@ -243,14 +228,12 @@ const { title, subtitle, rendered } = Astro.props;
     margin: 1em 0;
     padding: 0.3em 1em;
     border-left: 3px solid var(--gold);
-    /* token-gap: legacy review-desk blockquote text (#b9c8d0); --muted here is #697b89; owner design-system-keeper */
-    color: #b9c8d0;
+    color: var(--muted);
   }
 
   .markdown-preview :global(hr) {
     border: 0;
-    /* token-gap: legacy review-desk hr (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border-top: 1px solid #486175;
+    border-top: 1px solid var(--line);
   }
 
   /* Frontmatter: the two-column key/value grid that opens the rendered
@@ -261,8 +244,7 @@ const { title, subtitle, rendered } = Astro.props;
     gap: 3px 14px;
     margin: 0 0 24px;
     padding: 12px;
-    /* token-gap: legacy review-desk frontmatter border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
     font:
       11px/1.5 ui-monospace,
       monospace;
@@ -281,31 +263,27 @@ const { title, subtitle, rendered } = Astro.props;
     max-width: 100%;
     overflow: auto;
     margin: 1em 0;
-    /* token-gap: legacy review-desk table border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
   }
 
   .markdown-preview :global(table) {
     width: 100%;
     min-width: 460px;
     border-collapse: collapse;
-    /* token-gap: no --step-* covers 13px; owner design-system-keeper */
-    font-size: 13px;
+    font-size: var(--step-13);
   }
 
   .markdown-preview :global(th),
   .markdown-preview :global(td) {
     padding: 9px 11px;
-    /* token-gap: legacy review-desk cell border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
+    border: 1px solid var(--line);
     text-align: left;
     vertical-align: top;
   }
 
   .markdown-preview :global(th) {
     color: var(--gold);
-    /* token-gap: legacy review-desk table header bg (#173046); --deep here is #102536; owner design-system-keeper */
-    background: #173046;
+    background: var(--deep);
   }
 
   /* Table of contents: the "ON THIS PAGE" nav that opens the body when
@@ -313,10 +291,8 @@ const { title, subtitle, rendered } = Astro.props;
   .markdown-preview :global(.markdown-toc) {
     margin: 0 0 24px;
     padding: 12px 14px;
-    /* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */
-    border: 1px solid #486175;
-    /* token-gap: legacy review-desk toc bg (#102b3a); --deep here is #102536; owner design-system-keeper */
-    background: #102b3a;
+    border: 1px solid var(--line);
+    background: var(--deep);
   }
 
   .markdown-preview :global(.markdown-toc > span) {

src/components/blocks/ReviewDetail.astro

@@ -102,8 +102,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
   .detail {
     min-width: 0;
     padding: 38px;
-    /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
-    background: #f6f3ed;
+    background: var(--paper);
   }
 
   /* Header row: title cluster on the left, version switcher on the right. */
@@ -128,8 +127,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .detail > header p {
     margin: 0;
-    /* token-gap: legacy review-desk --muted (#65717a); --muted here is #697b89; owner design-system-keeper */
-    color: #65717a;
+    color: var(--muted);
   }
 
   /* author-link and share-link are NEW elements not in legacy stylesheets;
@@ -157,10 +155,8 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .switch button.active,
   .switch button[aria-pressed='true'] {
-    /* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
-    color: #f6f3ed;
-    /* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
-    background: #122534;
+    color: var(--paper);
+    background: var(--ink);
   }
 
   .switch button:focus-visible {
@@ -175,8 +171,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     gap: 20px;
     margin: 45px 0 20px;
     padding: 20px;
-    /* token-gap: legacy review-desk --gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
-    background: #ebbf58;
+    background: var(--gold);
   }
 
   .purpose span {
@@ -187,8 +182,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .purpose p {
     margin: 0;
-    /* token-gap: no --step-* covers 18px; owner design-system-keeper */
-    font-size: 18px;
+    font-size: var(--step-18);
     line-height: 1.4;
   }
 
@@ -203,8 +197,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
 
   .review-grid section {
     padding: 22px;
-    /* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */
-    background: #f6f3ed;
+    background: var(--paper);
   }
 
   .review-grid span {
@@ -226,19 +219,15 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
   .extras {
     margin: 1px 0 25px;
     padding: 18px 22px;
-    /* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */
-    color: #122534;
-    /* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
-    background: #e5eeeb;
-    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
-    border-left: 4px solid #215675;
+    color: var(--ink);
+    background: var(--paper);
+    border-left: 4px solid var(--blue);
   }
 
   .extras span {
     display: block;
     margin-bottom: 8px;
-    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
-    color: #215675;
+    color: var(--blue);
     font: 700 10px monospace;
     letter-spacing: 0.1em;
   }
@@ -247,8 +236,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     margin: 0;
   }
 
-  /* token-gap: 850px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 850px) {
+  @media (max-width: 800px) {
     .detail {
       padding: 24px;
     }
@@ -258,8 +246,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
     }
   }
 
-  /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 530px) {
+  @media (max-width: 560px) {
     .detail > header {
       display: block;
     }

src/components/blocks/RouteCard.astro

@@ -53,15 +53,13 @@ const { number, title, summary, href, cta = 'Open chapter →' } = Astro.props;
 
   .card b {
     color: var(--red);
-    /* token-gap: legacy 24px fixed from chapters.css .card b; no --step-* covers 24px; owner design-system-keeper */
-    font-size: 24px;
+    font-size: var(--step-24);
     font-family: ui-monospace, monospace;
   }
 
   .card h2 {
     margin: 18px 0 8px;
-    /* token-gap: legacy 25px fixed from chapters.css .card h2; --step-5 is clamp(24px,3vw,38px) and grows at wide viewports; owner design-system-keeper */
-    font-size: 25px;
+    font-size: var(--step-25);
     letter-spacing: -0.04em;
   }
 

src/components/blocks/RouteTable.astro

@@ -6,29 +6,79 @@
 // renders the column header + the four rows; task 15 will hydrate the
 // "route detail" panel to the right.
 
+type Localized = { en: string; pt: string };
+
 interface Route {
   id: 'plan' | 'build' | 'explore' | 'review' | string;
   /** Strong label, e.g. "Plan". */
-  strong: string;
+  strong: string | Localized;
   /** Profile descriptor, e.g. "strong / broad". */
-  profile: string;
+  profile: string | Localized;
   /** Prompt shape copy. */
-  prompt: string;
+  prompt: string | Localized;
 }
 
 interface Props {
   routes: Route[];
   initial?: string;
+  headWork?: string | Localized;
+  headProfile?: string | Localized;
+  headPromptShape?: string | Localized;
 }
 
-const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
+const {
+  routes,
+  initial = routes[0]?.id ?? 'plan',
+  headWork = 'Work',
+  headProfile = 'Profile',
+  headPromptShape = 'Prompt shape',
+} = Astro.props;
 ---
 
 <div class="route-table">
   <div class="head">
-    <span>Work</span>
-    <span>Profile</span>
-    <span>Prompt shape</span>
+    <span>
+      {
+        typeof headWork === 'string' ? (
+          headWork
+        ) : (
+          <>
+            <span data-language-content="en">{headWork.en}</span>
+            <span data-language-content="pt" hidden>
+              {headWork.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <span>
+      {
+        typeof headProfile === 'string' ? (
+          headProfile
+        ) : (
+          <>
+            <span data-language-content="en">{headProfile.en}</span>
+            <span data-language-content="pt" hidden>
+              {headProfile.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <span>
+      {
+        typeof headPromptShape === 'string' ? (
+          headPromptShape
+        ) : (
+          <>
+            <span data-language-content="en">{headPromptShape.en}</span>
+            <span data-language-content="pt" hidden>
+              {headPromptShape.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
   </div>
   {
     routes.map((route) => (
@@ -37,9 +87,42 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
         data-route={route.id}
         aria-pressed={route.id === initial}
       >
-        <strong>{route.strong}</strong>
-        <b>{route.profile}</b>
-        <small>{route.prompt}</small>
+        <strong>
+          {typeof route.strong === 'string' ? (
+            route.strong
+          ) : (
+            <>
+              <span data-language-content="en">{route.strong.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.strong.pt}
+              </span>
+            </>
+          )}
+        </strong>
+        <b>
+          {typeof route.profile === 'string' ? (
+            route.profile
+          ) : (
+            <>
+              <span data-language-content="en">{route.profile.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.profile.pt}
+              </span>
+            </>
+          )}
+        </b>
+        <small>
+          {typeof route.prompt === 'string' ? (
+            route.prompt
+          ) : (
+            <>
+              <span data-language-content="en">{route.prompt.en}</span>
+              <span data-language-content="pt" hidden>
+                {route.prompt.pt}
+              </span>
+            </>
+          )}
+        </small>
       </button>
     ))
   }
@@ -84,8 +167,7 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
     cursor: pointer;
   }
   .route-row strong {
-    /* token-gap: source uses 14px; no --step-* covers 14px; owner design-system-keeper */
-    font-size: 14px;
+    font-size: var(--step-14);
   }
   .route-row b {
     color: var(--blue);
@@ -94,8 +176,7 @@ const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props;
   }
   .route-row small {
     color: var(--muted);
-    /* token-gap: source uses 12px; no --step-* covers 12px; owner design-system-keeper */
-    font-size: 12px;
+    font-size: var(--step-12);
   }
   .route-row.active {
     background: var(--line);

src/components/blocks/SkillList.astro

@@ -92,8 +92,7 @@ const { entries, selectedId } = Astro.props;
 
   /* Title: two-line clamp so a long title doesn't push other rows. */
   #skill-list button strong {
-    /* token-gap: no --step-* covers 13px; owner design-system-keeper */
-    font-size: 13px;
+    font-size: var(--step-13);
     line-height: 18px;
     max-height: 36px;
     overflow: hidden;

src/components/blocks/SkillPackage.astro

@@ -7,24 +7,40 @@
 // paired with a `<article>` detail panel by the parent page; this component
 // renders only the picker.
 
+type Localized = { en: string; pt: string };
+
 interface PackageFile {
   id: 'skill' | 'references' | 'scripts' | 'assets' | string;
   /** Path rendered inside `<code>`, e.g. "SKILL.md". */
   path: string;
   /** Helper copy under the path. */
-  small: string;
+  small: string | Localized;
 }
 
 interface Props {
   files: PackageFile[];
   initial?: string;
+  packageLabel?: string | Localized;
 }
 
-const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
+const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE' } = Astro.props;
 ---
 
 <div class="skill-package" role="tree" aria-label="Skill package files">
-  <span class="skill-package-label">SKILL PACKAGE</span>
+  <span class="skill-package-label">
+    {
+      typeof packageLabel === 'string' ? (
+        packageLabel
+      ) : (
+        <>
+          <span data-language-content="en">{packageLabel.en}</span>
+          <span data-language-content="pt" hidden>
+            {packageLabel.pt}
+          </span>
+        </>
+      )
+    }
+  </span>
   {
     files.map((file) => (
       <button
@@ -34,7 +50,18 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
         aria-selected={file.id === initial}
       >
         <code>{file.path}</code>
-        <small>{file.small}</small>
+        <small>
+          {typeof file.small === 'string' ? (
+            file.small
+          ) : (
+            <>
+              <span data-language-content="en">{file.small.en}</span>
+              <span data-language-content="pt" hidden>
+                {file.small.pt}
+              </span>
+            </>
+          )}
+        </small>
       </button>
     ))
   }
@@ -51,8 +78,7 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
   .skill-package-label {
     padding: 20px;
     color: var(--gold);
-    /* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
-    border-bottom: 1px solid #ffffff40;
+    border-bottom: 1px solid var(--white-25);
     /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
     font:
       500 10px 'DM Mono',
@@ -67,8 +93,7 @@ const { files, initial = files[0]?.id ?? 'skill' } = Astro.props;
     gap: 15px;
     padding: 17px 20px;
     border: 0;
-    /* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */
-    border-bottom: 1px solid #ffffff40;
+    border-bottom: 1px solid var(--white-25);
     color: var(--paper);
     background: transparent;
     text-align: left;

src/components/blocks/VoteWidget.astro

@@ -77,14 +77,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
     margin: 1px 0 25px;
     padding: 18px 22px;
     color: var(--ink);
-    /* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */
-    background: #e5eeeb;
+    background: var(--paper);
     border-left: 4px solid var(--gold);
   }
 
   .vote-widget > span {
-    /* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
-    color: #215675;
+    color: var(--blue);
     font: 700 10px monospace;
     letter-spacing: 0.1em;
   }
@@ -133,14 +131,35 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
   .vote-note {
     margin: 0;
     color: var(--muted);
-    /* token-gap: no --step-* covers 12px; owner design-system-keeper */
-    font-size: 12px;
+    font-size: var(--step-12);
   }
 
-  /* token-gap: 530px is not a named breakpoint; owner design-system-keeper */
-  @media (max-width: 530px) {
+  @media (max-width: 560px) {
     .vote-buttons {
       flex-direction: column;
     }
   }
+
+  .vote-buttons button b {
+    display: inline-block;
+  }
+  :global(.is-updating) {
+    /* purpose: vote widget tally update (feedback) */
+    animation: tally-pop 200ms cubic-bezier(0.2, 0, 0, 1) both;
+  }
+  @keyframes tally-pop {
+    from {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.is-updating) {
+      animation: none;
+    }
+  }
 </style>

src/components/blocks/WorktreeMap.astro

@@ -6,15 +6,17 @@
 // the `data-tree` hook asserted by `scripts/verify.mjs`. The `root` node and
 // the `initial` branch are marked selected.
 
+type Localized = { en: string; pt: string };
+
 interface Branch {
   /** The `data-tree` hook, e.g. "ui", "tests", "docs". */
   id: string;
   /** Uppercase label, e.g. "UI AGENT". */
-  label: string;
+  label: string | Localized;
   /** Strong line, e.g. "agent/ui". */
   strong: string;
   /** Status small, e.g. "3 files · working". */
-  small: string;
+  small: string | Localized;
   /** CSS modifier so each branch picks up its tone. */
   tone: 'ui' | 'tests' | 'docs' | string;
 }
@@ -22,9 +24,11 @@ interface Branch {
 interface Props {
   branches: Branch[];
   initial?: string;
+  rootLabel?: string | Localized;
+  rootSmall?: string | Localized;
 }
 
-const { branches, initial = 'main' } = Astro.props;
+const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean' } = Astro.props;
 ---
 
 <div class="tree-stage" role="tree" aria-label="Repository worktree topology">
@@ -39,8 +43,37 @@ const { branches, initial = 'main' } = Astro.props;
     data-tree="main"
     role="treeitem"
     aria-selected={initial === 'main'}
-    ><span>ROOT</span><strong>main</strong><small>● clean</small></button
   >
+    <span>
+      {
+        typeof rootLabel === 'string' ? (
+          rootLabel
+        ) : (
+          <>
+            <span data-language-content="en">{rootLabel.en}</span>
+            <span data-language-content="pt" hidden>
+              {rootLabel.pt}
+            </span>
+          </>
+        )
+      }
+    </span>
+    <strong>main</strong>
+    <small>
+      {
+        typeof rootSmall === 'string' ? (
+          rootSmall
+        ) : (
+          <>
+            <span data-language-content="en">{rootSmall.en}</span>
+            <span data-language-content="pt" hidden>
+              {rootSmall.pt}
+            </span>
+          </>
+        )
+      }
+    </small>
+  </button>
   {
     branches.map((branch) => (
       <button
@@ -50,9 +83,31 @@ const { branches, initial = 'main' } = Astro.props;
         aria-selected={branch.id === initial}
       >
         <>
-          <span>{branch.label}</span>
+          <span>
+            {typeof branch.label === 'string' ? (
+              branch.label
+            ) : (
+              <>
+                <span data-language-content="en">{branch.label.en}</span>
+                <span data-language-content="pt" hidden>
+                  {branch.label.pt}
+                </span>
+              </>
+            )}
+          </span>
           <strong>{branch.strong}</strong>
-          <small>{branch.small}</small>
+          <small>
+            {typeof branch.small === 'string' ? (
+              branch.small
+            ) : (
+              <>
+                <span data-language-content="en">{branch.small.en}</span>
+                <span data-language-content="pt" hidden>
+                  {branch.small.pt}
+                </span>
+              </>
+            )}
+          </small>
         </>
       </button>
     ))
@@ -96,8 +151,7 @@ const { branches, initial = 'main' } = Astro.props;
     padding: 20px;
     color: var(--paper);
     background: var(--ink);
-    /* token-gap: source uses 1px solid #41596b over the ink background; no token matches; owner design-system-keeper */
-    border: 1px solid #41596b;
+    border: 1px solid var(--muted);
     text-align: left;
     cursor: pointer;
   }
@@ -122,13 +176,11 @@ const { branches, initial = 'main' } = Astro.props;
   }
   .tree-node small {
     margin-top: 0;
-    /* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */
-    color: #9eabb4;
+    color: var(--muted);
     font-size: var(--step-0);
   }
   .tree-node.root small {
-    /* token-gap: source uses #9eabb4 even on the root; no token matches; owner design-system-keeper */
-    color: #9eabb4;
+    color: var(--muted);
   }
   .tree-node.active {
     box-shadow: inset 4px 0 0 var(--gold);
@@ -162,4 +214,111 @@ const { branches, initial = 'main' } = Astro.props;
       justify-self: stretch;
     }
   }
+
+  /* token-gap: preserve the legacy worktree layout threshold; this behavior is required by task 15e */
+  @media (max-width: 1050px) {
+    .tree-stage {
+      display: block;
+      padding: 0;
+    }
+    .tree-node,
+    .tree-node.root {
+      min-height: 0;
+      width: 145px;
+      padding: 13px 15px;
+      gap: 6px;
+    }
+    .tree-node span,
+    .tree-node small {
+      font: 500 var(--step-08) var(--font-mono);
+      letter-spacing: 0.08em;
+    }
+    .tree-node strong {
+      font: 600 var(--step-12) var(--font-mono);
+    }
+  }
+
+  @media (min-width: 1600px) {
+    .tree-stage {
+      height: 390px;
+    }
+    .tree-stage svg {
+      height: 330px;
+      top: 30px;
+    }
+    .tree-node.root {
+      top: 45px;
+    }
+    .tree-node.branch {
+      top: 255px;
+    }
+    .tree-node {
+      width: 190px;
+      padding: 17px;
+    }
+  }
+
+  @media (min-width: 2200px) {
+    .tree-stage {
+      height: 460px;
+    }
+    .tree-stage svg {
+      height: 380px;
+      top: 45px;
+    }
+    .tree-node.root {
+      top: 65px;
+    }
+    .tree-node.branch {
+      top: 305px;
+    }
+    .tree-node {
+      width: 240px;
+      padding: 22px;
+    }
+    .tree-node strong {
+      font-size: var(--step-1);
+    }
+  }
+
+  /* token-gap: preserve the legacy full-guide layout threshold; task 20 can retire it with the legacy stylesheet */
+  @media (max-width: 600px) {
+    .tree-stage {
+      height: auto;
+      min-height: 560px;
+      padding: 24px;
+    }
+    .tree-stage svg {
+      display: none;
+    }
+    .tree-node,
+    .tree-node.root,
+    .tree-node.branch,
+    .tree-node.ui,
+    .tree-node.tests,
+    .tree-node.docs {
+      position: relative;
+      top: auto;
+      right: auto;
+      left: auto;
+      width: 100%;
+      margin: 0 0 34px;
+      transform: none;
+    }
+    .tree-node:not(:last-child)::after {
+      content: '↓';
+      position: absolute;
+      left: 50%;
+      bottom: -28px;
+      color: var(--gold);
+    }
+    .tree-node:hover,
+    .tree-node.active,
+    .tree-node.root:hover,
+    .tree-node.root.active,
+    .tree-node.tests:hover,
+    .tree-node.tests.active {
+      transform: translateY(-2px);
+    }
+  }
 </style>

src/components/islands/CopyPrompt.astro

@@ -121,7 +121,8 @@ const { target } = Astro.props;
       if (!id) return;
       const target = document.querySelector('#' + id);
       if (!target) return;
-      const value = target.textContent || '';
+      const visible = target.querySelector(':scope > [data-language-content]:not([hidden])');
+      const value = visible?.textContent || target.textContent || '';
 
       if (
         typeof navigator !== 'undefined' &&

src/components/islands/GuideSelector.astro

@@ -99,7 +99,11 @@ const { rootSelector, data } = Astro.props;
 
     function replace(target, markup) {
       const panel = root.querySelector(target);
-      if (panel) panel.innerHTML = markup;
+      if (!panel) return;
+      panel.innerHTML = markup;
+      panel.classList.remove('is-swapping');
+      void panel.offsetWidth;
+      panel.classList.add('is-swapping');
     }
 
     // Names deliberately match legacy functions until task 19 updates its checks.
@@ -291,4 +295,24 @@ const { rootSelector, data } = Astro.props;
     outline: 3px solid var(--gold);
     outline-offset: -3px;
   }
+
+  :global(.is-swapping > *) {
+    /* purpose: tab panel change in the guide (state change) */
+    animation: guide-swap 200ms cubic-bezier(0.2, 0, 0, 1) both;
+  }
+  @keyframes guide-swap {
+    from {
+      opacity: 0.15;
+      transform: translateY(5px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    :global(.is-swapping > *) {
+      animation: none;
+    }
+  }
 </style>

src/components/islands/ReadingProgress.astro

@@ -42,7 +42,7 @@ const { target = '.reading-progress span' } = Astro.props;
 
     function update() {
       const height = document.documentElement.scrollHeight - window.innerHeight;
-      span.style.width = (height > 0 ? (window.scrollY / height) * 100 : 0) + '%';
+      span.style.transform = `scaleX(${height > 0 ? window.scrollY / height : 0})`;
     }
 
     // `{ passive: true }` is non-negotiable. The legacy app.js binds

src/components/islands/RulesInteractive.astro

@@ -403,8 +403,13 @@ fix(api): scope session query</code></pre>
       select('[data-skill]', id, 'skill');
     }
 
+    // Keys whose copy carries markup, so the swap must write innerHTML.
+    // `skillsText` was missing while the markup renders it with `set:html`:
+    // the island rewrote it as text on load and every visitor saw a literal
+    // `<code>.agents/skills/</code>` in the paragraph.
     const HTML_KEYS = {
       heroTitle: 1,
+      skillsText: 1,
       pipelineTitle: 1,
       skillsTitle: 1,
       ratchetTitle: 1,
@@ -487,24 +492,6 @@ fix(api): scope session query</code></pre>
 </script>
 
 <style>
-  /* Token-gap escape hatch for legacy values without a token yet — see
-     .agents/scripts/check-tokens.mjs and the rules/astro.md token contract.
-     Owner: design-system-keeper. */
-  /* token-gap: --accent/#7c78a8 etc. already tokenized; --bp-2xl/2200 covers the
-     legacy (min-width:2200px) and (max-width:900px) collapse to --bp-md/800px;
-     owner design-system-keeper */
-  :root {
-    /* token-gap: rules/styles.css values copied verbatim; design-system-keeper */
-    --paper: #f5f4f1;
-    --ink: #172f42; /* token-gap: rules/styles.css; design-system-keeper */
-    --muted: #697b89; /* token-gap: rules/styles.css; design-system-keeper */
-    --accent: #7c78a8; /* token-gap: rules/styles.css; design-system-keeper */
-    --blue: #527f9f; /* token-gap: rules/styles.css; design-system-keeper */
-    --gold: #efc76b; /* token-gap: rules/styles.css; design-system-keeper */
-    --line: #d8dee2; /* token-gap: rules/styles.css; design-system-keeper */
-    --deep: #102536; /* token-gap: rules/styles.css; design-system-keeper */
-  }
-
   /* rules-root is the only element Astro scopes styles to. The legacy
      page's rules/styles.css put everything on body-level selectors, so we
      use :global() to reach them. */
@@ -569,7 +556,7 @@ fix(api): scope session query</code></pre>
     height: 30px;
     color: var(--paper);
     background: var(--accent);
-    font-size: 15px; /* token-gap: source 15px; design-system-keeper */
+    font-size: var(--step-1);
   }
   .topbar nav {
     display: flex;
@@ -646,7 +633,7 @@ fix(api): scope session query</code></pre>
     max-width: 750px;
     margin: 0;
     color: var(--muted);
-    font-size: 16px; /* token-gap: source 16px; design-system-keeper */
+    font-size: var(--step-16);
     line-height: 1.75;
   }
   .hero-foot aside {
@@ -666,7 +653,7 @@ fix(api): scope session query</code></pre>
     letter-spacing: 0.08em;
   }
   .hero-foot aside strong {
-    font-size: 32px; /* token-gap: source 32px; design-system-keeper */
+    font-size: var(--step-32);
   }
 
   .thesis {
@@ -715,7 +702,7 @@ fix(api): scope session query</code></pre>
     max-width: 650px;
     margin: 0;
     color: var(--muted);
-    font-size: 14px; /* token-gap: source 14px; design-system-keeper */
+    font-size: var(--step-14);
     line-height: 1.75;
   }
 
@@ -779,7 +766,7 @@ fix(api): scope session query</code></pre>
     background: var(--deep);
   }
   .stage-number {
-    color: #ffffff24; /* token-gap: stage number 12% white on --deep; design-system-keeper */
+    color: var(--white-14);
     font:
       500 76px 'DM Mono',
       monospace;
@@ -801,8 +788,8 @@ fix(api): scope session query</code></pre>
   .stage-detail p,
   .skill-detail p {
     max-width: 650px;
-    color: #b8c8d2; /* token-gap: lighter than --muted on dark bg; design-system-keeper */
-    font-size: 13px; /* token-gap: source 13px; design-system-keeper */
+    color: var(--ink-line);
+    font-size: var(--step-13);
     line-height: 1.7;
   }
   .stage-detail a,
@@ -822,7 +809,7 @@ fix(api): scope session query</code></pre>
   .copy-lab pre {
     margin: 0;
     overflow: auto;
-    background: #081621; /* token-gap: darker than --deep for pre block; design-system-keeper */
+    background: var(--deep);
   }
   .stage-detail pre {
     align-self: stretch;
@@ -832,7 +819,7 @@ fix(api): scope session query</code></pre>
   .skill-detail code,
   .example-grid code,
   .copy-lab code {
-    color: #c9d5dc; /* token-gap: code text on dark bg; design-system-keeper */
+    color: var(--ink-code);
     font:
       11px/1.7 'DM Mono',
       monospace;
@@ -870,7 +857,7 @@ fix(api): scope session query</code></pre>
   }
   .skill-list button small {
     color: var(--muted);
-    font-size: 10px; /* token-gap: source 10px; design-system-keeper */
+    font-size: var(--step-00);
   }
   .skill-list button.active {
     color: var(--paper);
@@ -878,23 +865,23 @@ fix(api): scope session query</code></pre>
     box-shadow: inset 6px 0 var(--gold);
   }
   .skill-list button.active small {
-    color: #f0eef8; /* token-gap: near-white text on --accent active state; design-system-keeper */
+    color: var(--accent-paper-active);
   }
   .skill-detail {
     display: grid;
     align-content: center;
     padding: 50px clamp(30px, 5vw, 80px);
     color: var(--paper);
-    background: #5b7098; /* token-gap: skill detail panel bg, between --blue and --accent; design-system-keeper */
+    background: var(--accent-surface);
   }
   .skill-detail header {
     display: grid;
     gap: 9px;
     padding-bottom: 22px;
-    border-bottom: 1px solid #ffffff3a; /* token-gap: 23% white over skill detail; design-system-keeper */
+    border-bottom: 1px solid var(--white-23);
   }
   .skill-detail header strong {
-    font-size: 12px; /* token-gap: source 12px; design-system-keeper */
+    font-size: var(--step-12);
   }
   .skill-detail pre {
     margin: 20px 0 0;
@@ -959,7 +946,7 @@ fix(api): scope session query</code></pre>
   }
   .copy-lab > div p {
     max-width: 420px;
-    color: #eceaf5; /* token-gap: near-white text on --accent; design-system-keeper */
+    color: var(--accent-paper);
     line-height: 1.6;
   }
   .copy-lab article {
@@ -974,7 +961,7 @@ fix(api): scope session query</code></pre>
     gap: 20px;
     margin: 20px;
     padding: 11px 14px;
-    border: 1px solid #ffffff50; /* token-gap: 31% white copy button border; design-system-keeper */
+    border: 1px solid var(--white-31);
     color: var(--paper);
     background: transparent;
     font:
@@ -1021,7 +1008,7 @@ fix(api): scope session query</code></pre>
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1px;
-    background: #132b3b; /* token-gap: deeper.nav grid rule color; design-system-keeper */
+    background: var(--ink);
   }
   .deeper nav a {
     display: grid;
@@ -1039,10 +1026,10 @@ fix(api): scope session query</code></pre>
       monospace;
   }
   .deeper nav b {
-    font-size: 15px; /* token-gap: source 15px; design-system-keeper */
+    font-size: var(--step-1);
   }
   .deeper nav small {
-    color: #9eb0bb; /* token-gap: muted small text on --ink; design-system-keeper */
+    color: var(--ink-muted);
     font:
       9px 'DM Mono',
       monospace;
@@ -1080,8 +1067,7 @@ fix(api): scope session query</code></pre>
     }
   }
 
-  /* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */
-  @media (max-width: 900px) {
+  @media (max-width: 800px) {
     .topbar {
       grid-template-columns: 1fr auto;
     }
@@ -1126,8 +1112,7 @@ fix(api): scope session query</code></pre>
     }
   }
 
-  /* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */
-  @media (max-width: 600px) {
+  @media (max-width: 560px) {
     main {
       padding-inline: 18px;
     }
@@ -1171,7 +1156,7 @@ fix(api): scope session query</code></pre>
       padding: 28px 22px;
     }
     .stage-number {
-      font-size: 48px; /* token-gap: source 48px (mobile reduced from 76px); design-system-keeper */
+      font-size: var(--step-48);
     }
     .stage-detail pre {
       grid-column: auto;

src/components/islands/SkillPackageExplorer.astro

@@ -140,8 +140,7 @@ const packageFiles: PackageFile[] = [
 
   .package-tree {
     padding: 22px 16px;
-    /* token-gap: legacy 1px solid #426070 over --ink; no token matches; owner design-system-keeper */
-    border-right: 1px solid #426070;
+    border-right: 1px solid var(--muted);
     min-width: 0;
   }
 
@@ -149,9 +148,8 @@ const packageFiles: PackageFile[] = [
   .package-preview > span {
     margin: 0 0 14px;
     color: var(--gold);
-    /* token-gap: source uses 11px monospace; no --step-* covers 11px on this surface; design-system-keeper */
     font:
-      700 11px / 1.35 ui-monospace,
+      700 var(--step-0) / 1.35 ui-monospace,
       monospace;
     letter-spacing: 0.1em;
   }
@@ -166,8 +164,7 @@ const packageFiles: PackageFile[] = [
     border: 0;
     border-left: 2px solid transparent;
     background: transparent;
-    /* token-gap: legacy #d6e1e4 over --ink tree buttons; no token matches; design-system-keeper */
-    color: #d6e1e4;
+    color: var(--line);
     text-align: left;
     cursor: pointer;
     transition:
@@ -180,8 +177,7 @@ const packageFiles: PackageFile[] = [
   .package-tree button:focus-visible,
   .package-tree button.active {
     border-left-color: var(--gold);
-    /* token-gap: legacy #1f3a4b active/hover on --ink tree; no token matches; design-system-keeper */
-    background: #1f3a4b;
+    background: var(--blue);
     outline: 0;
   }
 
@@ -198,8 +194,7 @@ const packageFiles: PackageFile[] = [
   }
 
   .package-tree small {
-    /* token-gap: legacy #aebfc7 muted text on --ink tree; no token matches; design-system-keeper */
-    color: #aebfc7;
+    color: var(--muted);
     font:
       11px / 1.25 Arial,
       sans-serif;
@@ -209,8 +204,7 @@ const packageFiles: PackageFile[] = [
   .package-preview {
     min-width: 0;
     padding: 26px;
-    /* token-gap: legacy #173245 preview surface (between --ink and --blue); no token matches; design-system-keeper */
-    background: #173245;
+    background: var(--ink);
     color: var(--paper);
   }
 
@@ -224,8 +218,7 @@ const packageFiles: PackageFile[] = [
   .package-preview p {
     max-width: 52ch;
     margin: 0;
-    /* token-gap: legacy #d6e1e4 muted text on #173245 preview; no token matches; design-system-keeper */
-    color: #d6e1e4;
+    color: var(--line);
   }
 
   .package-preview pre {
@@ -233,19 +226,17 @@ const packageFiles: PackageFile[] = [
     margin: 20px 0 0;
     padding: 15px;
     overflow: auto;
-    /* token-gap: legacy #466274 rule on preview pre border; no token matches; design-system-keeper */
-    border: 1px solid #466274;
-    /* token-gap: legacy #102837 fill on preview pre background; no token matches; design-system-keeper */
-    background: #102837;
-    /* token-gap: legacy #d6e1e4 code text on #102837; no token matches; design-system-keeper */
-    color: #d6e1e4;
+    border: 1px solid var(--muted);
+    background: var(--deep);
+    color: var(--line);
     font:
       12px / 1.55 ui-monospace,
       monospace;
   }
 
   .package-preview.is-swapping {
-    animation: package-preview-in 0.34s ease both;
+    /* purpose: review-desk detail swap on selection (state change) */
+    animation: package-preview-in 200ms cubic-bezier(0.2, 0, 0, 1) both;
   }
 
   @keyframes package-preview-in {
@@ -265,16 +256,15 @@ const packageFiles: PackageFile[] = [
     }
     .package-tree {
       border-right: 0;
-      /* token-gap: legacy #426070 mobile layout rule over --ink; no token matches; design-system-keeper */
-      border-bottom: 1px solid #426070;
+      /* token-gap: legacy var(--muted) mobile layout rule over --ink; no token matches; design-system-keeper */
+      border-bottom: 1px solid var(--muted);
     }
     .package-preview {
       padding: 22px;
     }
   }
 
-  /* token-gap: legacy 520px breakpoint from skills/styles.css (mobile phone), not in named set 560/800/1100/1600/2200; design-system-keeper */
-  @media (max-width: 520px) {
+  @media (max-width: 560px) {
     .package-tree {
       padding: 18px 10px;
     }
@@ -288,8 +278,7 @@ const packageFiles: PackageFile[] = [
       padding: 18px;
     }
     .package-preview pre {
-      /* token-gap: legacy 11px mobile font-size from skills/styles.css; no --step-* covers 11px; design-system-keeper */
-      font-size: 11px;
+      font-size: var(--step-0);
     }
   }
 

src/content/commonSkills/caveman.json

@@ -13,5 +13,7 @@
     "en": "Drop the style for security warnings, irreversible actions, and sequences where terse wording can be misread.",
     "pt": "Abandone o estilo em alertas de segurança, ações irreversíveis e sequências onde concisão pode causar erro."
   },
-  "source": "https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md"
+  "source": "https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md",
+  "label": { "en": "COMMUNICATE", "pt": "COMUNICAR" },
+  "tagline": { "en": "signal without filler", "pt": "sinal sem excesso" }
 }

src/content/commonSkills/debug.json

@@ -19,5 +19,7 @@
     "en": "Do not jump from error message straight to a patch.",
     "pt": "Não pule da mensagem de erro direto para um patch."
   },
-  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md"
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md",
+  "label": { "en": "DIAGNOSE", "pt": "DIAGNOSTICAR" },
+  "tagline": { "en": "tight feedback loop", "pt": "ciclo curto de feedback" }
 }

src/content/commonSkills/ponytail.json

@@ -19,5 +19,7 @@
     "en": "Never simplify away security, accessibility, validation, or real edge cases.",
     "pt": "Nunca simplifique segurança, acessibilidade, validação ou casos extremos reais."
   },
-  "source": "https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md"
+  "source": "https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md",
+  "label": { "en": "SIMPLIFY", "pt": "SIMPLIFICAR" },
+  "tagline": { "en": "minimum code that holds", "pt": "código mínimo que funciona" }
 }

src/content/commonSkills/research.json

@@ -16,5 +16,7 @@
     "en": "Practitioner articles add context; they do not override official behavior.",
     "pt": "Artigos de praticantes dão contexto; não substituem comportamento oficial."
   },
-  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md"
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md",
+  "label": { "en": "INVESTIGATE", "pt": "INVESTIGAR" },
+  "tagline": { "en": "primary sources first", "pt": "fontes primárias primeiro" }
 }

src/content/commonSkills/review.json

@@ -19,5 +19,7 @@
     "en": "Pin the comparison point and source specification before reviewing.",
     "pt": "Fixe o ponto de comparação e a especificação antes de revisar."
   },
-  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md"
+  "source": "https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md",
+  "label": { "en": "REVIEW", "pt": "REVISAR" },
+  "tagline": { "en": "standards × spec", "pt": "padrões × especificação" }
 }

src/content/commonSkills/tokens.json

@@ -19,5 +19,7 @@
     "en": "Read raw output when exact wording or full diffs matter.",
     "pt": "Leia saída bruta quando texto exato ou diffs completos importarem."
   },
-  "source": "https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md"
+  "source": "https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md",
+  "label": { "en": "ECONOMIZE", "pt": "ECONOMIZAR" },
+  "tagline": { "en": "compress noisy output", "pt": "comprima saídas ruidosas" }
 }

src/content/commonSkills/unlazy.json

@@ -19,5 +19,7 @@
     "en": "Too heavy for trivial edits or factual answers.",
     "pt": "Pesado demais para edições triviais ou respostas factuais."
   },
-  "source": "https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md"
+  "source": "https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md",
+  "label": { "en": "COMPLETE", "pt": "CONCLUIR" },
+  "tagline": { "en": "gates and evidence", "pt": "gates e evidências" }
 }

src/content/config.ts

@@ -235,12 +235,22 @@ const skillWorkflow = defineCollection({
 // render time; here it is embedded to match the GuideSelectorData
 // contract. If the URL changes, both this entry and the matching
 // `skillSources/<id>.json` must be updated.
+//
+// `label` and `tagline` are the selector *button*'s two lines and are
+// distinct from `kind` and `use`, which belong to the detail panel:
+// ponytail's button reads "SIMPLIFY" / "minimum code that holds" while its
+// panel reads "SIMPLIFICATION INSTINCT" and a paragraph of prose. They are
+// not in `interactiveCopy` — the English lives in the `full-guide/index.html`
+// markup and the Portuguese in `translations.pt` — so task 05b had nothing
+// to migrate them from and the page rendered `kind`/`use` on the buttons.
 const commonSkills = defineCollection({
   type: 'data',
   schema: z.object({
     id: z.string(),
     number: z.string(),
     kind: localized,
+    label: localized,
+    tagline: localized,
     title: z.string(),
     rule: localized,
     use: localized,

src/content/rules/copy.json

@@ -56,7 +56,6 @@
     "skillReadSkill": "READ SKILL ↗",
     "skillReadSkillPt": "LER SKILL ↗",
     "skillTriggerLabel": "TRIGGER",
-    "skillTriggerLabelPt": "GATILHO",
     "copyStatus": "Prompt copied.",
     "copyStatusPt": "Prompt copiado.",
     "copyFallback": "Select the text manually.",
@@ -118,8 +117,7 @@
     "stageOpenSourcePt": "ABRIR FONTE ↗",
     "skillReadSkill": "LER SKILL ↗",
     "skillReadSkillPt": "LER SKILL ↗",
-    "skillTriggerLabel": "TRIGGER",
-    "skillTriggerLabelPt": "GATILHO",
+    "skillTriggerLabel": "GATILHO",
     "copyStatus": "Prompt copied.",
     "copyStatusPt": "Prompt copiado.",
     "copyFallback": "Select the text manually.",

src/pages/index.astro

@@ -84,10 +84,8 @@ const cards = data.cards ?? [];
     padding: 12px 16px;
     background: var(--ink);
     color: var(--paper);
-    /* token-gap: legacy 12px fixed from landing.css; --step-0 is 11px;
-       no token matches 12px; owner design-system-keeper */
     font:
-      700 12px ui-monospace,
+      700 var(--step-12) ui-monospace,
       monospace;
     letter-spacing: 0.06em;
     text-decoration: none;
@@ -104,8 +102,7 @@ const cards = data.cards ?? [];
 
   .guide-launch span {
     color: var(--gold);
-    /* token-gap: legacy 22px arrow from landing.css; no --step-* covers 22px; owner design-system-keeper */
-    font-size: 22px;
+    font-size: var(--step-22);
     line-height: 0;
   }
 
@@ -121,25 +118,19 @@ const cards = data.cards ?? [];
 
   .landing-note span {
     color: var(--red);
-    /* token-gap: legacy 11px monospace eyebrow (no DM Mono in stack);
-       --step-0 also resolves to 11px but with different font weight;
-       preserved verbatim from landing.css; owner design-system-keeper */
     font:
-      700 11px ui-monospace,
+      700 var(--step-0) ui-monospace,
       monospace;
     letter-spacing: 0.1em;
   }
 
   .landing-note strong {
-    /* token-gap: clamp(22px,3.2vw,42px) is specific to this strip; no
-       --step-* ramp covers both endpoints; owner design-system-keeper */
-    font-size: clamp(22px, 3.2vw, 42px);
+    font-size: var(--step-4);
     line-height: 1.08;
     letter-spacing: -0.04em;
   }
 
-  /* token-gap: 520px collapse from landing.css (was bottom-bar threshold); owner design-system-keeper */
-  @media (max-width: 520px) {
+  @media (max-width: 560px) {
     .landing-note {
       grid-template-columns: 1fr;
       gap: 9px;

src/styles/tokens.css

@@ -20,8 +20,106 @@
   --step-6: clamp(36px, 5vw, 65px);
   --step-5: clamp(24px, 3vw, 38px);
   --step-4: clamp(22px, 3vw, 36px);
+  --step-48: 48px;
+  --step-32: 32px;
+  --step-30: 30px;
+  --step-25: 25px;
+  --step-24: 24px;
+  --step-22: 22px;
+  --step-20: 20px;
+  --step-18: 18px;
+  --step-17: 17px;
+  --step-16: 16px;
   --step-1: 15px;
+  --step-14: 14px;
+  --step-13: 13px;
+  --step-12: 12px;
   --step-0: 11px;
+  --step-00: 10px;
+  --step-09: 9px;
+  --step-08: 8px;
+  --step-42: 42px;
+  --step-code: 10.5px;
+  --step-exercise-title: clamp(20px, 2.6vw, 34px);
+  --step-skill-title: clamp(30px, 4vw, 60px);
+  --step-pull-quote: clamp(20px, 2.5vw, 34px);
+  --step-display-wide: clamp(150px, 7vw, 220px);
+
+  /* On-dark palette. These are the values the source actually uses on the
+     --ink and --accent surfaces. They are not near-misses of the palette
+     above: --muted is a dark-on-light value and is illegible on --ink, and
+     --paper is warm where the text over --accent is violet-tinted. Each one
+     is the exact hex the legacy stylesheets ship. */
+  --ink-muted: #9eb0bb;
+  --ink-line: #b8c8d2;
+  --ink-code: #c9d5dc;
+  --accent-paper: #eceaf5;
+  --accent-paper-active: #f0eef8;
+  --accent-surface: #5b7098;
+
+  /* Overlays. The percentages are the exact 8-bit alphas the source ships
+     (#ffffff24, #ffffff3a, #ffffff40, #ffffff50), not rounded to whole
+     numbers — the names are rounded, the values are not. */
+  --white-14: rgb(255 255 255 / 14.1176%);
+  --white-23: rgb(255 255 255 / 22.7451%);
+  --white-25: rgb(255 255 255 / 25.098%);
+  --white-31: rgb(255 255 255 / 31.3725%);
+
+  /* Full-guide supporting surfaces. These preserve the exact values from the
+     legacy responsive layer; they are deliberately not substitutions from the
+     light-background palette. */
+  --guide-toolbar-text: #9eabb4;
+  --guide-panel-blue: #244760;
+  --guide-worker-detail-surface: #edf0f1;
+  --guide-tree-rule: #41596b;
+  --guide-code-surface: #0b1b27;
+  --guide-tree-shadow: #081621;
+  --guide-live: #80c69a;
+  --guide-live-glow: #80c69a22;
+  --guide-grid-line: #ffffff06;
+  --guide-tree-border: #527085;
+  --guide-tree-node: #112a3b;
+  --guide-tree-node-label: #8ca1af;
+  --guide-tree-node-muted: #a9b6be;
+  --guide-tree-node-hover: #1c425a;
+  --guide-gold-glow: #efc76b18;
+  --guide-tree-detail-text: #aebbc3;
+  --guide-phase-hover: #e8ecee;
+  --guide-meter-border: #496274;
+  --guide-route-copy: #b5c0c7;
+  --guide-skill-hover: #315f80;
+  --guide-skill-copy: #c4cdd3;
+  --guide-skill-index-hover: #eceff0;
+  --guide-provider-copy: #cbd9e1;
+  --guide-provider-detail-copy: #b7c7d1;
+  --guide-provider-rule: #ffffff2b;
+  --guide-effort-surface: #18364a;
+  --guide-effort-copy: #aebfc9;
+  --guide-effort-active: #e9ecee;
+  --guide-effort-active-copy: #eeedf6;
+  --guide-builder-surface: #132b3b;
+  --guide-builder-rule: #ffffff30;
+  --guide-builder-action-copy: #d5dde2;
+  --guide-builder-copy: #a9bcc8;
+  --guide-builder-border: #344c5d;
+  --guide-builder-live-glow: #80c69a20;
+  --guide-builder-code: #bed0dc;
+  --guide-builder-grid: #ffffff05;
+  --guide-verify-rule: #ffffff1f;
+  --guide-verify-copy: #bfccd4;
+  --guide-verify-code: #0f2230;
+  --guide-verify-code-border: #2a4150;
+  --guide-accent-rule: #ffffff42;
+  --guide-accent-note: #6c6898;
+  --guide-accent-copy: #f1f0f7;
+  --guide-install-rule: #ffffff2d;
+  --guide-install-copy: #b9c8d1;
+  --guide-control-border: #ffffff50;
+  --guide-exercise-copy: #afbec7;
+  --guide-prompt-surface: #19364a;
+  --guide-prompt-enhanced: #596f9a;
+  --guide-prompt-rule: #ffffff32;
+  --guide-prompt-enhanced-copy: #e5e3ef;
 
   /* Breakpoints */
   --bp-sm: 560px;