feat(deck): add 08 verification chapter with cross-layer evidence matrix

- New section 'Verification' between hands-on and sources. - Three evidence layers (static / behavior / integration), each with its own exit-code-printing gate snippet. - Four anti-pattern cards (pipe, swallow, cache, skip integration). - 'Run it yourself' block links to /hands-on/starter and /hands-on/rules. - Topnav gains 08 verify anchor. - Companion SilverBullet pages (EN + PT) written under Guides/: * 'AI For Dummies Verification and Evidence.md' * 'AI For Dummies Verificação e Evidência.md' - Both pages reference all 7 existing deck sections and the two labs. Verify pass: content, interaction, and standalone for presentation, plus the three rules-page checks.
2026-09-02 15:42:36 +00:00
parent f526a42ddd
commit 755d61facc
2 changed files with 6 additions and 2 deletions
@@ -11,7 +11,7 @@
 <body>
 <div class="reading-progress" aria-hidden="true"><span></span></div>
 <main>
-<header class="topbar"><a class="brand" href="#top"><span class="mark">A</span> field guide</a><nav class="chapter-links" aria-label="Chapter sections"><a href="#fleet">01 fleet</a><a href="#worktrees">02 worktrees</a><a href="#models">03 models</a><a href="#skills">04 skills</a><a href="#create-skill">05 create</a><a href="#field-kit">06 field kit</a><a href="#hands-on">07 hands-on</a></nav><div class="topbar-tools"><div class="lang-switch" aria-label="Language"><button class="active" data-lang="en" aria-pressed="true">EN</button><span>/</span><button data-lang="pt" aria-pressed="false">PT</button></div><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span></div></header>
+<header class="topbar"><a class="brand" href="#top"><span class="mark">A</span> field guide</a><nav class="chapter-links" aria-label="Chapter sections"><a href="#fleet">01 fleet</a><a href="#worktrees">02 worktrees</a><a href="#models">03 models</a><a href="#skills">04 skills</a><a href="#create-skill">05 create</a><a href="#field-kit">06 field kit</a><a href="#hands-on">07 hands-on</a><a href="#verification">08 verify</a></nav><div class="topbar-tools"><div class="lang-switch" aria-label="Language"><button class="active" data-lang="en" aria-pressed="true">EN</button><span>/</span><button data-lang="pt" aria-pressed="false">PT</button></div><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span></div></header>
 <section class="hero" id="top"><div><p class="eyebrow">A presentation for humans who ship</p><h1>AI for<br /><em>dummies.</em></h1><p class="lede">You do not need an army of models. You need a system: one mind to frame the work, several hands to execute it, and a clean boundary between every task.</p></div><aside class="hero-index"><span>FIELD NOTE / 001</span><strong>Ship the<br /><em>system.</em></strong><small>Skills · agents · worktrees · proof</small></aside></section>
 <section class="hero-stats" aria-label="Chapter summary"><div><strong>01</strong><span>strong model<br />for ambiguity</span></div><div><strong>03</strong><span>bounded workers<br />in parallel</span></div><div><strong>∞</strong><span>iterations<br />with evidence</span></div><p>Read this as a route map, not a prompt recipe.</p></section>
 <section class="thesis"><div><span>RULE ZERO</span><strong>Strong model for ambiguity.<br />Light model for bounded work.</strong></div><div class="signal" aria-hidden="true"><b>THINK</b><i></i><i></i><i></i><b>MAKE</b></div></section>
@@ -27,6 +27,10 @@
 <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><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="verification" id="verification"><div class="section-label"><span>Verification</span><span>evidence over confidence</span></div><div class="verify-intro"><div><p class="eyebrow">From confident drift to decisive proof</p><h2>Three layers.<br /><em>Run each separately.</em></h2></div><p>Every gate needs its own line, its own exit code, and its own evidence. The matrix below is the deliverable — not opinion, not prose, not "looks done".</p></div><div class="verify-layers"><article><span>01 · STATIC</span><h3>Shape and types</h3><p>Format, lint, type-check. Fast and scope-bounded. Run on every save.</p><code>pnpm lint; echo "lint=$?"
 pnpm typecheck; echo "typecheck=$?"</code></article><article><span>02 · BEHAVIOR</span><h3>Deterministic proof</h3><p>Unit and contract tests. Repeatable. Run before claiming done.</p><code>pnpm test; echo "test=$?"
 cd services/api &amp;&amp; go test ./...</code></article><article><span>03 · INTEGRATION</span><h3>Real surface, real load</h3><p>Drive the actual UI, API, browser. Slow, fragile, decisive. Only this catches mobile overflow and missing 404.</p><code>pnpm check:ui; echo "ui=$?"
 TURBO_FORCE=true pnpm e2e</code></article></div><div class="verify-antipatterns"><span>FOUR WAYS GREEN IS FALSE</span><div class="ap-grid"><article><b>1</b><div><strong>Pipe a gate</strong><p>tail, grep, or head hide the real exit code — a pipeline returns the last command's status.</p></div></article><article><b>2</b><div><strong>Swallow a rejection</strong><p>Silent <code>.catch(() =&gt; {})</code> hides a panic, an upstream limit, or a partial failure.</p></div></article><article><b>3</b><div><strong>Trust the cache</strong><p>Turbo caches results. A gate that "passes" may not have run — use <code>TURBO_FORCE=true</code>.</p></div></article><article><b>4</b><div><strong>Skip the third layer</strong><p>Static + unit can both be green while the page breaks on mobile or the API never returns 404.</p></div></article></div></div><article class="verify-cta"><span>RUN IT YOURSELF · 10 minutes per lab</span><div class="verify-cta-grid"><a href="hands-on/starter/" class="verify-card"><strong>Path A · verification lab</strong><p>Run the four-row comparison strip on the starter. Run A naively, Run B with <code>$gate-discipline</code> + <code>$webapp-testing</code>.</p><small>Open the starter →</small></a><a href="hands-on/rules/" class="verify-card"><strong>Path B · rules lab</strong><p>Toggle rule sources off and on. Compare the diff size, the count of gate commands invoked, and the names of checks cited in the final reply.</p><small>Open the rules lab →</small></a></div></article></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>
@@ -53,7 +53,7 @@ button{font-family:inherit}
 .builder-artifact{display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);background:#0b1b27}.artifact-head{display:flex;justify-content:space-between;padding:17px;border-bottom:1px solid #344c5d;font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-head i{width:8px;height:8px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a20}.builder-artifact pre{display:grid;align-items:center;margin:0;padding:28px;overflow:auto;color:#bed0dc;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}.builder-artifact pre code{font:12px/1.9 'DM Mono',monospace}.artifact-command{display:grid;gap:9px;padding:18px;border-top:1px solid #344c5d}.artifact-command span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-command code{font:10px 'DM Mono',monospace}
 .builder-loop{display:grid;grid-template-columns:200px 1fr;gap:25px;padding:23px 28px;color:var(--ink);background:var(--gold)}.builder-loop>span{font:700 9px 'DM Mono',monospace;letter-spacing:.09em}.builder-loop>div{font:600 11px 'DM Mono',monospace}.builder-loop i{margin:0 12px;color:var(--accent);font-style:normal}.builder-steps button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px}
-.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}
+.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.verification{padding-top:80px;border-top:1px solid var(--line);margin-bottom:130px}.verify-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.verify-intro h2{margin-bottom:0}.verify-intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.verify-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line);border:1px solid var(--line)}.verify-layers article{background:var(--paper);padding:24px 22px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto}.verify-layers article>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--accent)}.verify-layers article h3{margin:0;font-size:18px;letter-spacing:-.02em}.verify-layers article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.verify-layers article code{font:10.5px ui-monospace,monospace;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55}.verify-antipatterns{margin-top:55px}.verify-antipatterns>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--muted)}.ap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line)}.ap-grid article{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:start;background:var(--paper);padding:18px 20px}.ap-grid article b{font:500 22px 'DM Mono',monospace;color:var(--accent);line-height:1;align-self:center}.ap-grid article strong{font-size:15px;letter-spacing:-.01em}.ap-grid article p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.ap-grid article code{font:11px ui-monospace,monospace;color:var(--ink);background:var(--paper);padding:1px 4px;border:1px solid var(--line)}.verify-cta{margin-top:55px;padding:26px 28px;color:var(--paper);background:var(--ink)}.verify-cta>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--gold)}.verify-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:#ffffff1f}.verify-card{display:grid;gap:6px;background:var(--ink);padding:20px 22px;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--gold)}.verify-card strong{font-size:17px;letter-spacing:-.01em}.verify-card p{margin:0;color:#bfccd4;font-size:13px;line-height:1.55}.verify-card p code{font:11px ui-monospace,monospace;color:var(--gold);background:#0f2230;padding:1px 5px;border:1px solid #2a4150}.verify-card small{font:500 10px 'DM Mono',monospace;color:var(--gold);letter-spacing:.09em}@media(max-width:880px){.verify-layers,.verify-cta-grid{grid-template-columns:1fr}.verify-intro{grid-template-columns:1fr}}@media(max-width:560px){.verify-intro{display:block}.verify-intro>p{margin-top:18px}.ap-grid{grid-template-columns:1fr}.verify-cta{padding:22px 20px}}
 .catalog-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.catalog-intro h2{margin-bottom:0}.catalog-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
 .skill-deck{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.7fr);min-height:620px;border:1px solid var(--line);background:var(--line)}
 .skill-index{display:grid;grid-template-rows:repeat(7,1fr);gap:1px;background:var(--line)}