feat(hands-on): add guardrails rules lab and wire into docs

- New hands-on/rules/ interactive page: five toggleable rule sources
  (AGENTS.md, gate-discipline skill, Husky pre-commit, check-ui-contract
  enforcer, commitlint) rebuild a ruled prompt live against a naive prompt.
- Visual system mirrors hands-on/starter (same palette, vanilla JS).
- index.html hands-on section now links both labs.
- docs/operations-guide.md gains a 'Hands-on rules lab' subsection.
- README project structure lists the new lab.
- verify.mjs passes content, interaction, and standalone checks for both labs.

README.md

@@ -39,6 +39,8 @@ npm run verify
 - `docs/references/` — bundled research sources and notes
 - `docs/operations-guide.md` — canonical SilverBullet operations and skills guide
 - `hands-on/starter/` — dependency-free Tiny Tasks exercise
+- `hands-on/rules/` — dependency-free Guardrails lab; toggles rule sources into the prompt
+- `rules/` — bilingual case study of skills, CLI ratchets, Husky, and PR review
 - `GATES.md` — acceptance ledger for the project
 
 ## Publishing
@@ -63,3 +65,12 @@ Codex, and Git documentation. The [additional reading path](docs/references/addi
 bundles 12 verified articles and guides, including Medium and practitioner sources.
 See [model routing](docs/references/model-routing.md) for current provider controls
 and [verified skill sources](docs/references/skill-sources.md) for commit-pinned provenance.
+
+## Rules and enforcement case study
+
+Open `/rules/` for a concise walkthrough grounded in the
+`netcracker/interview` repository. It shows how `AGENTS.md`, project-local
+skills, machine-readable repo ledgers, a UI contract ratchet, lint-staged,
+Husky, commitlint, specialist verifier agents, and PR review reinforce one
+another. Every example links to its source file in Gitea, and the page includes
+a copy-ready prompt for mapping the same layers in another repository.

docs/operations-guide.md

@@ -381,6 +381,45 @@ Compare:
 | Evidence | Did the final response name checks and results? |
 | Complexity | Is the solution proportionate to three tasks and three filters? |
 
+### Hands-on rules lab
+
+A second lab at `hands-on/rules/` mirrors the starter's visual system and runs
+the same exercise against rule sources instead of feature work. It lists five
+toggleable rule sources — `AGENTS.md`, the `gate-discipline` skill body, the
+Husky `pre-commit` hook, the `check-ui-contract.mjs` enforcer, and
+`commitlint` — and rebuilds the **ruled** prompt live as each toggle flips.
+
+Run it:
+
+```bash
+python3 -m http.server 4173
+```
+
+Open [http://localhost:4173/hands-on/rules/](http://localhost:4173/hands-on/rules/).
+Compare the **naive** and **ruled** prompt panels. Toggle rules off to shrink
+the prompt; toggle them on to widen the leash. Copy the final prompt and run
+it against a real coding agent — the lab is deliberately short so the spend
+stays bounded.
+
+## Rules and enforcement case study
+
+The separate `/rules/` page uses `netcracker/interview` as a concrete example
+of repository-level control. Its interactive pipeline shows five layers:
+
+1. `AGENTS.md` gives every agent the same product and toolchain context.
+2. `.agents/skills/` loads narrow procedures for frontend, Go API, gates,
+   parallel work, repository ledgers, issues, skill writing, and technical debt.
+3. `pnpm check:ui` compares violations with a baseline that may only decrease.
+4. Husky runs lint-staged and the UI ratchet before commit; commitlint enforces
+   Conventional Commit messages.
+5. `.pr-review.json` supplies repository-specific policy to the AI reviewer,
+   while the verifier agent reruns gates independently before merge.
+
+The page links directly to each implementation in Gitea and includes a
+copy-ready, read-only prompt for mapping the same enforcement layers in another
+repository. Update `rules/index.html`, `rules/app.js`, and `rules/styles.css`
+together when the underlying interview workflow changes.
+
 ## Troubleshooting
 
 | Symptom | Check | Fix |

hands-on/rules/README.md

@@ -0,0 +1,28 @@
+# Hands-on · Rules
+
+A tiny, zero-dependency demo showing how rule sources reshape the same prompt.
+
+## Run
+
+Open `index.html` directly. No build, no server, no `npm install`.
+
+## What it shows
+
+- Five rule sources, taken from a real monorepo (`netcracker/interview`):
+  - `AGENTS.md` — repo-wide instruction file.
+  - `.agents/skills/gate-discipline/SKILL.md` — skill body loaded on demand.
+  - `.husky/pre-commit` — git hook that runs other enforcers.
+  - `scripts/check-ui-contract.mjs` — custom CLI enforcer (ratchet).
+  - `commitlint.config.cjs` — commit-msg linter.
+- Each rule has an on/off switch. Toggling a rule prepends its body to the **ruled** prompt.
+- EN ↔ PT toggle keeps both languages useful.
+- "Copy ruled prompt" copies the current ruled-prompt text to clipboard.
+- Responsive on mobile, Full HD, and 4K (one column under 720 px).
+
+## Mirror of `/hands-on/starter`
+
+Same visual system (`--paper`, `--ink`, `--blue`, `--gold`), same vanilla JS pattern, same single-file layout. Drop-in alongside the starter page under `hands-on/rules/`.
+
+## Token budget
+
+Page weight: ~5 KB total, no framework, no fetch.

hands-on/rules/app.js

@@ -0,0 +1,124 @@
+// Five rule sources lifted from netcracker/interview.
+// Toggling a rule injects its body into the ruled prompt.
+const RULES = [
+  {
+    id: 'agents',
+    name: 'AGENTS.md',
+    kind: 'Repo-wide instruction',
+    path: 'AGENTS.md',
+    en: 'Read AGENTS.md before touching this repo. Stack: pnpm + turbo monorepo, Go API, Next.js apps. Gates run from the monorepo root: pnpm lint, typecheck, test.',
+    pt: 'Leia AGENTS.md antes de tocar neste repo. Stack: pnpm + turbo monorepo, API em Go, apps Next.js. Gates rodam da raiz: pnpm lint, typecheck, test.'
+  },
+  {
+    id: 'skill',
+    name: 'gate-discipline skill',
+    kind: 'Skill body',
+    path: '.agents/skills/gate-discipline/SKILL.md',
+    en: 'Skill `gate-discipline`: every gate runs separately with `$?`. No `| tail`. `TURBO_FORCE=true` if a pass looks too cheap. Generated code is regenerated, never hand-edited.',
+    pt: 'Skill `gate-discipline`: cada gate roda separado com `$?`. Nada de `| tail`. `TURBO_FORCE=true` se o passar for bom demais. Código gerado se regenera, nunca se edita.'
+  },
+  {
+    id: 'husky',
+    name: 'Husky pre-commit',
+    kind: 'Git hook (commit time)',
+    path: '.husky/pre-commit',
+    en: 'Pre-commit runs `pnpm exec lint-staged`, then `node scripts/check-ui-contract.mjs` (UI ratchet), then commitlint. Counts in the baseline may only go DOWN.',
+    pt: 'Pre-commit roda `pnpm exec lint-staged`, depois `node scripts/check-ui-contract.mjs` (ratchet de UI), depois commitlint. Contadores do baseline só podem DIMINUIR.'
+  },
+  {
+    id: 'enforcer',
+    name: 'check-ui-contract.mjs',
+    kind: 'Custom enforcer (CLI)',
+    path: 'scripts/check-ui-contract.mjs',
+    en: 'Enforcer scans for raw <button>, silent catches, pages without h1, hardcoded colors, duplicated components. Fails when a count goes UP. Fix = `--accept` to re-baseline lower.',
+    pt: 'Enforcer varre <button> cru, catch silencioso, páginas sem h1, cores hardcoded, componentes duplicados. Falha quando contador SOBE. Corrigir = `--accept` para re-baseline menor.'
+  },
+  {
+    id: 'commitlint',
+    name: 'commitlint',
+    kind: 'Commit-msg linter',
+    path: 'commitlint.config.cjs',
+    en: 'Commitlint enforces Conventional Commits. Format: `<type>(<scope>): <subject>`. Types: feat, fix, docs, refactor, test, chore, build, ci, perf, style.',
+    pt: 'Commitlint enforça Commits Convencionais. Formato: `<tipo>(<escopo>): <assunto>`. Tipos: feat, fix, docs, refactor, test, chore, build, ci, perf, style.'
+  }
+];
+
+// The task we're asking the agent to perform.
+const TASK = {
+  en: { goal: 'Refactor the `getUserById` endpoint to return 404 instead of throwing.', ctx: 'services/api/internal/user/handler.go. No DB schema change.' },
+  pt: { goal: 'Refatorar o endpoint `getUserById` para retornar 404 em vez de lançar exceção.', ctx: 'services/api/internal/user/handler.go. Sem mudança de schema.' }
+};
+
+const NAIVE = {
+  en: `Task: ${TASK.en.goal}\nFile: ${TASK.en.ctx}\nPlease make the change and tell me when done.`,
+  pt: `Tarefa: ${TASK.pt.goal}\nArquivo: ${TASK.pt.ctx}\nFaça a mudança e me avise quando terminar.`
+};
+
+const state = { enabled: new Set(['agents']), lang: 'en' };
+
+const ruleList = document.querySelector('#rule-list');
+const ruleCount = document.querySelector('#rule-count');
+const promptNaive = document.querySelector('#prompt-naive');
+const promptRuled = document.querySelector('#prompt-ruled');
+const copyBtn = document.querySelector('#copy-btn');
+const langButtons = document.querySelectorAll('.lang-switch button');
+
+function renderRules() {
+  ruleList.innerHTML = RULES.map((rule) => `
+    <article class="rule" data-id="${rule.id}">
+      <div>
+        <h3>${rule.name}</h3>
+        <p>${rule.kind} <code>${rule.path}</code></p>
+      </div>
+      <span class="rule-tag">${rule.id}</span>
+      <button class="toggle" type="button" data-rule="${rule.id}" aria-pressed="${state.enabled.has(rule.id)}" aria-label="Toggle ${rule.name}"></button>
+    </article>
+  `).join('');
+  ruleCount.textContent = `${state.enabled.size} / ${RULES.length} active`;
+}
+
+function renderPrompts() {
+  const lang = state.lang;
+  promptNaive.textContent = NAIVE[lang];
+
+  const active = RULES.filter((r) => state.enabled.has(r.id));
+  const blocks = active.map((r) => `# ${r.name} (${r.path})\n${r[lang]}`).join('\n\n');
+  const head = `Task: ${TASK[lang].goal}\nFile: ${TASK[lang].ctx}`;
+  const tail = lang === 'en'
+    ? '\n\nRun each gate separately and print $? before claiming done.'
+    : '\n\nRode cada gate separado e imprima $? antes de dizer que terminou.';
+  promptRuled.textContent = blocks ? `${head}\n\n${blocks}${tail}` : head + tail;
+}
+
+function bind() {
+  ruleList.addEventListener('click', (e) => {
+    const btn = e.target.closest('.toggle');
+    if (!btn) return;
+    const id = btn.dataset.rule;
+    if (state.enabled.has(id)) state.enabled.delete(id); else state.enabled.add(id);
+    btn.setAttribute('aria-pressed', String(state.enabled.has(id)));
+    ruleCount.textContent = `${state.enabled.size} / ${RULES.length} active`;
+    renderPrompts();
+  });
+
+  langButtons.forEach((btn) => btn.addEventListener('click', () => {
+    state.lang = btn.dataset.lang;
+    langButtons.forEach((b) => b.setAttribute('aria-pressed', String(b === btn)));
+    renderPrompts();
+  }));
+
+  copyBtn.addEventListener('click', async () => {
+    try {
+      await navigator.clipboard.writeText(promptRuled.textContent);
+      copyBtn.dataset.copied = 'true';
+      copyBtn.textContent = 'Copied';
+      setTimeout(() => { copyBtn.dataset.copied = 'false'; copyBtn.textContent = 'Copy ruled prompt'; }, 1400);
+    } catch {
+      copyBtn.textContent = 'Copy failed — select and copy manually';
+    }
+  });
+}
+
+renderRules();
+renderPrompts();
+bind();

hands-on/rules/index.html

@@ -0,0 +1,43 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Guardrails — Hands-on Rules</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <main>
+    <header>
+      <div><span>HANDS-ON / RULES</span><h1>Guardrails</h1></div>
+      <p>Toggle rules. Watch the prompt change. Same task, different leash.</p>
+    </header>
+
+    <section aria-labelledby="rules-heading">
+      <div class="section-head"><h2 id="rules-heading">Rule sources</h2><span id="rule-count">0 / 5 active</span></div>
+      <div id="rule-list" class="rule-list"></div>
+    </section>
+
+    <section aria-labelledby="prompt-heading">
+      <div class="section-head"><h2 id="prompt-heading">Prompt diff</h2>
+        <div class="lang-switch" role="group" aria-label="Language">
+          <button type="button" data-lang="en" aria-pressed="true">EN</button>
+          <button type="button" data-lang="pt" aria-pressed="false">PT</button>
+        </div>
+      </div>
+      <div class="prompt-grid">
+        <article class="prompt-card" data-side="naive">
+          <header><span>NAIVE</span><h3>Vanilla ask</h3></header>
+          <pre id="prompt-naive"></pre>
+        </article>
+        <article class="prompt-card" data-side="ruled">
+          <header><span>RULED</span><h3>With guardrails</h3></header>
+          <pre id="prompt-ruled"></pre>
+          <button id="copy-btn" type="button">Copy ruled prompt</button>
+        </article>
+      </div>
+    </section>
+  </main>
+  <script src="app.js" defer></script>
+</body>
+</html>

hands-on/rules/styles.css

@@ -0,0 +1 @@
+:root{--paper:#f4f3ef;--ink:#173044;--muted:#687d8c;--blue:#5683a1;--gold:#efc86d;--line:#d5dde1}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Arial,sans-serif}main{width:min(880px,calc(100% - 40px));margin:0 auto;padding:70px 0}header,.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end}header{padding-bottom:50px;border-bottom:1px solid var(--line)}header span,.prompt-card>header span{font:10px monospace;letter-spacing:.08em}h1{margin:12px 0 0;font-size:clamp(48px,10vw,100px);letter-spacing:-.08em}header p{max-width:220px;color:var(--muted);line-height:1.5}section{padding-top:45px}h2{font-size:24px}.section-head>span{color:var(--blue);font:11px monospace}.rule-list,.prompt-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}.rule{display:grid;grid-template-columns:1fr auto auto;gap:20px;padding:22px;background:var(--paper);align-items:center}.rule h3{margin:0 0 6px;font-size:17px}.rule p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.rule code{font:11px ui-monospace,monospace;color:var(--ink);background:var(--paper);padding:1px 5px;border:1px solid var(--line)}.rule-tag{font:10px monospace;letter-spacing:.08em;color:var(--muted);text-transform:uppercase}.toggle{appearance:none;width:44px;height:24px;border:1px solid var(--line);background:var(--paper);border-radius:12px;position:relative;cursor:pointer;transition:background .15s ease}.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--ink);border-radius:50%;transition:transform .15s ease,background .15s ease}.toggle[aria-pressed="true"]{background:var(--blue);border-color:var(--blue)}.toggle[aria-pressed="true"]::after{transform:translateX(20px);background:var(--gold)}.prompt-grid{grid-template-columns:1fr 1fr;margin-top:18px}.prompt-card{background:var(--paper);padding:22px;display:flex;flex-direction:column;gap:14px}.prompt-card>header{display:flex;justify-content:space-between;align-items:end;padding-bottom:0;border-bottom:0}.prompt-card h3{margin:0;font-size:17px}.prompt-card pre{margin:0;font:12px ui-monospace,monospace;white-space:pre-wrap;word-break:break-word;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:14px;min-height:160px;line-height:1.5}#copy-btn{align-self:flex-start;appearance:none;border:1px solid var(--ink);background:var(--ink);color:var(--paper);font:11px monospace;letter-spacing:.08em;padding:9px 14px;cursor:pointer;text-transform:uppercase}#copy-btn[data-copied="true"]{background:var(--blue);border-color:var(--blue)}.lang-switch{display:flex;gap:1px;border:1px solid var(--line)}.lang-switch button{appearance:none;border:0;background:var(--paper);color:var(--muted);font:11px monospace;letter-spacing:.08em;padding:6px 10px;cursor:pointer;text-transform:uppercase}.lang-switch button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}@media(max-width:720px){.prompt-grid{grid-template-columns:1fr}.rule{grid-template-columns:1fr}.rule-tag{display:none}}@media(max-width:560px){header{display:block}header p{margin-top:24px}.lang-switch{flex:1}.lang-switch button{flex:1}}

index.html

@@ -25,8 +25,8 @@
 <section class="skills" id="skills"><div><p class="eyebrow">Skills</p><h2>Write the right way<br /><em>once.</em></h2><p>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.</p><div class="skill-principles"><span>01 / trigger clearly</span><span>02 / load detail on demand</span><span>03 / return evidence</span></div></div><div class="skill-explorer"><div class="skill-package" role="tree" aria-label="Skill package files"><span>SKILL PACKAGE</span><button class="active" data-skill-file="skill" role="treeitem" aria-selected="true"><code>SKILL.md</code><small>procedure and limits</small></button><button data-skill-file="references" role="treeitem" aria-selected="false"><code>references/</code><small>facts to consult</small></button><button data-skill-file="scripts" role="treeitem" aria-selected="false"><code>scripts/</code><small>repeatable checks</small></button><button data-skill-file="assets" role="treeitem" aria-selected="false"><code>assets/</code><small>templates and examples</small></button></div><article class="skill-detail" id="skill-detail" aria-live="polite"></article></div><pre><code>name: review-ui · check focus, mobile, reduced motion · run verification · return evidence</code></pre></section>
 <section class="skill-builder" id="create-skill"><div class="section-label"><span>Create a skill</span><span>repeatable pain → reusable judgment</span></div><div class="builder-intro"><div><p class="eyebrow">The skill forge</p><h2>Teach the decision.<br />Keep the context <em>light.</em></h2></div><p>Do not package everything you know. Capture the non-obvious choices that repeatedly improve an outcome, then prove the skill changes behavior.</p></div><div class="builder-workbench"><nav class="builder-steps" role="tablist" aria-label="Skill creation workflow"><button class="active" data-skill-step="observe" role="tab" aria-selected="true"><b>01</b><span>Observe</span><small>find repeated friction</small></button><button data-skill-step="trigger" role="tab" aria-selected="false"><b>02</b><span>Define trigger</span><small>route precisely</small></button><button data-skill-step="scaffold" role="tab" aria-selected="false"><b>03</b><span>Choose anatomy</span><small>only needed files</small></button><button data-skill-step="write" role="tab" aria-selected="false"><b>04</b><span>Write guidance</span><small>decisions, not trivia</small></button><button data-skill-step="validate" role="tab" aria-selected="false"><b>05</b><span>Validate</span><small>test real behavior</small></button></nav><article class="builder-detail" id="builder-detail" aria-live="polite"></article><aside class="builder-artifact"><div class="artifact-head"><span>OUTPUT / SKILL PACKAGE</span><i></i></div><pre aria-label="Example skill structure"><code>review-ui/<br />├── SKILL.md<br />├── agents/<br />│   └── openai.yaml<br />├── references/<br />│   └── accessibility.md<br />└── scripts/<br />    └── verify.mjs</code></pre><div class="artifact-command"><span>VALIDATE</span><code>quick_validate.py ./review-ui</code></div></aside></div><div class="builder-loop"><span>AFTER REAL USE</span><div><b>observe failure</b><i>→</i><b>sharpen one rule</b><i>→</i><b>retest behavior</b><i>→</i><b>keep it narrow</b></div></div></section>
 <section class="skill-catalog" id="field-kit"><div class="section-label"><span>Common skills</span><span>choose behavior before model</span></div><div class="catalog-intro"><div><p class="eyebrow">The field kit</p><h2>Different jobs.<br />Different <em>instincts.</em></h2></div><p>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.</p></div><div class="skill-deck"><div class="skill-index" role="tablist" aria-label="Common agent skills"><button class="active" data-common-skill="ponytail" role="tab" aria-selected="true"><span>SIMPLIFY</span><strong>ponytail-lite</strong><small>minimum code that holds</small></button><button data-common-skill="caveman" role="tab" aria-selected="false"><span>COMMUNICATE</span><strong>caveman</strong><small>signal without filler</small></button><button data-common-skill="unlazy" role="tab" aria-selected="false"><span>COMPLETE</span><strong>unlazy</strong><small>gates and evidence</small></button><button data-common-skill="research" role="tab" aria-selected="false"><span>INVESTIGATE</span><strong>research</strong><small>primary sources first</small></button><button data-common-skill="debug" role="tab" aria-selected="false"><span>DIAGNOSE</span><strong>diagnosing-bugs</strong><small>tight feedback loop</small></button><button data-common-skill="review" role="tab" aria-selected="false"><span>REVIEW</span><strong>code-review</strong><small>standards × spec</small></button><button data-common-skill="tokens" role="tab" aria-selected="false"><span>ECONOMIZE</span><strong>token-saver</strong><small>compress noisy output</small></button></div><article class="common-skill-detail" id="common-skill-detail" aria-live="polite"></article></div><div class="skill-loadout"><span>ONE PRACTICAL LOADOUT</span><div><b>PLAN</b> unlazy <i>→</i> <b>BUILD</b> ponytail-lite <i>→</i> <b>DEBUG</b> diagnosing-bugs <i>→</i> <b>REPORT</b> caveman</div></div><article class="install-skills"><header><div><span>INSTALL PACK</span><strong>Ask your coding agent to verify, install, and validate the skills.</strong></div><button data-copy-target="prompt-install-skills"><span>COPY</span><i aria-hidden="true">↗</i></button></header><pre><code id="prompt-install-skills"></code></pre><footer>Review every source before installation. Existing local skills must be preserved.</footer></article></section>
-<section class="hands-on" id="hands-on"><div class="section-label"><span>Hands-on</span><span>10 minutes / one missing feature</span></div><div class="hands-intro"><div><p class="eyebrow">Tiny Tasks lab</p><h2>Same task.<br />Better <em>operating system.</em></h2></div><div><p>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.</p><a href="hands-on/starter/" class="starter-link">Open the starter project →</a></div></div><div class="exercise-brief"><span>THE MISSING FEATURE</span><strong>Add All / Open / Done filters that survive reload and browser navigation.</strong><div><b>STACK</b> HTML · CSS · JavaScript <b>DEPENDENCIES</b> none <b>FILES</b> 3</div></div><div class="prompt-compare"><article class="prompt-card"><header><div><span>RUN A</span><strong>Good prompt</strong></div><button data-copy-target="prompt-basic"><span>COPY</span><i aria-hidden="true">↗</i></button></header><pre><code id="prompt-basic"></code></pre><footer>Clear context · constraints · acceptance · evidence</footer></article><article class="prompt-card enhanced"><header><div><span>RUN B</span><strong>Good prompt + skills</strong></div><button data-copy-target="prompt-skills"><span>COPY</span><i aria-hidden="true">↗</i></button></header><pre><code id="prompt-skills"></code></pre><footer>Same contract · explicit working methods · stronger proof</footer></article></div><div class="comparison-strip"><span>COMPARE THE RUNS</span><div><b>01</b> Files changed</div><div><b>02</b> New dependencies</div><div><b>03</b> Checks actually run</div><div><b>04</b> Evidence returned</div></div><p class="copy-status" id="copy-status" role="status" aria-live="polite"></p></section>
+<section class="hands-on" id="hands-on"><div class="section-label"><span>Hands-on</span><span>10 minutes / one missing feature</span></div><div class="hands-intro"><div><p class="eyebrow">Tiny Tasks lab</p><h2>Same task.<br />Better <em>operating system.</em></h2></div><div><p>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.</p><div class="starter-links"><a href="hands-on/starter/" class="starter-link">Open the starter project →</a><a href="hands-on/rules/" class="starter-link">Open the rules lab →</a></div></div></div><div class="exercise-brief"><span>THE MISSING FEATURE</span><strong>Add All / Open / Done filters that survive reload and browser navigation.</strong><div><b>STACK</b> HTML · CSS · JavaScript <b>DEPENDENCIES</b> none <b>FILES</b> 3</div></div><div class="prompt-compare"><article class="prompt-card"><header><div><span>RUN A</span><strong>Good prompt</strong></div><button data-copy-target="prompt-basic"><span>COPY</span><i aria-hidden="true">↗</i></button></header><pre><code id="prompt-basic"></code></pre><footer>Clear context · constraints · acceptance · evidence</footer></article><article class="prompt-card enhanced"><header><div><span>RUN B</span><strong>Good prompt + skills</strong></div><button data-copy-target="prompt-skills"><span>COPY</span><i aria-hidden="true">↗</i></button></header><pre><code id="prompt-skills"></code></pre><footer>Same contract · explicit working methods · stronger proof</footer></article></div><div class="comparison-strip"><span>COMPARE THE RUNS</span><div><b>01</b> Files changed</div><div><b>02</b> New dependencies</div><div><b>03</b> Checks actually run</div><div><b>04</b> Evidence returned</div></div><p class="copy-status" id="copy-status" role="status" aria-live="polite"></p></section>
 <aside class="rule"><span>THE HUMAN JOB</span><strong>The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</strong></aside><aside class="callout"><span>START HERE</span><strong>Begin with one agent and one skill. Add parallelism only when the tasks are truly independent.</strong></aside>
-<section class="sources"><div class="section-label"><span>Keep learning</span><span>12 new readings + primary docs</span></div><p>Go deeper with official documentation, production case studies, Medium, and practitioner workflows. <a href="docs/references/README.md">Primary references →</a> <a href="docs/references/additional-reading.md">12-part reading path →</a></p></section>
+<section class="sources"><div class="section-label"><span>Keep learning</span><span>12 new readings + primary docs</span></div><p>Go deeper with official documentation, production case studies, Medium, and practitioner workflows. <a href="rules/">Rules and enforcement case study →</a> <a href="docs/references/README.md">Primary references →</a> <a href="docs/references/additional-reading.md">12-part reading path →</a></p></section>
 </main><script src="app.js" defer></script>
 </body></html>

responsive.css

@@ -65,7 +65,7 @@ button{font-family:inherit}
 .install-skills{display:grid;grid-template-rows:auto 1fr auto;margin-top:24px;color:var(--paper);background:var(--deep);border-left:7px solid var(--gold)}.install-skills header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:20px 24px;border-bottom:1px solid #ffffff2d}.install-skills header>div{display:grid;gap:7px}.install-skills header span,.install-skills footer{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.08em}.install-skills header strong{font-size:15px}.install-skills button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.install-skills button:hover,.install-skills button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.install-skills button i{font-style:normal}.install-skills pre{max-height:360px;margin:0;padding:24px;overflow:auto;white-space:pre-wrap;background:#0b1b27}.install-skills pre code{font:10px/1.7 'DM Mono',monospace}.install-skills footer{padding:16px 24px;color:#b9c8d1;border-top:1px solid #ffffff2d}.install-skills button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
 
 /* Copy-ready hands-on lab */
-.hands-on{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.hands-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.hands-intro h2{margin-bottom:0}.hands-intro>div:last-child>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.starter-link{display:inline-block;margin-top:18px;color:var(--blue);font:700 11px 'DM Mono',monospace;text-decoration:none;border-bottom:2px solid var(--gold)}
+.hands-on{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.hands-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.hands-intro h2{margin-bottom:0}.hands-intro>div:last-child>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.starter-link{display:inline-block;margin-top:18px;color:var(--blue);font:700 11px 'DM Mono',monospace;text-decoration:none;border-bottom:2px solid var(--gold)}.starter-links{display:flex;flex-wrap:wrap;gap:6px 24px;margin-top:18px}.starter-links .starter-link{margin-top:0}
 .exercise-brief{display:grid;grid-template-columns:190px 1fr;gap:22px;padding:26px 30px;color:var(--paper);background:var(--deep)}.exercise-brief>span{color:var(--gold);font:500 9px 'DM Mono',monospace;letter-spacing:.09em}.exercise-brief>strong{font-size:clamp(20px,2.6vw,34px);line-height:1.12}.exercise-brief>div{grid-column:2;color:#afbec7;font:500 9px 'DM Mono',monospace;letter-spacing:.05em}.exercise-brief b{margin-left:18px;color:var(--accent)}.exercise-brief b:first-child{margin-left:0}
 .prompt-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1px;background:var(--line)}.prompt-card{display:grid;grid-template-rows:auto 1fr auto;min-width:0;min-height:600px;color:var(--paper);background:#19364a}.prompt-card.enhanced{background:#596f9a}.prompt-card header{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid #ffffff32}.prompt-card header>div{display:grid;gap:6px}.prompt-card header span,.prompt-card footer{font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.prompt-card header>div span{color:var(--gold)}.prompt-card header strong{font-size:17px}.prompt-card button{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff50;color:var(--paper);background:transparent;cursor:pointer}.prompt-card button:hover,.prompt-card button.copied{color:var(--ink);border-color:var(--gold);background:var(--gold)}.prompt-card button i{font-style:normal}.prompt-card pre{margin:0;padding:25px;overflow:auto;white-space:pre-wrap}.prompt-card pre code{font:11px/1.72 'DM Mono',monospace}.prompt-card footer{padding:17px 22px;color:#bfccd4;border-top:1px solid #ffffff32}.prompt-card.enhanced footer{color:#e5e3ef}.prompt-card button:focus-visible,.starter-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
 .comparison-strip{display:grid;grid-template-columns:190px repeat(4,1fr);gap:1px;background:var(--line)}.comparison-strip>*{padding:18px;background:var(--paper)}.comparison-strip>span{color:var(--accent);font:700 9px 'DM Mono',monospace;letter-spacing:.08em}.comparison-strip>div{color:var(--muted);font:500 10px 'DM Mono',monospace}.comparison-strip b{margin-right:8px;color:var(--blue)}.copy-status{min-height:20px;margin:15px 0 0;color:var(--blue);font:600 10px 'DM Mono',monospace;text-align:right}