From 9557cae6b608ea67bdcc4552dc47e109b340d390 Mon Sep 17 00:00:00 2001
From: Marcos Paulo <marcos.paulodasilva.mp@gmail.com>
Date: Wed, 2 Sep 2026 00:33:49 +0000
Subject: [PATCH] feat: add AI For Dummies presentation

---
 GATES.md                  | 23 +++++++++++++++++++++++
 app.js                    |  9 +++++++++
 docs/references/README.md | 34 ++++++++++++++++++++++++++++++++++
 index.html                | 24 ++++++++++++++++++++++++
 package.json              |  5 +++++
 scripts/verify.mjs        | 12 ++++++++++++
 styles.css                |  1 +
 7 files changed, 108 insertions(+)
 create mode 100644 GATES.md
 create mode 100644 app.js
 create mode 100644 docs/references/README.md
 create mode 100644 index.html
 create mode 100644 package.json
 create mode 100644 scripts/verify.mjs
 create mode 100644 styles.css

diff --git a/GATES.md b/GATES.md
new file mode 100644
index 0000000..dd79756
--- /dev/null
+++ b/GATES.md
@@ -0,0 +1,23 @@
+# Gates: AI For Dummies standalone presentation
+
+OWNS: index.html, styles.css, app.js, docs/references/**, scripts/**
+
+Scope: Deliver a standalone presentation teaching skills, model routing, subagents, and worktrees.
+
+- [ ] G1: bundled research references and required lesson topics exist
+  CHECK: node scripts/verify.mjs
+  EXPECT: content verification passed
+  EVIDENCE: pending
+
+- [ ] G2: the standalone presentation has working phase interaction
+  CHECK: node scripts/verify.mjs
+  EXPECT: interaction verification passed
+  EVIDENCE: pending
+
+- [ ] G3: the document is valid and has no external runtime dependency
+  CHECK: node scripts/verify.mjs
+  EXPECT: standalone verification passed
+  EVIDENCE: pending
+
+- [ ] G4: responsive and accessibility presentation review
+  EVIDENCE: pending
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..a18e6c1
--- /dev/null
+++ b/app.js
@@ -0,0 +1,9 @@
+const phases = {
+  plan: { model: 'OPUS / REASONING', title: 'Turn ambiguity into work', copy: 'Inspect the repository, choose the architecture, split the request, and write acceptance criteria.', code: 'plan → decompose → define acceptance' },
+  build: { model: 'SONNET, HAIKU, OR EQUIVALENT', title: 'Execute one bounded slice', copy: 'Give each worker enough context, one responsibility, and its own worktree. Less context; less collision.', code: 'brief + worktree → implement → test' },
+  review: { model: 'STRONG MODEL OR HUMAN', title: 'Reconnect result to intent', copy: 'Check the diff against the original brief, run the checks, then merge, request changes, or discard.', code: 'diff + checks → review → merge / iterate' }
+};
+const panel = document.querySelector('#phase-panel');
+const render = (id) => { const phase = phases[id]; panel.innerHTML = `<div class="phase-meta"><span>${phase.model}</span><small>context: isolated</small></div><h3>${phase.title}</h3><p>${phase.copy}</p><code>${phase.code}</code>`; document.querySelectorAll('[data-phase]').forEach((button) => { const active = button.dataset.phase === id; button.classList.toggle('active', active); button.setAttribute('aria-selected', String(active)); }); };
+document.querySelectorAll('[data-phase]').forEach((button) => button.addEventListener('click', () => render(button.dataset.phase)));
+render('plan');
diff --git a/docs/references/README.md b/docs/references/README.md
new file mode 100644
index 0000000..1678220
--- /dev/null
+++ b/docs/references/README.md
@@ -0,0 +1,34 @@
+# AI For Dummies — reference bundle
+
+Research captured 2026-09-02. Official documentation is primary; practitioner
+articles are context, not authority.
+
+## Primary documentation
+
+- Anthropic — custom subagents: https://code.claude.com/docs/en/sub-agents
+  Separate context, tools, permissions, model selection, and worktree isolation.
+- Anthropic — skills: https://code.claude.com/docs/en/skills
+  Reusable instruction packages and skill discovery.
+- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees
+  Isolated sessions, branches, cleanup, and ignored files.
+- OpenAI — build skills: https://developers.openai.com/codex/skills
+  Packaged instructions and resources for Codex workflows.
+- OpenAI API — skills reference: https://developers.openai.com/api/reference/go/resources/skills
+  Creating, versioning, listing, and downloading skill bundles.
+- Git — worktree: https://git-scm.com/docs/git-worktree.html
+  Linked working trees, branches, shared history, add/list/remove/prune.
+
+## Research and articles
+
+- Infobip Research — phased coding-agent workflow: https://arxiv.org/abs/2608.30701
+- Effective asynchronous software engineering agents: https://arxiv.org/abs/2603.21489
+- Launch Receipts — AI coding workflow without losing control: https://launchreceipts.com/articles/ai-coding-agent-workflow
+- GitWorktree.org — three agents, three worktrees case study: https://www.gitworktree.org/cases/parallel-ai-agents
+
+## Teaching claims
+
+- Use a stronger model where ambiguity, architecture, decomposition, and review dominate.
+- Use faster models for bounded implementation with explicit context and checks.
+- Give every editing worker an isolated branch/worktree; merge only reviewed diffs.
+- A skill is a reusable procedure plus optional references/scripts/assets, not magical memory.
+- Delegation does not remove human responsibility for intent, boundaries, or evidence.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..82b2fa6
--- /dev/null
+++ b/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="AI For Dummies: a field guide to skills, models, subagents, and worktrees." />
+  <title>AI For Dummies — Field Guide</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+<main>
+<header class="topbar"><a class="brand" href="#top"><span class="mark">A</span> field guide</a><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span></header>
+<section class="hero" id="top"><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></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>
+<section class="fleet"><div class="section-label"><span>A small fleet</span><span>coordination before parallelism</span></div><div class="fleet-grid"><article class="captain"><span>ORCHESTRATOR</span><h2>Decides what<br />needs to happen.</h2><code>Opus / reasoning</code></article><div class="arrow">→</div><div class="workers"><article><span>UI</span><strong>Component and visual states</strong><code>agent/ui</code></article><article><span>TEST</span><strong>Acceptance cases</strong><code>agent/tests</code></article><article><span>DOCS</span><strong>Guide and examples</strong><code>agent/docs</code></article></div></div><p class="caption">The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line.</p></section>
+<section class="workflow" aria-labelledby="workflow-title"><div class="copy"><p class="eyebrow">The subagent loop</p><h2 id="workflow-title">Click a phase.<br /><em>See the handoff.</em></h2><p>Delegation means moving one bounded task into a smaller context—not giving away responsibility.</p></div><div class="phase-tabs" role="tablist" aria-label="Workflow phases"><button class="active" data-phase="plan" role="tab" aria-selected="true"><b>01</b> PLAN</button><button data-phase="build" role="tab" aria-selected="false"><b>02</b> BUILD</button><button data-phase="review" role="tab" aria-selected="false"><b>03</b> REVIEW</button></div><article class="phase-panel" id="phase-panel" aria-live="polite"></article></section>
+<section class="handoff"><div class="section-label"><span>What crosses contexts</span><span>brief → diff → evidence</span></div><table><thead><tr><th>Package</th><th>Contains</th><th>Why it matters</th></tr></thead><tbody><tr><th scope="row">Brief</th><td>goal, files, boundaries</td><td>stops the worker inventing the problem</td></tr><tr><th scope="row">Worktree</th><td>branch and isolated checkout</td><td>parallel edits do not collide</td></tr><tr><th scope="row">Checks</th><td>tests, build, criteria</td><td>turns “looks good” into evidence</td></tr><tr><th scope="row">Diff</th><td>small, reviewable change</td><td>integration and discard stay cheap</td></tr></tbody></table></section>
+<section class="worktrees"><div><p class="eyebrow">Git worktrees</p><h2>One branch<br />per <em>hand.</em></h2><p>A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared.</p><pre><code>git worktree add ../task-ui -b agent/ui · git worktree add ../task-tests -b agent/tests · git worktree list</code></pre></div><div class="map"><div class="repo"><span>REPOSITORY</span><strong>main</strong><small>shared history</small></div><div><span>UI</span><strong>agent/ui</strong><small>isolated checkout</small></div><div><span>TEST</span><strong>agent/tests</strong><small>isolated checkout</small></div><div><span>DOCS</span><strong>agent/docs</strong><small>isolated checkout</small></div></div></section>
+<section class="routing"><div><p class="eyebrow">Model routing</p><h2>Do not pay for<br />reasoning where<br />you need <em>rhythm.</em></h2></div><div class="route-table"><div class="head"><span>Work</span><span>Profile</span><span>Prompt shape</span></div><div><strong>Plan</strong><b>strong / broad</b><small>What changes? What can break?</small></div><div><strong>Build</strong><b>fast / focused</b><small>Implement this slice. Run these checks.</small></div><div><strong>Explore</strong><b>read-only / light</b><small>Find where this contract is used.</small></div><div><strong>Review</strong><b>independent</b><small>Does the diff satisfy the brief?</small></div></div></section>
+<section class="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><div class="skill-package"><span>SKILL PACKAGE</span><div><code>SKILL.md</code><small>procedure and limits</small></div><div><code>references/</code><small>facts to consult</small></div><div><code>scripts/</code><small>repeatable checks</small></div><div><code>assets/</code><small>templates and examples</small></div></div><pre><code>name: review-ui · check focus, mobile, reduced motion · run verification · return evidence</code></pre></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>sources bundled locally</span></div><p>Based on Claude Code, Codex, Git, and agent-workflow research. <a href="docs/references/">Open the reference bundle →</a></p></section>
+</main><script src="app.js" defer></script>
+</body></html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..dc21720
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "ai-for-dummies",
+  "private": true,
+  "scripts": { "verify": "node scripts/verify.mjs", "serve": "python3 -m http.server 4173" }
+}
diff --git a/scripts/verify.mjs b/scripts/verify.mjs
new file mode 100644
index 0000000..0068b62
--- /dev/null
+++ b/scripts/verify.mjs
@@ -0,0 +1,12 @@
+import { readFileSync } from 'node:fs';
+const read = (path) => readFileSync(new URL(`../${path}`, import.meta.url), 'utf8');
+const html = read('index.html');
+const js = read('app.js');
+const refs = read('docs/references/README.md');
+for (const url of ['https://code.claude.com/docs/en/sub-agents','https://code.claude.com/docs/en/skills','https://code.claude.com/docs/en/worktrees','https://git-scm.com/docs/git-worktree.html','https://developers.openai.com/codex/skills']) if (!refs.includes(url)) throw new Error(`missing reference ${url}`);
+console.log('content verification passed');
+for (const token of ['data-phase="plan"','data-phase="build"','data-phase="review"','docs/references/','role="tablist"','<table']) if (!html.includes(token)) throw new Error(`missing content ${token}`);
+for (const token of ['const phases','addEventListener','render(\'plan\')']) if (!js.includes(token)) throw new Error(`missing interaction ${token}`);
+console.log('interaction verification passed');
+if (html.includes('src="http') || html.includes('href="http')) throw new Error('external runtime dependency found');
+console.log('standalone verification passed');
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..e224203
--- /dev/null
+++ b/styles.css
@@ -0,0 +1 @@
+@font-face{font-family:Manrope;src:url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;600;700;800&display=swap')} :root{--paper:#f5f4f1;--ink:#172f42;--muted:#697b89;--accent:#7c78a8;--blue:#527f9f;--gold:#efc76b;--line:#d8dee2;--deep:#102536}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}main{padding:28px clamp(24px,6vw,96px) 80px}.topbar,.section-label{display:flex;justify-content:space-between;align-items:center}.brand{color:var(--ink);font-size:12px;font-weight:800;text-decoration:none;text-transform:uppercase}.mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:9px;border-radius:50%;color:var(--paper);background:var(--accent)}.edition,.eyebrow,.section-label,.thesis span,.captain span,.workers span,.route-table b,.skill-package>span,.rule span,.callout span,.sources{font:500 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase}.edition i{display:inline-block;width:6px;height:6px;margin:0 8px;border-radius:50%;background:var(--accent)}.hero{max-width:780px;padding:clamp(75px,12vh,145px) 0 85px}.eyebrow,.section-label,.thesis span{color:var(--accent)}h1{margin:16px 0 24px;font-size:clamp(56px,9vw,126px);line-height:.86;letter-spacing:-.08em}h1 em,h2 em{color:var(--blue);font-family:Georgia,serif;font-weight:400}.lede,.copy>p:last-child,.skills>div:first-child>p:last-child,.worktrees>div:first-child>p,.caption{max-width:570px;color:var(--muted);line-height:1.65}.thesis{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center;margin-bottom:110px;padding:28px;background:var(--gold)}.thesis div:first-child{display:grid;gap:16px}.thesis strong{font-size:clamp(24px,4vw,46px);line-height:1.05;letter-spacing:-.04em}.signal{display:flex;align-items:center;gap:10px}.signal i{width:28px;height:28px;border:1px solid var(--ink);background:var(--paper)}.signal i:nth-of-type(3){background:var(--blue)}.signal b{font:500 10px 'DM Mono',monospace}.fleet{margin-bottom:120px}.section-label{padding-bottom:14px;border-bottom:1px solid var(--line)}.section-label span:last-child{color:var(--muted)}.fleet-grid{display:grid;grid-template-columns:.8fr 50px 1.5fr;gap:24px;margin-top:30px;color:var(--paper);background:var(--deep)}.captain{display:grid;align-content:center;gap:16px;padding:32px}.captain span{color:var(--gold)}h2{margin:14px 0 20px;font-size:clamp(36px,5vw,65px);line-height:.98;letter-spacing:-.06em}.captain h2{font-size:clamp(24px,3vw,38px)}.captain code,.workers code{color:var(--gold);font:11px 'DM Mono',monospace}.arrow{display:grid;place-items:center;color:var(--gold);font-size:30px}.workers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#41596b}.workers article{display:grid;align-content:space-between;gap:20px;min-height:180px;padding:22px;background:var(--ink)}.workers span{color:#9eabb4}.workers strong{font-size:16px;line-height:1.2}.caption{margin:22px 0 0 auto}.workflow,.routing,.skills{display:grid;grid-template-columns:.7fr 1fr 1.3fr;gap:40px;align-items:start;margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.phase-tabs{display:grid;gap:8px}.phase-tabs button{display:grid;grid-template-columns:42px 1fr;gap:10px;padding:15px;border:1px solid var(--line);color:var(--ink);background:transparent;font:500 10px 'DM Mono',monospace;letter-spacing:.07em;text-align:left;cursor:pointer}.phase-tabs button b{color:var(--accent)}.phase-tabs button.active{color:var(--paper);border-color:var(--ink);background:var(--ink)}.phase-panel{min-height:260px;padding:30px;color:var(--paper);background:var(--accent)}.phase-meta{display:flex;justify-content:space-between;gap:15px;color:var(--gold);font:500 10px 'DM Mono',monospace}.phase-meta small{color:var(--paper);opacity:.7}.phase-panel h3{margin:44px 0 12px;font-size:clamp(24px,3vw,38px);line-height:1.05}.phase-panel p{line-height:1.6;opacity:.82}.phase-panel code{display:block;margin-top:26px;color:var(--gold);font:11px 'DM Mono',monospace}.handoff{margin-bottom:130px}.handoff table{width:100%;margin-top:30px;border-collapse:collapse;text-align:left}.handoff th,.handoff td{padding:17px 14px;border-bottom:1px solid var(--line)}.handoff thead{color:var(--paper);background:var(--ink);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.handoff tbody th{color:var(--blue);font:600 14px 'DM Mono',monospace}.handoff td{color:var(--muted);font-size:13px}.worktrees{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center;margin-bottom:130px;padding:45px;color:var(--paper);background:var(--deep)}.worktrees .eyebrow{color:var(--gold)}.worktrees h2{color:var(--paper)}.worktrees h2 em{color:var(--gold)}.worktrees>div:first-child>p{color:#b0bac1}.worktrees pre{margin:32px 0 0;padding:20px;overflow:auto;color:var(--gold);background:var(--ink)}pre code{font:12px/1.75 'DM Mono',monospace}.map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:90px}.repo{position:absolute;top:0;left:50%;width:180px;padding:17px;transform:translateX(-50%);color:var(--ink);background:var(--gold)}.map>div:not(.repo){min-height:135px;padding:20px;border:1px solid #41596b;background:var(--ink)}.repo span,.map>div:not(.repo) span{display:block;margin-bottom:12px;color:var(--accent);font:500 9px 'DM Mono',monospace}.repo strong,.map>div:not(.repo) strong{display:block;font:14px 'DM Mono',monospace}.repo small,.map>div:not(.repo) small{display:block;margin-top:12px;color:#9eabb4;font-size:11px}.routing{grid-template-columns:.8fr 1.2fr}.route-table{border-top:1px solid var(--line);border-left:1px solid var(--line)}.route-table>div{display:grid;grid-template-columns:.8fr .9fr 1.4fr}.route-table .head{color:var(--paper);background:var(--ink);font:500 10px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase}.route-table>div>*{padding:15px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.route-table strong{font-size:14px}.route-table b{color:var(--blue);letter-spacing:0;text-transform:none}.route-table small{color:var(--muted);font-size:12px}.skills{grid-template-columns:.8fr 1fr;margin-bottom:90px}.skill-package{display:grid;align-content:start;color:var(--paper);background:var(--blue)}.skill-package>span{padding:20px;color:var(--gold);border-bottom:1px solid #ffffff40}.skill-package>div{display:grid;grid-template-columns:1fr 1fr;gap:15px;padding:17px 20px;border-bottom:1px solid #ffffff40}.skill-package code{font:12px 'DM Mono',monospace}.skill-package small{opacity:.7}.skills>pre{grid-column:2;margin:0;padding:28px;overflow:auto;color:#d8dee2;background:var(--ink)}.rule{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:55px;padding-top:22px;border-top:4px solid var(--gold)}.rule strong{max-width:850px;font-size:clamp(24px,3.3vw,42px);line-height:1.12}.callout{display:grid;grid-template-columns:150px 1fr;gap:30px;margin-top:70px;padding:27px;background:var(--gold)}.callout strong{max-width:850px;font-size:clamp(22px,3vw,36px);line-height:1.1}.sources{margin-top:90px;color:var(--muted)}.sources p{color:var(--muted);font:13px/1.6 Manrope,Arial,sans-serif;letter-spacing:0;text-transform:none}.sources a{color:var(--blue);font-weight:700}@media(max-width:800px){.thesis,.fleet-grid,.workflow,.worktrees,.routing,.skills{grid-template-columns:1fr}.arrow{transform:rotate(90deg);min-height:35px}.workers{grid-template-columns:1fr}.skills>pre{grid-column:auto}.route-table,.handoff{overflow-x:auto}.route-table>div{min-width:620px}.handoff table{min-width:650px}.rule,.callout{grid-template-columns:1fr}}@media(max-width:600px){.edition{display:none}.worktrees{padding:24px}.map{grid-template-columns:1fr;padding-top:90px}}