feat: add AI For Dummies presentation

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

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');

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.

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>

package.json

@@ -0,0 +1,5 @@
+{
+  "name": "ai-for-dummies",
+  "private": true,
+  "scripts": { "verify": "node scripts/verify.mjs", "serve": "python3 -m http.server 4173" }
+}

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');