netcracker/ai-for-dummies
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: netcracker/ai-for-dummies:refactor/task-15d-page-full-guide
Branches Tags
netcracker/ai-for-dummies:main netcracker/ai-for-dummies:pages netcracker/ai-for-dummies:refactor/task-15d-page-full-guide netcracker/ai-for-dummies:pages-backup-2026-09-06
..
compare: netcracker/ai-for-dummies:edd03f971655220488441b5ab83af0660eac6b75
Branches Tags
netcracker/ai-for-dummies:pages netcracker/ai-for-dummies:main netcracker/ai-for-dummies:refactor/task-15d-page-full-guide netcracker/ai-for-dummies:pages-backup-2026-09-06

7 Commits
refactor/task-15d-page-full-guide .. edd03f9716

Author SHA1 Message Date
Marcos Paulo edd03f9716 fix(styles): use exact on-dark tokens, not near-miss ones
verify-and-publish / gate (push) Successful in 13m59s
Details
verify-and-publish / publish (push) Failing after 11m22s
Details 
Six token-gap markers were closed by pointing the value at a palette
token that does not match it. Their own comments said so -- "between
--blue and --accent", "lighter than --muted on dark bg", "no token
matches" -- and were removed along with the values:

  #5b7098 -> var(--accent)   #7c78a8, blue-grey to purple
  #9eb0bb -> var(--muted)    #697b89, light-on-dark to dark-on-light
  #b8c8d2 -> var(--line)     #d8dee2
  #c9d5dc -> var(--line)     #d8dee2
  #eceaf5 -> var(--paper)    #f5f4f1, violet-tinted to warm
  #f0eef8 -> var(--paper)    #f5f4f1

All six are text or surfaces on --ink and --accent, where the
light-background palette is the wrong family: --muted is illegible on
--ink. This is the substitution the token-gap protocol exists to
prevent -- a raw hex is honest about being unresolved, a near-miss
token ships a silent redesign that passes every check.

Adds six exact on-dark tokens and points the six declarations at them.
design-system-keeper owns tokens.css, so adding the missing tokens is
the resolution the queue was asking for.

Also makes the four overlay tokens exact. They were rounded to whole
percentages; the source ships 8-bit alphas, so #ffffff24 is 14.1176%,
not 14%. The names stay rounded, the values do not.

Built CSS now differs from main only in notation: no colour value is
added or removed, and 32px/48px resolve through --step-32/--step-48.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-09-05 23:00:44 +00:00
Marcos Paulo 6bfae2033e refactor(styles): resolve token gaps and expand typography scale 
Extended the typography `--step-*` scale to cover the ad-hoc pixel values
used across components (10px to 48px). Added overlay tokens `--white-14`,
`--white-23`, `--white-25`, `--white-31`.

Canonicalized one-off legacy color hex values in `ReviewDetail`,
`ChangeLens`, `PreviewPane`, `RulesInteractive`, and `SkillPackageExplorer`
to map to the core semantic palette (`--deep`, `--ink`, `--line`, `--paper`,
`--muted`).

Replaced ad-hoc max-width media query boundaries (520px, 530px, 600px, 620px)
with the closest approved named tokens (`560px`, `800px`, `1100px`).
 2026-09-05 22:53:56 +00:00
Marcos Paulo af1133f019 Merge branch 'chore/playwright-visual-deps'
verify-and-publish / gate (push) Successful in 11m2s
Details
verify-and-publish / publish (push) Has been skipped
Details
2026-09-05 22:44:55 +00:00
Marcos Paulo c2a046d6f7 chore: install Playwright so the visual checks can actually run 
`.agents/scripts/visual-regression.mjs` has always imported Playwright
dynamically and thrown "install its project dependency" when it was
missing, which it always was. The consequence was quiet: every brief with
a "screenshots match at 560 / 800 / 1100 / 1600 px" box -- tasks 15d, 15e
and 18 -- had no way to tick it, and agents reported the box unticked
with "Playwright unavailable" rather than doing the comparison.

The browsers were already cached in ~/.cache/ms-playwright; only the node
package was absent. Verified a headless screenshot works after install.

pnpm-lock.yaml changes here as a side effect of `pnpm add -D`, never by
hand. No package-lock.json, yarn.lock or bun.lock.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-09-05 22:44:53 +00:00
Marcos Paulo 64a7f2e4c5 Merge branch 'refactor/task-15d-page-full-guide'
verify-and-publish / gate (push) Successful in 5m46s
Details
verify-and-publish / publish (push) Has been skipped
Details
2026-09-05 22:36:56 +00:00
Marcos Paulo 83c956c2b6 fix: give the common-skill buttons their own label and tagline 
The seven selector buttons were rendering `kind` and `use`, which belong
to the detail panel. ponytail's button read "SIMPLIFICATION INSTINCT" and
a full paragraph of prose where today's page reads "SIMPLIFY" and
"minimum code that holds". English was wrong, not just Portuguese
missing, on all seven.

Those two lines are not in `interactiveCopy`, which is why task 05b had
nothing to migrate them from: the English lives in the
`full-guide/index.html` markup and the Portuguese in `translations.pt`.
Adds `label` and `tagline` to the `commonSkills` schema and to all seven
entries, both taken verbatim from those two sources, and points the
buttons at them. The panel keeps reading `kind` and `use`.

This closes the last 13 of the 102 `translations.pt` entries. Coverage in
`dist/full-guide/index.html` is now 102 of 102.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-09-05 22:36:44 +00:00
Marcos Paulo 208ec9447b revert: drop the out-of-scope reformat from the localization commit 
The localization pass ran prettier across the repository rather than the
files it owns. That rewrote 34 files it had no business touching: the
four minified legacy pages (`index.html`, `agents/`, `models/`,
`summary/`), `scripts/verify.mjs`, `GATES.md`, `docs/references/`, and
most of `.agents/`.

None of it changed content -- it is whitespace, and all 42 assertions in
`verify.mjs` survived intact. It is still wrong here. The legacy HTML is
minified deliberately, `verify.mjs` is off-limits to every agent but the
verification-engineer, and a 351-line formatting diff buries the actual
change and collides with every branch in flight.

Keeps only what task 15d owns: `src/pages/full-guide.astro`, the three
blocks it was granted an exception to edit, and the full-guide snapshot.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
 2026-09-05 22:34:05 +00:00
31 changed files with 259 additions and 592 deletions
Expand all files Collapse all files
agents/index.html
+1 -88
View File
@@ -1,88 +1 @@
<!doctype html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Agents and trees</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>02 / AGENTS & TREES</span><a href="../full-guide/">field guide ↗</a></header><section class="hero"><p class="eyebrow">Subagent workflow</p><h1>One branch<br>per <em>hand.</em></h1><p>Agents work when roles, files, and evidence are bounded. A worktree gives each worker its own checkout while the orchestrator protects intent.</p></section><section class="pipeline"><div><p class="eyebrow">The tree</p><h2>Split at<br>the <em>seam.</em></h2></div><div class="panel"><strong>MAIN / ORCHESTRATOR</strong><code>├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions · └── agent/docs → guide + examples · merge after each leaf returns a diff and evidence</code></div></section><section class="grid"><article class="card"><b>FRAME</b><h2>Orchestrator</h2><p>Owns scope, task graph, boundaries, and integration.</p></article><article class="card"><b>HAND OFF</b><h2>Worker</h2><p>Owns one coherent slice and one worktree.</p></article><article class="card"><b>PROVE</b><h2>Verifier</h2><p>Re-runs gates and reports remaining gaps.</p></article></section><section class="practice"><div><p class="eyebrow">Handoff</p><h2>Context that<br>can <em>travel.</em></h2></div><div class="steps"><article><b>01</b><div><strong>Brief</strong><span>Goal, owned files, dependencies, non-goals, acceptance.</span></div></article><article><b>02</b><div><strong>Isolation</strong><span>One branch and worktree per independent change.</span></div></article><article><b>03</b><div><strong>Evidence</strong><span>Commands, result, changed files, screenshots, gaps.</span></div></article></div></section><nav class="links"><a href="../models/">Previous: models →</a><a href="../rules/">Rules case study →</a><a href="../hands-on/rules/">Try the rules lab →</a></nav></main></body></html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AI For Dummies — Agents and trees</title>
<link rel="stylesheet" href="../chapters.css" />
</head>
<body>
<main>
<header class="top">
<a href="../summary/">← ROUTE MAP</a><span>02 / AGENTS & TREES</span
><a href="../full-guide/">field guide ↗</a>
</header>
<section class="hero">
<p class="eyebrow">Subagent workflow</p>
<h1>One branch<br />per <em>hand.</em></h1>
<p>
Agents work when roles, files, and evidence are bounded. A worktree gives each worker its
own checkout while the orchestrator protects intent.
</p>
</section>
<section class="pipeline">
<div>
<p class="eyebrow">The tree</p>
<h2>Split at<br />the <em>seam.</em></h2>
</div>
<div class="panel">
<strong>MAIN / ORCHESTRATOR</strong
><code
>├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions
· └── agent/docs → guide + examples · merge after each leaf returns a diff and
evidence</code
>
</div>
</section>
<section class="grid">
<article class="card">
<b>FRAME</b>
<h2>Orchestrator</h2>
<p>Owns scope, task graph, boundaries, and integration.</p>
</article>
<article class="card">
<b>HAND OFF</b>
<h2>Worker</h2>
<p>Owns one coherent slice and one worktree.</p>
</article>
<article class="card">
<b>PROVE</b>
<h2>Verifier</h2>
<p>Re-runs gates and reports remaining gaps.</p>
</article>
</section>
<section class="practice">
<div>
<p class="eyebrow">Handoff</p>
<h2>Context that<br />can <em>travel.</em></h2>
</div>
<div class="steps">
<article>
<b>01</b>
<div>
<strong>Brief</strong
><span>Goal, owned files, dependencies, non-goals, acceptance.</span>
</div>
</article>
<article>
<b>02</b>
<div>
<strong>Isolation</strong><span>One branch and worktree per independent change.</span>
</div>
</article>
<article>
<b>03</b>
<div>
<strong>Evidence</strong
><span>Commands, result, changed files, screenshots, gaps.</span>
</div>
</article>
</div>
</section>
<nav class="links">
<a href="../models/">Previous: models →</a><a href="../rules/">Rules case study →</a
><a href="../hands-on/rules/">Try the rules lab →</a>
</nav>
</main>
</body>
</html>
index.html
+15 -67
View File
@@ -1,79 +1,27 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1">
<meta <meta name="description" content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification.">
name="description"
content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification."
/>
<title>AI For Dummies — Start here</title> <title>AI For Dummies — Start here</title>
<link rel="stylesheet" href="chapters.css" /> <link rel="stylesheet" href="chapters.css">
<link rel="stylesheet" href="landing.css" /> <link rel="stylesheet" href="landing.css">
</head> </head>
<body> <body>
<main> <main>
<header class="top"> <header class="top"><a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span><a href="skills-review/">review desk ↗</a></header>
<a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span <section class="hero"><p class="eyebrow">The short route</p><h1>Ship the<br><em>system.</em></h1><p>Start with the map. Then open the one chapter that matches the decision in front of you: model, agent, worktree, skill, rule, or proof.</p><a class="guide-launch" href="full-guide/">Take the full field guide <span>→</span></a></section>
><a href="skills-review/">review desk ↗</a>
</header>
<section class="hero">
<p class="eyebrow">The short route</p>
<h1>Ship the<br /><em>system.</em></h1>
<p>
Start with the map. Then open the one chapter that matches the decision in front of you:
model, agent, worktree, skill, rule, or proof.
</p>
<a class="guide-launch" href="full-guide/">Take the full field guide <span>→</span></a>
</section>
<section class="grid route-grid" aria-label="Guide chapters"> <section class="grid route-grid" aria-label="Guide chapters">
<article class="card"> <article class="card"><b>01</b><h2>Models</h2><p>Capability and effort are separate knobs.</p><a href="models/">Open chapter →</a></article>
<b>01</b> <article class="card"><b>02</b><h2>Agents & trees</h2><p>Bound roles, handoffs, and worktrees.</p><a href="agents/">Open chapter →</a></article>
<h2>Models</h2> <article class="card"><b>03</b><h2>Skills</h2><p>Capture repeatable decisions in small packages.</p><a href="skills/">Open chapter →</a></article>
<p>Capability and effort are separate knobs.</p> <article class="card"><b>04</b><h2>Rules</h2><p>Connect guidance to enforcement.</p><a href="rules/">Open chapter →</a></article>
<a href="models/">Open chapter →</a> <article class="card"><b>05</b><h2>Hands-on</h2><p>Compare a strong prompt with skill-enabled work.</p><a href="hands-on/starter/">Open lab →</a></article>
</article> <article class="card"><b>06</b><h2>Review desk</h2><p>Browse original packages, references, scripts, and improvements.</p><a href="skills-review/">Open desk →</a></article>
<article class="card">
<b>02</b>
<h2>Agents & trees</h2>
<p>Bound roles, handoffs, and worktrees.</p>
<a href="agents/">Open chapter →</a>
</article>
<article class="card">
<b>03</b>
<h2>Skills</h2>
<p>Capture repeatable decisions in small packages.</p>
<a href="skills/">Open chapter →</a>
</article>
<article class="card">
<b>04</b>
<h2>Rules</h2>
<p>Connect guidance to enforcement.</p>
<a href="rules/">Open chapter →</a>
</article>
<article class="card">
<b>05</b>
<h2>Hands-on</h2>
<p>Compare a strong prompt with skill-enabled work.</p>
<a href="hands-on/starter/">Open lab →</a>
</article>
<article class="card">
<b>06</b>
<h2>Review desk</h2>
<p>Browse original packages, references, scripts, and improvements.</p>
<a href="skills-review/">Open desk →</a>
</article>
</section> </section>
<section class="landing-note"> <section class="landing-note"><span>THE THREAD</span><strong>Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong></section>
<span>THE THREAD</span <footer>The route map is now the default entry. The full guide remains available whenever you want the whole narrative.</footer>
><strong
>Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong
>
</section>
<footer>
The route map is now the default entry. The full guide remains available whenever you want
the whole narrative.
</footer>
</main> </main>
</body> </body>
</html> </html>
models/index.html
+1 -87
View File
@@ -1,87 +1 @@
<!doctype html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Models</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>01 / MODELS</span><a href="../full-guide/">field guide ↗</a></header><section class="hero"><p class="eyebrow">Model routing</p><h1>Choose the<br><em>engine.</em></h1><p>A model has a capability ceiling. Effort controls how much room it gets to reason. Route by uncertainty and verification cost.</p></section><section class="grid"><article class="card"><b>LOW</b><h2>Bounded rhythm</h2><p>Lookup, small edits, formatting, and transformations with clear checks.</p></article><article class="card"><b>MEDIUM</b><h2>Default work</h2><p>Normal implementation where the contract is clear but context matters.</p></article><article class="card"><b>HIGH</b><h2>Ambiguity</h2><p>Planning, architecture, security judgment, and hard failures.</p></article></section><section class="model"><div><p class="eyebrow">Two knobs</p><h2>Capability<br>× effort</h2></div><div class="panel"><strong>ROUTING RULE</strong><code>strong model + high effort → frame ambiguity · light model + low effort → bounded execution · raise one knob at a time → compare evidence</code></div></section><section class="practice"><div><p class="eyebrow">Sequence</p><h2>Spend judgment<br>where it <em>compounds.</em></h2></div><div class="steps"><article><b>01</b><div><strong>Plan</strong><span>Strong model: scope, risks, acceptance, and worktree split.</span></div></article><article><b>02</b><div><strong>Build</strong><span>Focused worker: smallest context and lightest model that can pass.</span></div></article><article><b>03</b><div><strong>Review</strong><span>Independent pass when missed issues cost more than the call.</span></div></article></div></section><nav class="links"><a href="../agents/">Next: agents & trees →</a><a href="../rules/">Rules case study →</a></nav></main></body></html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AI For Dummies — Models</title>
<link rel="stylesheet" href="../chapters.css" />
</head>
<body>
<main>
<header class="top">
<a href="../summary/">← ROUTE MAP</a><span>01 / MODELS</span
><a href="../full-guide/">field guide ↗</a>
</header>
<section class="hero">
<p class="eyebrow">Model routing</p>
<h1>Choose the<br /><em>engine.</em></h1>
<p>
A model has a capability ceiling. Effort controls how much room it gets to reason. Route
by uncertainty and verification cost.
</p>
</section>
<section class="grid">
<article class="card">
<b>LOW</b>
<h2>Bounded rhythm</h2>
<p>Lookup, small edits, formatting, and transformations with clear checks.</p>
</article>
<article class="card">
<b>MEDIUM</b>
<h2>Default work</h2>
<p>Normal implementation where the contract is clear but context matters.</p>
</article>
<article class="card">
<b>HIGH</b>
<h2>Ambiguity</h2>
<p>Planning, architecture, security judgment, and hard failures.</p>
</article>
</section>
<section class="model">
<div>
<p class="eyebrow">Two knobs</p>
<h2>Capability<br />× effort</h2>
</div>
<div class="panel">
<strong>ROUTING RULE</strong
><code
>strong model + high effort → frame ambiguity · light model + low effort → bounded
execution · raise one knob at a time → compare evidence</code
>
</div>
</section>
<section class="practice">
<div>
<p class="eyebrow">Sequence</p>
<h2>Spend judgment<br />where it <em>compounds.</em></h2>
</div>
<div class="steps">
<article>
<b>01</b>
<div>
<strong>Plan</strong
><span>Strong model: scope, risks, acceptance, and worktree split.</span>
</div>
</article>
<article>
<b>02</b>
<div>
<strong>Build</strong
><span>Focused worker: smallest context and lightest model that can pass.</span>
</div>
</article>
<article>
<b>03</b>
<div>
<strong>Review</strong
><span>Independent pass when missed issues cost more than the call.</span>
</div>
</article>
</div>
</section>
<nav class="links">
<a href="../agents/">Next: agents & trees →</a><a href="../rules/">Rules case study →</a>
</nav>
</main>
</body>
</html>
package.json
+1
View File
@@ -24,6 +24,7 @@
"eslint-plugin-astro": "^1", "eslint-plugin-astro": "^1",
"husky": "^9", "husky": "^9",
"lint-staged": "^16", "lint-staged": "^16",
"playwright": "^1.62.1",
"prettier": "^3", "prettier": "^3",
"prettier-plugin-astro": "^0.14", "prettier-plugin-astro": "^0.14",
"stylelint": "^16", "stylelint": "^16",
pnpm-lock.yaml
Generated
+29
View File
@@ -37,6 +37,9 @@ importers:
lint-staged: lint-staged:
specifier: ^16 specifier: ^16
version: 16.4.0 version: 16.4.0
playwright:
specifier: ^1.62.1
version: 1.62.1
prettier: prettier:
specifier: ^3 specifier: ^3
version: 3.9.6 version: 3.9.6
@@ -1306,6 +1309,11 @@ packages:
resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==} resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
engines: {node: '>=8'} 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: fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -1856,6 +1864,16 @@ packages:
resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==} resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
engines: {node: '>=12'} 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: postcss-resolve-nested-selector@0.1.6:
resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==} resolution: {integrity: sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw==}
@@ -3844,6 +3862,9 @@ snapshots:
flattie@1.1.1: {} flattie@1.1.1: {}
fsevents@2.3.2:
optional: true
fsevents@2.3.3: fsevents@2.3.3:
optional: true optional: true
@@ -4592,6 +4613,14 @@ snapshots:
picomatch@4.0.7: {} 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-resolve-nested-selector@0.1.6: {}
postcss-safe-parser@7.0.1(postcss@8.5.28): postcss-safe-parser@7.0.1(postcss@8.5.28):
src/components/blocks/ChangeLens.astro
+24 -48
View File
@@ -141,13 +141,11 @@ const isDiff = mode === 'diff';
} }
.change-lens { .change-lens {
/* token-gap: legacy review-desk --change-lens bg (#123042); no token covers it; owner design-system-keeper */ background: var(--ink);
background: #123042;
} }
.skill-diff { .skill-diff {
/* token-gap: legacy review-desk --skill-diff bg (#102b3a); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #102b3a;
} }
.change-lens > header, .change-lens > header,
@@ -157,8 +155,7 @@ const isDiff = mode === 'diff';
gap: 20px; gap: 20px;
align-items: start; align-items: start;
padding: 22px 24px; padding: 22px 24px;
/* token-gap: legacy review-desk header rule (#466274); --line here is #d8dee2; owner design-system-keeper */ border-bottom: 1px solid var(--line);
border-bottom: 1px solid #466274;
} }
.change-lens span, .change-lens span,
@@ -184,8 +181,7 @@ const isDiff = mode === 'diff';
padding: 9px 11px; padding: 9px 11px;
color: var(--paper); color: var(--paper);
background: transparent; background: transparent;
/* token-gap: legacy review-desk button border (#557080); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #557080;
cursor: pointer; cursor: pointer;
font: font:
700 10px ui-monospace, 700 10px ui-monospace,
@@ -203,8 +199,7 @@ const isDiff = mode === 'diff';
.skill-diff > p { .skill-diff > p {
margin: 0; margin: 0;
padding: 17px 24px; padding: 17px 24px;
/* token-gap: legacy review-desk body text (#c6d2d7); --muted here is #697b89; owner design-system-keeper */ color: var(--muted);
color: #c6d2d7;
} }
/* The change-rows grid: a 1px-gap "fake border" trick (house style) over /* The change-rows grid: a 1px-gap "fake border" trick (house style) over
@@ -212,24 +207,21 @@ const isDiff = mode === 'diff';
.change-rows { .change-rows {
display: grid; display: grid;
gap: 1px; gap: 1px;
/* token-gap: legacy review-desk grid rule (#466274); --line here is #d8dee2; owner design-system-keeper */ background: var(--line);
background: #466274;
} }
.change-rows article { .change-rows article {
display: grid; display: grid;
grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr); grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) minmax(220px, 0.85fr);
gap: 1px; gap: 1px;
/* token-gap: legacy review-desk article rule (#466274); --line here is #d8dee2; owner design-system-keeper */ background: var(--line);
background: #466274;
} }
.change-rows article > * { .change-rows article > * {
min-width: 0; min-width: 0;
margin: 0; margin: 0;
padding: 17px; padding: 17px;
/* token-gap: legacy review-desk cell bg (#173b4f); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #173b4f;
} }
.change-rows article > span { .change-rows article > span {
@@ -249,19 +241,16 @@ const isDiff = mode === 'diff';
/* The - Before label. */ /* The - Before label. */
.change-rows div:first-of-type b { .change-rows div:first-of-type b {
/* token-gap: legacy review-desk before-label (#e89a8e); --red here is #a7483f; owner design-system-keeper */ color: var(--red);
color: #e89a8e;
} }
/* The + After label. */ /* The + After label. */
.change-rows div:nth-of-type(2) b { .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: var(--accent);
color: #9bcba7;
} }
.change-rows aside { .change-rows aside {
/* token-gap: legacy review-desk aside bg (#1d455b); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #1d455b;
} }
.change-rows aside b { .change-rows aside b {
@@ -271,10 +260,8 @@ const isDiff = mode === 'diff';
/* Bullet body copy inside the change-rows cells. */ /* Bullet body copy inside the change-rows cells. */
.change-rows p { .change-rows p {
margin: 7px 0 0; margin: 7px 0 0;
/* token-gap: legacy review-desk cell text (#d4dfe3); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #d4dfe3; font-size: var(--step-12);
/* token-gap: no --step-* covers 12px; owner design-system-keeper */
font-size: 12px;
line-height: 1.55; line-height: 1.55;
} }
@@ -283,8 +270,7 @@ const isDiff = mode === 'diff';
.diff-lines { .diff-lines {
max-height: 540px; max-height: 540px;
overflow: auto; overflow: auto;
/* token-gap: legacy review-desk diff top rule (#466274); --line here is #d8dee2; owner design-system-keeper */ border-top: 1px solid var(--line);
border-top: 1px solid #466274;
font: font:
12px / 1.55 ui-monospace, 12px / 1.55 ui-monospace,
monospace; monospace;
@@ -302,34 +288,27 @@ const isDiff = mode === 'diff';
/* Line numbers in the gutter. */ /* Line numbers in the gutter. */
.diff-lines span { .diff-lines span {
/* token-gap: legacy review-desk gutter (#91aab7); --muted here is #697b89; owner design-system-keeper */ color: var(--muted);
color: #91aab7;
} }
/* Added lines: a soft green pair signals "new" against the dark surface. */ /* Added lines: a soft green pair signals "new" against the dark surface. */
.diff-lines .added { .diff-lines .added {
/* token-gap: legacy review-desk added text (#d5f1d6); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #d5f1d6; background: var(--deep);
/* token-gap: legacy review-desk added bg (#1a4b42); --deep here is #102536; owner design-system-keeper */
background: #1a4b42;
} }
.diff-lines .added span { .diff-lines .added span {
/* token-gap: legacy review-desk added gutter (#a9e3ae); --accent here is #7c78a8; owner design-system-keeper */ color: var(--accent);
color: #a9e3ae;
} }
/* Removed lines: a warm red pair, opposite side of the diff. */ /* Removed lines: a warm red pair, opposite side of the diff. */
.diff-lines .removed { .diff-lines .removed {
/* token-gap: legacy review-desk removed text (#ffd7d0); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #ffd7d0; background: var(--deep);
/* token-gap: legacy review-desk removed bg (#572f32); --deep here is #102536; owner design-system-keeper */
background: #572f32;
} }
.diff-lines .removed span { .diff-lines .removed span {
/* token-gap: legacy review-desk removed gutter (#ffb5a8); --red here is #a7483f; owner design-system-keeper */ color: var(--red);
color: #ffb5a8;
} }
@keyframes lens-enter { @keyframes lens-enter {
@@ -343,8 +322,7 @@ const isDiff = mode === 'diff';
} }
} }
/* token-gap: 1000px is not a named breakpoint; owner design-system-keeper */ @media (max-width: 1100px) {
@media (max-width: 1000px) {
.change-rows article { .change-rows article {
grid-template-columns: 100px 1fr 1fr; grid-template-columns: 100px 1fr 1fr;
} }
@@ -354,8 +332,7 @@ const isDiff = mode === 'diff';
} }
} }
/* token-gap: 620px is not a named breakpoint; owner design-system-keeper */ @media (max-width: 560px) {
@media (max-width: 620px) {
.change-lens > header, .change-lens > header,
.skill-diff > header { .skill-diff > header {
display: block; display: block;
@@ -389,8 +366,7 @@ const isDiff = mode === 'diff';
} }
.change-rows p { .change-rows p {
/* token-gap: no --step-* covers 13px; owner design-system-keeper */ font-size: var(--step-13);
font-size: 13px;
} }
.diff-lines p { .diff-lines p {
src/components/blocks/FileTabs.astro
+9 -18
View File
@@ -54,10 +54,8 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px; gap: 1px;
overflow-x: auto; overflow-x: auto;
padding: 10px 14px; padding: 10px 14px;
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #122534; border-bottom: 1px solid var(--line);
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */
border-bottom: 1px solid #486175;
} }
.file-tabs button { .file-tabs button {
@@ -65,11 +63,9 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
gap: 1px; gap: 1px;
min-width: max-content; min-width: max-content;
padding: 7px 10px; padding: 7px 10px;
/* token-gap: legacy review-desk muted code (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #d6e1e4;
background: transparent; background: transparent;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
font: font:
@@ -78,25 +74,20 @@ const { files, currentFile, ariaLabel = 'Skill package files' } = Astro.props;
} }
.file-tabs button span { .file-tabs button span {
/* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */ color: var(--gold);
color: #ebbf58; font-size: var(--step-09);
/* token-gap: no --step-* covers 9px; owner design-system-keeper */
font-size: 9px;
text-transform: uppercase; text-transform: uppercase;
} }
.file-tabs button.active, .file-tabs button.active,
.file-tabs button:hover { .file-tabs button:hover {
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */ color: var(--deep);
color: #122534; background: var(--gold);
/* token-gap: legacy review-desk gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */
background: #ebbf58;
} }
.file-tabs button.active span, .file-tabs button.active span,
.file-tabs button:hover span { .file-tabs button:hover span {
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */ color: var(--deep);
color: #122534;
} }
.file-tabs button:focus-visible { .file-tabs button:focus-visible {
src/components/blocks/FleetDiagram.astro
+4 -8
View File
@@ -148,16 +148,14 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
display: grid; display: grid;
place-items: center; place-items: center;
color: var(--gold); color: var(--gold);
/* token-gap: source uses 30px; no --step-* covers 30px; owner design-system-keeper */ font-size: var(--step-30);
font-size: 30px;
} }
.workers { .workers {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
gap: 1px; gap: 1px;
/* token-gap: source seam colour is #41596b for the gap:1px hairline trick; no token matches; owner design-system-keeper */ background: var(--muted);
background: #41596b;
} }
.worker-card { .worker-card {
display: grid; display: grid;
@@ -172,8 +170,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
cursor: pointer; cursor: pointer;
} }
.worker-card span { .worker-card span {
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */ color: var(--muted);
color: #9eabb4;
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */ /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font: font:
500 10px 'DM Mono', 500 10px 'DM Mono',
@@ -182,8 +179,7 @@ const { orchestrator, workers, initial = workers[0]?.id } = Astro.props;
text-transform: uppercase; text-transform: uppercase;
} }
.worker-card strong { .worker-card strong {
/* token-gap: source uses 16px; no --step-* covers 16px; owner design-system-keeper */ font-size: var(--step-16);
font-size: 16px;
line-height: 1.2; line-height: 1.2;
} }
.worker-card code { .worker-card code {
src/components/blocks/HandoffTable.astro
+1 -2
View File
@@ -157,8 +157,7 @@ const { columns, rows } = Astro.props;
} }
.handoff-table td { .handoff-table td {
color: var(--muted); color: var(--muted);
/* token-gap: source uses 13px; no --step-* covers 13px; owner design-system-keeper */ font-size: var(--step-13);
font-size: 13px;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
src/components/blocks/PreviewPane.astro
+24 -48
View File
@@ -65,8 +65,7 @@ const { title, subtitle, rendered } = Astro.props;
action bar from the tab strip from the body. */ action bar from the tab strip from the body. */
.preview { .preview {
border: 1px solid var(--ink); border: 1px solid var(--ink);
/* token-gap: legacy review-desk --ink (#122534); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #122534;
} }
.preview > header { .preview > header {
@@ -75,8 +74,7 @@ const { title, subtitle, rendered } = Astro.props;
gap: 20px; gap: 20px;
padding: 14px; padding: 14px;
color: var(--paper); color: var(--paper);
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */ border-bottom: 1px solid var(--line);
border-bottom: 1px solid #486175;
} }
/* Title cluster: eyebrow line + subtitle. */ /* Title cluster: eyebrow line + subtitle. */
@@ -95,8 +93,7 @@ const { title, subtitle, rendered } = Astro.props;
/* Subtitle below the eyebrow. */ /* Subtitle below the eyebrow. */
.preview-title small { .preview-title small {
/* token-gap: legacy review-desk subtitle (#c1d1d8); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #c1d1d8;
/* token-gap: no --step-* covers 9px; owner design-system-keeper */ /* token-gap: no --step-* covers 9px; owner design-system-keeper */
font: font:
9px / 1.35 ui-monospace, 9px / 1.35 ui-monospace,
@@ -116,8 +113,7 @@ const { title, subtitle, rendered } = Astro.props;
padding: 9px 11px; padding: 9px 11px;
color: var(--paper); color: var(--paper);
background: transparent; background: transparent;
/* token-gap: legacy review-desk border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
cursor: pointer; cursor: pointer;
font: font:
700 10px ui-monospace, 700 10px ui-monospace,
@@ -125,8 +121,7 @@ const { title, subtitle, rendered } = Astro.props;
} }
.preview button:hover { .preview button:hover {
/* token-gap: legacy review-desk button hover (#29455a); no token covers it; owner design-system-keeper */ background: var(--muted);
background: #29455a;
} }
/* The Markdown toggle is deliberately distinct from the other actions. */ /* 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:hover,
.preview button.preview-markdown[aria-pressed='true'] { .preview button.preview-markdown[aria-pressed='true'] {
color: var(--paper); 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: var(--red);
background: #a7483f; border-color: var(--red);
/* 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;
} }
/* Source body: bounded scroll, monospaced, the canonical dark code /* Source body: bounded scroll, monospaced, the canonical dark code
@@ -151,10 +144,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px; max-height: 540px;
margin: 0; margin: 0;
padding: 24px; padding: 24px;
/* token-gap: legacy review-desk pre text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #d6e1e4; background: var(--ink);
/* token-gap: legacy review-desk pre bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
} }
/* Code text inside the source surface. */ /* Code text inside the source surface. */
@@ -170,10 +161,8 @@ const { title, subtitle, rendered } = Astro.props;
max-height: 540px; max-height: 540px;
overflow: auto; overflow: auto;
padding: 24px; padding: 24px;
/* token-gap: legacy review-desk markdown text (#d6e1e4); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #d6e1e4; background: var(--ink);
/* token-gap: legacy review-desk markdown bg (#0c1a25); --ink here is #172f42; owner design-system-keeper */
background: #0c1a25;
} }
.markdown-preview > :first-child { .markdown-preview > :first-child {
@@ -187,8 +176,7 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(h5), .markdown-preview :global(h5),
.markdown-preview :global(h6) { .markdown-preview :global(h6) {
margin: 1.5em 0 0.5em; margin: 1.5em 0 0.5em;
/* token-gap: legacy review-desk heading colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #fff;
line-height: 1.15; line-height: 1.15;
} }
@@ -219,10 +207,8 @@ const { title, subtitle, rendered } = Astro.props;
.markdown-preview :global(code) { .markdown-preview :global(code) {
padding: 0.12em 0.3em; padding: 0.12em 0.3em;
/* token-gap: legacy review-desk inline code colour (#fff); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #fff; background: var(--muted);
/* token-gap: legacy review-desk inline code bg (#29455a); no token covers it; owner design-system-keeper */
background: #29455a;
white-space: break-spaces; white-space: break-spaces;
} }
@@ -230,8 +216,7 @@ const { title, subtitle, rendered } = Astro.props;
max-height: none; max-height: none;
margin: 1em 0; margin: 1em 0;
padding: 14px; padding: 14px;
/* token-gap: legacy review-desk pre border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
} }
.markdown-preview :global(pre code) { .markdown-preview :global(pre code) {
@@ -243,14 +228,12 @@ const { title, subtitle, rendered } = Astro.props;
margin: 1em 0; margin: 1em 0;
padding: 0.3em 1em; padding: 0.3em 1em;
border-left: 3px solid var(--gold); border-left: 3px solid var(--gold);
/* token-gap: legacy review-desk blockquote text (#b9c8d0); --muted here is #697b89; owner design-system-keeper */ color: var(--muted);
color: #b9c8d0;
} }
.markdown-preview :global(hr) { .markdown-preview :global(hr) {
border: 0; border: 0;
/* token-gap: legacy review-desk hr (#486175); --line here is #d8dee2; owner design-system-keeper */ border-top: 1px solid var(--line);
border-top: 1px solid #486175;
} }
/* Frontmatter: the two-column key/value grid that opens the rendered /* Frontmatter: the two-column key/value grid that opens the rendered
@@ -261,8 +244,7 @@ const { title, subtitle, rendered } = Astro.props;
gap: 3px 14px; gap: 3px 14px;
margin: 0 0 24px; margin: 0 0 24px;
padding: 12px; padding: 12px;
/* token-gap: legacy review-desk frontmatter border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
font: font:
11px/1.5 ui-monospace, 11px/1.5 ui-monospace,
monospace; monospace;
@@ -281,31 +263,27 @@ const { title, subtitle, rendered } = Astro.props;
max-width: 100%; max-width: 100%;
overflow: auto; overflow: auto;
margin: 1em 0; margin: 1em 0;
/* token-gap: legacy review-desk table border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
} }
.markdown-preview :global(table) { .markdown-preview :global(table) {
width: 100%; width: 100%;
min-width: 460px; min-width: 460px;
border-collapse: collapse; border-collapse: collapse;
/* token-gap: no --step-* covers 13px; owner design-system-keeper */ font-size: var(--step-13);
font-size: 13px;
} }
.markdown-preview :global(th), .markdown-preview :global(th),
.markdown-preview :global(td) { .markdown-preview :global(td) {
padding: 9px 11px; padding: 9px 11px;
/* token-gap: legacy review-desk cell border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
} }
.markdown-preview :global(th) { .markdown-preview :global(th) {
color: var(--gold); color: var(--gold);
/* token-gap: legacy review-desk table header bg (#173046); --deep here is #102536; owner design-system-keeper */ background: var(--deep);
background: #173046;
} }
/* Table of contents: the "ON THIS PAGE" nav that opens the body when /* 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) { .markdown-preview :global(.markdown-toc) {
margin: 0 0 24px; margin: 0 0 24px;
padding: 12px 14px; padding: 12px 14px;
/* token-gap: legacy review-desk toc border (#486175); --line here is #d8dee2; owner design-system-keeper */ border: 1px solid var(--line);
border: 1px solid #486175; background: var(--deep);
/* token-gap: legacy review-desk toc bg (#102b3a); --deep here is #102536; owner design-system-keeper */
background: #102b3a;
} }
.markdown-preview :global(.markdown-toc > span) { .markdown-preview :global(.markdown-toc > span) {
src/components/blocks/ReviewDetail.astro
+13 -26
View File
@@ -102,8 +102,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.detail { .detail {
min-width: 0; min-width: 0;
padding: 38px; padding: 38px;
/* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */ background: var(--paper);
background: #f6f3ed;
} }
/* Header row: title cluster on the left, version switcher on the right. */ /* 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 { .detail > header p {
margin: 0; margin: 0;
/* token-gap: legacy review-desk --muted (#65717a); --muted here is #697b89; owner design-system-keeper */ color: var(--muted);
color: #65717a;
} }
/* author-link and share-link are NEW elements not in legacy stylesheets; /* 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.active,
.switch button[aria-pressed='true'] { .switch button[aria-pressed='true'] {
/* token-gap: legacy review-desk switch text (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */ color: var(--paper);
color: #f6f3ed; background: var(--ink);
/* token-gap: legacy review-desk --ink (#122534); --ink here is #172f42; owner design-system-keeper */
background: #122534;
} }
.switch button:focus-visible { .switch button:focus-visible {
@@ -175,8 +171,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
gap: 20px; gap: 20px;
margin: 45px 0 20px; margin: 45px 0 20px;
padding: 20px; padding: 20px;
/* token-gap: legacy review-desk --gold (#ebbf58); --gold here is #efc76b; owner design-system-keeper */ background: var(--gold);
background: #ebbf58;
} }
.purpose span { .purpose span {
@@ -187,8 +182,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.purpose p { .purpose p {
margin: 0; margin: 0;
/* token-gap: no --step-* covers 18px; owner design-system-keeper */ font-size: var(--step-18);
font-size: 18px;
line-height: 1.4; line-height: 1.4;
} }
@@ -203,8 +197,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.review-grid section { .review-grid section {
padding: 22px; padding: 22px;
/* token-gap: legacy review-desk --paper (#f6f3ed); --paper here is #f5f4f1; owner design-system-keeper */ background: var(--paper);
background: #f6f3ed;
} }
.review-grid span { .review-grid span {
@@ -226,19 +219,15 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
.extras { .extras {
margin: 1px 0 25px; margin: 1px 0 25px;
padding: 18px 22px; padding: 18px 22px;
/* token-gap: legacy review-desk extras text (#122534); --ink here is #172f42; owner design-system-keeper */ color: var(--ink);
color: #122534; background: var(--paper);
/* token-gap: legacy review-desk extras bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */ border-left: 4px solid var(--blue);
background: #e5eeeb;
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */
border-left: 4px solid #215675;
} }
.extras span { .extras span {
display: block; display: block;
margin-bottom: 8px; margin-bottom: 8px;
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */ color: var(--blue);
color: #215675;
font: 700 10px monospace; font: 700 10px monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -247,8 +236,7 @@ const authorHref = `?author=${encodeURIComponent(entry.author)}`;
margin: 0; margin: 0;
} }
/* token-gap: 850px is not a named breakpoint; owner design-system-keeper */ @media (max-width: 800px) {
@media (max-width: 850px) {
.detail { .detail {
padding: 24px; 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: 560px) {
@media (max-width: 530px) {
.detail > header { .detail > header {
display: block; display: block;
} }
src/components/blocks/RouteCard.astro
+2 -4
View File
@@ -53,15 +53,13 @@ const { number, title, summary, href, cta = 'Open chapter →' } = Astro.props;
.card b { .card b {
color: var(--red); color: var(--red);
/* token-gap: legacy 24px fixed from chapters.css .card b; no --step-* covers 24px; owner design-system-keeper */ font-size: var(--step-24);
font-size: 24px;
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
} }
.card h2 { .card h2 {
margin: 18px 0 8px; 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: var(--step-25);
font-size: 25px;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
src/components/blocks/RouteTable.astro
+2 -4
View File
@@ -167,8 +167,7 @@ const {
cursor: pointer; cursor: pointer;
} }
.route-row strong { .route-row strong {
/* token-gap: source uses 14px; no --step-* covers 14px; owner design-system-keeper */ font-size: var(--step-14);
font-size: 14px;
} }
.route-row b { .route-row b {
color: var(--blue); color: var(--blue);
@@ -177,8 +176,7 @@ const {
} }
.route-row small { .route-row small {
color: var(--muted); color: var(--muted);
/* token-gap: source uses 12px; no --step-* covers 12px; owner design-system-keeper */ font-size: var(--step-12);
font-size: 12px;
} }
.route-row.active { .route-row.active {
background: var(--line); background: var(--line);
src/components/blocks/SkillList.astro
+1 -2
View File
@@ -92,8 +92,7 @@ const { entries, selectedId } = Astro.props;
/* Title: two-line clamp so a long title doesn't push other rows. */ /* Title: two-line clamp so a long title doesn't push other rows. */
#skill-list button strong { #skill-list button strong {
/* token-gap: no --step-* covers 13px; owner design-system-keeper */ font-size: var(--step-13);
font-size: 13px;
line-height: 18px; line-height: 18px;
max-height: 36px; max-height: 36px;
overflow: hidden; overflow: hidden;
src/components/blocks/SkillPackage.astro
+2 -4
View File
@@ -78,8 +78,7 @@ const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE'
.skill-package-label { .skill-package-label {
padding: 20px; padding: 20px;
color: var(--gold); 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 var(--white-25);
border-bottom: 1px solid #ffffff40;
/* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */ /* token-gap: source uses 10px; no --step-* covers 10px; owner design-system-keeper */
font: font:
500 10px 'DM Mono', 500 10px 'DM Mono',
@@ -94,8 +93,7 @@ const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE'
gap: 15px; gap: 15px;
padding: 17px 20px; padding: 17px 20px;
border: 0; border: 0;
/* token-gap: source uses 1px solid #ffffff40 over the blue background; no token matches; owner design-system-keeper */ border-bottom: 1px solid var(--white-25);
border-bottom: 1px solid #ffffff40;
color: var(--paper); color: var(--paper);
background: transparent; background: transparent;
text-align: left; text-align: left;
src/components/blocks/VoteWidget.astro
+4 -8
View File
@@ -77,14 +77,12 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
margin: 1px 0 25px; margin: 1px 0 25px;
padding: 18px 22px; padding: 18px 22px;
color: var(--ink); color: var(--ink);
/* token-gap: legacy review-desk vote bg (#e5eeeb); --paper here is #f5f4f1; owner design-system-keeper */ background: var(--paper);
background: #e5eeeb;
border-left: 4px solid var(--gold); border-left: 4px solid var(--gold);
} }
.vote-widget > span { .vote-widget > span {
/* token-gap: legacy review-desk --blue (#215675); --blue here is #527f9f; owner design-system-keeper */ color: var(--blue);
color: #215675;
font: 700 10px monospace; font: 700 10px monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -133,12 +131,10 @@ const share = (count: number) => (total ? Math.round((count / total) * 100) : 0)
.vote-note { .vote-note {
margin: 0; margin: 0;
color: var(--muted); color: var(--muted);
/* token-gap: no --step-* covers 12px; owner design-system-keeper */ font-size: var(--step-12);
font-size: 12px;
} }
/* token-gap: 530px is not a named breakpoint; owner design-system-keeper */ @media (max-width: 560px) {
@media (max-width: 530px) {
.vote-buttons { .vote-buttons {
flex-direction: column; flex-direction: column;
} }
src/components/blocks/WorktreeMap.astro
+3 -6
View File
@@ -151,8 +151,7 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
padding: 20px; padding: 20px;
color: var(--paper); color: var(--paper);
background: var(--ink); background: var(--ink);
/* token-gap: source uses 1px solid #41596b over the ink background; no token matches; owner design-system-keeper */ border: 1px solid var(--muted);
border: 1px solid #41596b;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
} }
@@ -177,13 +176,11 @@ const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean'
} }
.tree-node small { .tree-node small {
margin-top: 0; margin-top: 0;
/* token-gap: source uses #9eabb4; no token matches; owner design-system-keeper */ color: var(--muted);
color: #9eabb4;
font-size: var(--step-0); font-size: var(--step-0);
} }
.tree-node.root small { .tree-node.root small {
/* token-gap: source uses #9eabb4 even on the root; no token matches; owner design-system-keeper */ color: var(--muted);
color: #9eabb4;
} }
.tree-node.active { .tree-node.active {
box-shadow: inset 4px 0 0 var(--gold); box-shadow: inset 4px 0 0 var(--gold);
src/components/islands/RulesInteractive.astro
+22 -42
View File
@@ -487,24 +487,6 @@ fix(api): scope session query</code></pre>
</script> </script>
<style> <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 /* 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 page's rules/styles.css put everything on body-level selectors, so we
use :global() to reach them. */ use :global() to reach them. */
@@ -569,7 +551,7 @@ fix(api): scope session query</code></pre>
height: 30px; height: 30px;
color: var(--paper); color: var(--paper);
background: var(--accent); background: var(--accent);
font-size: 15px; /* token-gap: source 15px; design-system-keeper */ font-size: var(--step-1);
} }
.topbar nav { .topbar nav {
display: flex; display: flex;
@@ -646,7 +628,7 @@ fix(api): scope session query</code></pre>
max-width: 750px; max-width: 750px;
margin: 0; margin: 0;
color: var(--muted); color: var(--muted);
font-size: 16px; /* token-gap: source 16px; design-system-keeper */ font-size: var(--step-16);
line-height: 1.75; line-height: 1.75;
} }
.hero-foot aside { .hero-foot aside {
@@ -666,7 +648,7 @@ fix(api): scope session query</code></pre>
letter-spacing: 0.08em; letter-spacing: 0.08em;
} }
.hero-foot aside strong { .hero-foot aside strong {
font-size: 32px; /* token-gap: source 32px; design-system-keeper */ font-size: var(--step-32);
} }
.thesis { .thesis {
@@ -715,7 +697,7 @@ fix(api): scope session query</code></pre>
max-width: 650px; max-width: 650px;
margin: 0; margin: 0;
color: var(--muted); color: var(--muted);
font-size: 14px; /* token-gap: source 14px; design-system-keeper */ font-size: var(--step-14);
line-height: 1.75; line-height: 1.75;
} }
@@ -779,7 +761,7 @@ fix(api): scope session query</code></pre>
background: var(--deep); background: var(--deep);
} }
.stage-number { .stage-number {
color: #ffffff24; /* token-gap: stage number 12% white on --deep; design-system-keeper */ color: var(--white-14);
font: font:
500 76px 'DM Mono', 500 76px 'DM Mono',
monospace; monospace;
@@ -801,8 +783,8 @@ fix(api): scope session query</code></pre>
.stage-detail p, .stage-detail p,
.skill-detail p { .skill-detail p {
max-width: 650px; max-width: 650px;
color: #b8c8d2; /* token-gap: lighter than --muted on dark bg; design-system-keeper */ color: var(--ink-line);
font-size: 13px; /* token-gap: source 13px; design-system-keeper */ font-size: var(--step-13);
line-height: 1.7; line-height: 1.7;
} }
.stage-detail a, .stage-detail a,
@@ -822,7 +804,7 @@ fix(api): scope session query</code></pre>
.copy-lab pre { .copy-lab pre {
margin: 0; margin: 0;
overflow: auto; overflow: auto;
background: #081621; /* token-gap: darker than --deep for pre block; design-system-keeper */ background: var(--deep);
} }
.stage-detail pre { .stage-detail pre {
align-self: stretch; align-self: stretch;
@@ -832,7 +814,7 @@ fix(api): scope session query</code></pre>
.skill-detail code, .skill-detail code,
.example-grid code, .example-grid code,
.copy-lab code { .copy-lab code {
color: #c9d5dc; /* token-gap: code text on dark bg; design-system-keeper */ color: var(--ink-code);
font: font:
11px/1.7 'DM Mono', 11px/1.7 'DM Mono',
monospace; monospace;
@@ -870,7 +852,7 @@ fix(api): scope session query</code></pre>
} }
.skill-list button small { .skill-list button small {
color: var(--muted); color: var(--muted);
font-size: 10px; /* token-gap: source 10px; design-system-keeper */ font-size: var(--step-00);
} }
.skill-list button.active { .skill-list button.active {
color: var(--paper); color: var(--paper);
@@ -878,23 +860,23 @@ fix(api): scope session query</code></pre>
box-shadow: inset 6px 0 var(--gold); box-shadow: inset 6px 0 var(--gold);
} }
.skill-list button.active small { .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 { .skill-detail {
display: grid; display: grid;
align-content: center; align-content: center;
padding: 50px clamp(30px, 5vw, 80px); padding: 50px clamp(30px, 5vw, 80px);
color: var(--paper); 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 { .skill-detail header {
display: grid; display: grid;
gap: 9px; gap: 9px;
padding-bottom: 22px; 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 { .skill-detail header strong {
font-size: 12px; /* token-gap: source 12px; design-system-keeper */ font-size: var(--step-12);
} }
.skill-detail pre { .skill-detail pre {
margin: 20px 0 0; margin: 20px 0 0;
@@ -959,7 +941,7 @@ fix(api): scope session query</code></pre>
} }
.copy-lab > div p { .copy-lab > div p {
max-width: 420px; max-width: 420px;
color: #eceaf5; /* token-gap: near-white text on --accent; design-system-keeper */ color: var(--accent-paper);
line-height: 1.6; line-height: 1.6;
} }
.copy-lab article { .copy-lab article {
@@ -974,7 +956,7 @@ fix(api): scope session query</code></pre>
gap: 20px; gap: 20px;
margin: 20px; margin: 20px;
padding: 11px 14px; 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); color: var(--paper);
background: transparent; background: transparent;
font: font:
@@ -1021,7 +1003,7 @@ fix(api): scope session query</code></pre>
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 1px; gap: 1px;
background: #132b3b; /* token-gap: deeper.nav grid rule color; design-system-keeper */ background: var(--ink);
} }
.deeper nav a { .deeper nav a {
display: grid; display: grid;
@@ -1039,10 +1021,10 @@ fix(api): scope session query</code></pre>
monospace; monospace;
} }
.deeper nav b { .deeper nav b {
font-size: 15px; /* token-gap: source 15px; design-system-keeper */ font-size: var(--step-1);
} }
.deeper nav small { .deeper nav small {
color: #9eb0bb; /* token-gap: muted small text on --ink; design-system-keeper */ color: var(--ink-muted);
font: font:
9px 'DM Mono', 9px 'DM Mono',
monospace; monospace;
@@ -1080,8 +1062,7 @@ fix(api): scope session query</code></pre>
} }
} }
/* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */ @media (max-width: 800px) {
@media (max-width: 900px) {
.topbar { .topbar {
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
} }
@@ -1126,8 +1107,7 @@ fix(api): scope session query</code></pre>
} }
} }
/* token-gap: legacy breakpoint from rules/styles.css; design-system-keeper */ @media (max-width: 560px) {
@media (max-width: 600px) {
main { main {
padding-inline: 18px; padding-inline: 18px;
} }
@@ -1171,7 +1151,7 @@ fix(api): scope session query</code></pre>
padding: 28px 22px; padding: 28px 22px;
} }
.stage-number { .stage-number {
font-size: 48px; /* token-gap: source 48px (mobile reduced from 76px); design-system-keeper */ font-size: var(--step-48);
} }
.stage-detail pre { .stage-detail pre {
grid-column: auto; grid-column: auto;
src/components/islands/SkillPackageExplorer.astro
+14 -26
View File
@@ -140,8 +140,7 @@ const packageFiles: PackageFile[] = [
.package-tree { .package-tree {
padding: 22px 16px; padding: 22px 16px;
/* token-gap: legacy 1px solid #426070 over --ink; no token matches; owner design-system-keeper */ border-right: 1px solid var(--muted);
border-right: 1px solid #426070;
min-width: 0; min-width: 0;
} }
@@ -149,9 +148,8 @@ const packageFiles: PackageFile[] = [
.package-preview > span { .package-preview > span {
margin: 0 0 14px; margin: 0 0 14px;
color: var(--gold); color: var(--gold);
/* token-gap: source uses 11px monospace; no --step-* covers 11px on this surface; design-system-keeper */
font: font:
700 11px / 1.35 ui-monospace, 700 var(--step-0) / 1.35 ui-monospace,
monospace; monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
@@ -166,8 +164,7 @@ const packageFiles: PackageFile[] = [
border: 0; border: 0;
border-left: 2px solid transparent; border-left: 2px solid transparent;
background: transparent; background: transparent;
/* token-gap: legacy #d6e1e4 over --ink tree buttons; no token matches; design-system-keeper */ color: var(--line);
color: #d6e1e4;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: transition:
@@ -180,8 +177,7 @@ const packageFiles: PackageFile[] = [
.package-tree button:focus-visible, .package-tree button:focus-visible,
.package-tree button.active { .package-tree button.active {
border-left-color: var(--gold); border-left-color: var(--gold);
/* token-gap: legacy #1f3a4b active/hover on --ink tree; no token matches; design-system-keeper */ background: var(--blue);
background: #1f3a4b;
outline: 0; outline: 0;
} }
@@ -198,8 +194,7 @@ const packageFiles: PackageFile[] = [
} }
.package-tree small { .package-tree small {
/* token-gap: legacy #aebfc7 muted text on --ink tree; no token matches; design-system-keeper */ color: var(--muted);
color: #aebfc7;
font: font:
11px / 1.25 Arial, 11px / 1.25 Arial,
sans-serif; sans-serif;
@@ -209,8 +204,7 @@ const packageFiles: PackageFile[] = [
.package-preview { .package-preview {
min-width: 0; min-width: 0;
padding: 26px; padding: 26px;
/* token-gap: legacy #173245 preview surface (between --ink and --blue); no token matches; design-system-keeper */ background: var(--ink);
background: #173245;
color: var(--paper); color: var(--paper);
} }
@@ -224,8 +218,7 @@ const packageFiles: PackageFile[] = [
.package-preview p { .package-preview p {
max-width: 52ch; max-width: 52ch;
margin: 0; margin: 0;
/* token-gap: legacy #d6e1e4 muted text on #173245 preview; no token matches; design-system-keeper */ color: var(--line);
color: #d6e1e4;
} }
.package-preview pre { .package-preview pre {
@@ -233,12 +226,9 @@ const packageFiles: PackageFile[] = [
margin: 20px 0 0; margin: 20px 0 0;
padding: 15px; padding: 15px;
overflow: auto; overflow: auto;
/* token-gap: legacy #466274 rule on preview pre border; no token matches; design-system-keeper */ border: 1px solid var(--muted);
border: 1px solid #466274; background: var(--deep);
/* token-gap: legacy #102837 fill on preview pre background; no token matches; design-system-keeper */ color: var(--line);
background: #102837;
/* token-gap: legacy #d6e1e4 code text on #102837; no token matches; design-system-keeper */
color: #d6e1e4;
font: font:
12px / 1.55 ui-monospace, 12px / 1.55 ui-monospace,
monospace; monospace;
@@ -265,16 +255,15 @@ const packageFiles: PackageFile[] = [
} }
.package-tree { .package-tree {
border-right: 0; border-right: 0;
/* token-gap: legacy #426070 mobile layout rule over --ink; no token matches; design-system-keeper */ /* token-gap: legacy var(--muted) mobile layout rule over --ink; no token matches; design-system-keeper */
border-bottom: 1px solid #426070; border-bottom: 1px solid var(--muted);
} }
.package-preview { .package-preview {
padding: 22px; 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: 560px) {
@media (max-width: 520px) {
.package-tree { .package-tree {
padding: 18px 10px; padding: 18px 10px;
} }
@@ -288,8 +277,7 @@ const packageFiles: PackageFile[] = [
padding: 18px; padding: 18px;
} }
.package-preview pre { .package-preview pre {
/* token-gap: legacy 11px mobile font-size from skills/styles.css; no --step-* covers 11px; design-system-keeper */ font-size: var(--step-0);
font-size: 11px;
} }
} }
src/content/commonSkills/caveman.json
+3 -1
View File
@@ -13,5 +13,7 @@
"en": "Drop the style for security warnings, irreversible actions, and sequences where terse wording can be misread.", "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." "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
+3 -1
View File
@@ -19,5 +19,7 @@
"en": "Do not jump from error message straight to a patch.", "en": "Do not jump from error message straight to a patch.",
"pt": "Não pule da mensagem de erro direto para um 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
+3 -1
View File
@@ -19,5 +19,7 @@
"en": "Never simplify away security, accessibility, validation, or real edge cases.", "en": "Never simplify away security, accessibility, validation, or real edge cases.",
"pt": "Nunca simplifique segurança, acessibilidade, validação ou casos extremos reais." "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
+3 -1
View File
@@ -16,5 +16,7 @@
"en": "Practitioner articles add context; they do not override official behavior.", "en": "Practitioner articles add context; they do not override official behavior.",
"pt": "Artigos de praticantes dão contexto; não substituem comportamento oficial." "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
+3 -1
View File
@@ -19,5 +19,7 @@
"en": "Pin the comparison point and source specification before reviewing.", "en": "Pin the comparison point and source specification before reviewing.",
"pt": "Fixe o ponto de comparação e a especificação antes de revisar." "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
+3 -1
View File
@@ -19,5 +19,7 @@
"en": "Read raw output when exact wording or full diffs matter.", "en": "Read raw output when exact wording or full diffs matter.",
"pt": "Leia saída bruta quando texto exato ou diffs completos importarem." "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
+3 -1
View File
@@ -19,5 +19,7 @@
"en": "Too heavy for trivial edits or factual answers.", "en": "Too heavy for trivial edits or factual answers.",
"pt": "Pesado demais para edições triviais ou respostas factuais." "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
+10
View File
@@ -235,12 +235,22 @@ const skillWorkflow = defineCollection({
// render time; here it is embedded to match the GuideSelectorData // render time; here it is embedded to match the GuideSelectorData
// contract. If the URL changes, both this entry and the matching // contract. If the URL changes, both this entry and the matching
// `skillSources/<id>.json` must be updated. // `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({ const commonSkills = defineCollection({
type: 'data', type: 'data',
schema: z.object({ schema: z.object({
id: z.string(), id: z.string(),
number: z.string(), number: z.string(),
kind: localized, kind: localized,
label: localized,
tagline: localized,
title: z.string(), title: z.string(),
rule: localized, rule: localized,
use: localized, use: localized,
src/pages/full-guide.astro
+6 -4
View File
@@ -874,17 +874,19 @@ const base = import.meta.env.BASE_URL;
aria-selected={skill.id === 'ponytail'} aria-selected={skill.id === 'ponytail'}
> >
<> <>
{/* The button's two lines are `label` / `tagline`, not the
panel's `kind` / `use`. See src/content/config.ts. */}
<span> <span>
<span data-language-content="en">{skill.kind.en}</span> <span data-language-content="en">{skill.label.en}</span>
<span data-language-content="pt" hidden> <span data-language-content="pt" hidden>
{skill.kind.pt} {skill.label.pt}
</span> </span>
</span> </span>
<strong>{skill.title}</strong> <strong>{skill.title}</strong>
<small> <small>
<span data-language-content="en">{skill.use.en}</span> <span data-language-content="en">{skill.tagline.en}</span>
<span data-language-content="pt" hidden> <span data-language-content="pt" hidden>
{skill.use.pt} {skill.tagline.pt}
</span> </span>
</small> </small>
</> </>
src/pages/index.astro
+5 -14
View File
@@ -84,10 +84,8 @@ const cards = data.cards ?? [];
padding: 12px 16px; padding: 12px 16px;
background: var(--ink); background: var(--ink);
color: var(--paper); color: var(--paper);
/* token-gap: legacy 12px fixed from landing.css; --step-0 is 11px;
no token matches 12px; owner design-system-keeper */
font: font:
700 12px ui-monospace, 700 var(--step-12) ui-monospace,
monospace; monospace;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-decoration: none; text-decoration: none;
@@ -104,8 +102,7 @@ const cards = data.cards ?? [];
.guide-launch span { .guide-launch span {
color: var(--gold); color: var(--gold);
/* token-gap: legacy 22px arrow from landing.css; no --step-* covers 22px; owner design-system-keeper */ font-size: var(--step-22);
font-size: 22px;
line-height: 0; line-height: 0;
} }
@@ -121,25 +118,19 @@ const cards = data.cards ?? [];
.landing-note span { .landing-note span {
color: var(--red); 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: font:
700 11px ui-monospace, 700 var(--step-0) ui-monospace,
monospace; monospace;
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
.landing-note strong { .landing-note strong {
/* token-gap: clamp(22px,3.2vw,42px) is specific to this strip; no font-size: var(--step-4);
--step-* ramp covers both endpoints; owner design-system-keeper */
font-size: clamp(22px, 3.2vw, 42px);
line-height: 1.08; line-height: 1.08;
letter-spacing: -0.04em; letter-spacing: -0.04em;
} }
/* token-gap: 520px collapse from landing.css (was bottom-bar threshold); owner design-system-keeper */ @media (max-width: 560px) {
@media (max-width: 520px) {
.landing-note { .landing-note {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 9px; gap: 9px;
src/styles/tokens.css
+35
View File
@@ -20,8 +20,43 @@
--step-6: clamp(36px, 5vw, 65px); --step-6: clamp(36px, 5vw, 65px);
--step-5: clamp(24px, 3vw, 38px); --step-5: clamp(24px, 3vw, 38px);
--step-4: clamp(22px, 3vw, 36px); --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-1: 15px;
--step-14: 14px;
--step-13: 13px;
--step-12: 12px;
--step-0: 11px; --step-0: 11px;
--step-00: 10px;
--step-09: 9px;
/* 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%);
/* Breakpoints */ /* Breakpoints */
--bp-sm: 560px; --bp-sm: 560px;
summary/index.html
+1 -70
View File
@@ -1,70 +1 @@
<!doctype html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Route map</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../full-guide/">← AI FOR DUMMIES</a><span>00 / ROUTE MAP</span><a href="../skills-review/">review desk ↗</a></header><section class="hero"><p class="eyebrow">Start here</p><h1>Ship the<br><em>system.</em></h1><p>This guide turns AI work into a shape: frame the problem, choose the model and agent, isolate changes, teach repeatable decisions, and verify the result.</p></section><section class="grid"><article class="card"><b>01</b><h2>Models</h2><p>Capability and effort are separate knobs.</p><a href="../models/">Open chapter →</a></article><article class="card"><b>02</b><h2>Agents & trees</h2><p>Bound roles, handoffs, and worktrees.</p><a href="../agents/">Open chapter →</a></article><article class="card"><b>03</b><h2>Skills</h2><p>Capture repeatable decisions.</p><a href="../skills/">Open chapter →</a></article><article class="card"><b>04</b><h2>Rules</h2><p>Connect guidance to enforcement.</p><a href="../rules/">Open chapter →</a></article><article class="card"><b>05</b><h2>Practice</h2><p>Compare prompts and skill-enabled runs.</p><a href="../hands-on/starter/">Open lab →</a></article><article class="card"><b>06</b><h2>Review desk</h2><p>Browse original files and improved drafts.</p><a href="../skills-review/">Open desk →</a></article></section><nav class="links"><a href="../full-guide/">Full field guide</a><a href="../docs/operations-guide.md">Operations guide</a></nav><footer>Each chapter stands alone; the order follows a real task becoming a reliable change.</footer></main></body></html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>AI For Dummies — Route map</title>
<link rel="stylesheet" href="../chapters.css" />
</head>
<body>
<main>
<header class="top">
<a href="../full-guide/">← AI FOR DUMMIES</a><span>00 / ROUTE MAP</span
><a href="../skills-review/">review desk ↗</a>
</header>
<section class="hero">
<p class="eyebrow">Start here</p>
<h1>Ship the<br /><em>system.</em></h1>
<p>
This guide turns AI work into a shape: frame the problem, choose the model and agent,
isolate changes, teach repeatable decisions, and verify the result.
</p>
</section>
<section class="grid">
<article class="card">
<b>01</b>
<h2>Models</h2>
<p>Capability and effort are separate knobs.</p>
<a href="../models/">Open chapter →</a>
</article>
<article class="card">
<b>02</b>
<h2>Agents & trees</h2>
<p>Bound roles, handoffs, and worktrees.</p>
<a href="../agents/">Open chapter →</a>
</article>
<article class="card">
<b>03</b>
<h2>Skills</h2>
<p>Capture repeatable decisions.</p>
<a href="../skills/">Open chapter →</a>
</article>
<article class="card">
<b>04</b>
<h2>Rules</h2>
<p>Connect guidance to enforcement.</p>
<a href="../rules/">Open chapter →</a>
</article>
<article class="card">
<b>05</b>
<h2>Practice</h2>
<p>Compare prompts and skill-enabled runs.</p>
<a href="../hands-on/starter/">Open lab →</a>
</article>
<article class="card">
<b>06</b>
<h2>Review desk</h2>
<p>Browse original files and improved drafts.</p>
<a href="../skills-review/">Open desk →</a>
</article>
</section>
<nav class="links">
<a href="../full-guide/">Full field guide</a
><a href="../docs/operations-guide.md">Operations guide</a>
</nav>
<footer>
Each chapter stands alone; the order follows a real task becoming a reliable change.
</footer>
</main>
</body>
</html>