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

feat: organize guide into focused chapters

Browse Source
This commit is contained in:
Marcos Paulo
2026-09-04 03:52:36 +00:00
parent 82fff29571
commit 94f3491d7a
10 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
agents/index.html
+1
View File
@@ -0,0 +1 @@
<!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="../">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>
chapters.css
+1
View File
@@ -0,0 +1 @@
:root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--red:#a7483f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:16px/1.6 Arial,sans-serif}main{max-width:1400px;margin:auto;padding:0 5vw}.top{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);font:700 11px monospace;letter-spacing:.08em;text-transform:uppercase}.top a{color:var(--ink);text-decoration:none}.hero{padding:100px 0 70px;max-width:950px}.eyebrow{color:var(--red);font:700 11px monospace;letter-spacing:.12em;text-transform:uppercase}.hero h1{margin:16px 0;font-size:clamp(52px,9vw,126px);line-height:.9;letter-spacing:-.07em}.hero h1 em,h2 em{font:400 .9em Georgia,serif;color:var(--red)}.hero p{max-width:680px;color:var(--muted);font-size:20px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:100px}.card{min-height:220px;padding:28px;background:var(--paper)}.card b{color:var(--red);font:24px monospace}.card h2{margin:18px 0 8px;font-size:25px;letter-spacing:-.04em}.card p{margin:0 0 14px;color:var(--muted)}.card a{color:var(--blue);font-weight:700}.model,.pipeline,.practice{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:80px 0;border-top:1px solid var(--line)}.model h2,.pipeline h2,.practice h2{margin:0;font-size:clamp(34px,5vw,70px);line-height:.95;letter-spacing:-.06em}.panel{padding:28px;background:var(--ink);color:var(--paper)}.panel strong{display:block;color:var(--gold);font:700 12px monospace;letter-spacing:.1em}.panel code{display:block;margin-top:18px;color:#d6e1e4;font:14px/1.8 ui-monospace,monospace;white-space:pre-wrap}.steps{display:grid;gap:1px;background:var(--line)}.steps article{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:20px;background:var(--paper)}.steps b{color:var(--red);font:20px monospace}.steps strong{display:block}.steps span{color:var(--muted)}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 70px}.links a{padding:10px 13px;color:var(--ink);border:1px solid var(--ink);text-decoration:none;font:11px monospace;text-transform:uppercase}.links a:hover{color:var(--paper);background:var(--ink)}footer{padding:30px 0 70px;color:var(--muted);font-size:13px}@media(max-width:800px){.grid,.model,.pipeline,.practice{grid-template-columns:1fr}.hero{padding:65px 0 45px}.model,.pipeline,.practice{gap:25px;padding:55px 0}}@media(max-width:520px){main{padding:0 16px}.top span{display:none}.hero h1{font-size:56px}.hero p{font-size:17px}.card{min-height:0}.steps article{grid-template-columns:45px 1fr}}
index.html
+2 -2
View File
@@ -31,6 +31,6 @@
pnpm typecheck; echo "typecheck=$?"</code></article><article><span>02 · BEHAVIOR</span><h3>Unit and contract</h3><p>Tests that repeat. Run before claiming done.</p><code>pnpm test; echo "test=$?" pnpm typecheck; echo "typecheck=$?"</code></article><article><span>02 · BEHAVIOR</span><h3>Unit and contract</h3><p>Tests that repeat. 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 UI and API</h3><p>Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.</p><code>pnpm check:ui; echo "ui=$?" cd services/api &amp;&amp; go test ./...</code></article><article><span>03 · INTEGRATION</span><h3>Real UI and API</h3><p>Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.</p><code>pnpm check:ui; echo "ui=$?"
TURBO_FORCE=true pnpm e2e</code></article></div><div class="verify-antipatterns"><span>FOUR WAYS A GREEN REPORT 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>A 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>Lint and unit can both be green while the page breaks on mobile and the API never returns 404.</p></div></article></div></div><article class="verify-cta"><span>RUN IT YOURSELF · two labs, under 10 minutes each</span><div class="verify-cta-grid"><a href="hands-on/starter/" class="verify-card"><strong>Path A · verification lab</strong><p>Fill the four-row comparison strip on the starter. Run A naively, Run B with <code>$gate-discipline</code> and <code>$webapp-testing</code>.</p><small>Open the starter →</small><small class="verify-card-source">Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter</span></small></a><a href="hands-on/rules/" class="verify-card"><strong>Path B · rules lab</strong><p>Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare diff size, gate invocations, and the names of checks the agent names back.</p><small>Open the rules lab →</small><small class="verify-card-source">Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules</span></small></a></div></article></section> TURBO_FORCE=true pnpm e2e</code></article></div><div class="verify-antipatterns"><span>FOUR WAYS A GREEN REPORT 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>A 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>Lint and unit can both be green while the page breaks on mobile and the API never returns 404.</p></div></article></div></div><article class="verify-cta"><span>RUN IT YOURSELF · two labs, under 10 minutes each</span><div class="verify-cta-grid"><a href="hands-on/starter/" class="verify-card"><strong>Path A · verification lab</strong><p>Fill the four-row comparison strip on the starter. Run A naively, Run B with <code>$gate-discipline</code> and <code>$webapp-testing</code>.</p><small>Open the starter →</small><small class="verify-card-source">Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starter</span></small></a><a href="hands-on/rules/" class="verify-card"><strong>Path B · rules lab</strong><p>Toggle every rule off, run the prompt. Toggle every rule on, run it again. Compare diff size, gate invocations, and the names of checks the agent names back.</p><small>Open the rules lab →</small><small class="verify-card-source">Clone ↗ <span>git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules</span></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> <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="skills-review/">Skills review desk →</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> <section class="chapter-route"><div class="section-label"><span>Navigate by idea</span><span>short chapters / one system</span></div><p>Prefer a focused chapter? Start with the <a href="summary/">route map</a>, then jump directly to <a href="models/">models</a>, <a href="agents/">agents and worktrees</a>, <a href="skills/">skill creation</a>, <a href="rules/">rules</a>, or the <a href="skills-review/">skills review desk</a>.</p></section></main><script src="app.js" defer></script>
</body></html> </body></html>
models/index.html
+1
View File
@@ -0,0 +1 @@
<!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="../">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>
scripts/verify.mjs
+12 -1
View File
@@ -13,6 +13,12 @@ const rulesJs = read('rules/app.js');
const rulesCss = read('rules/styles.css'); const rulesCss = read('rules/styles.css');
const reviewHtml = read('skills-review/index.html'); const reviewHtml = read('skills-review/index.html');
const reviewJs = read('skills-review/app.js'); const reviewJs = read('skills-review/app.js');
const reviewFiles = read('skills-review/files.js');
const chaptersCss = read('chapters.css');
const summaryHtml = read('summary/index.html');
const modelsHtml = read('models/index.html');
const agentsHtml = read('agents/index.html');
const skillsHtml = read('skills/index.html');
const reviewCatalog = read('skills-review/catalog.js'); const reviewCatalog = read('skills-review/catalog.js');
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}`); 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'); console.log('content verification passed');
@@ -34,11 +40,16 @@ for (const token of ['data-lang="en"','data-lang="pt"','data-copy-prompt','aria-
console.log('rules interaction verification passed'); console.log('rules interaction verification passed');
if (!html.includes('href="rules/"')) throw new Error('main presentation does not link to rules page'); if (!html.includes('href="rules/"')) throw new Error('main presentation does not link to rules page');
if (!html.includes('href="skills-review/"')) throw new Error('main presentation does not link to skills review page'); if (!html.includes('href="skills-review/"')) throw new Error('main presentation does not link to skills review page');
for (const token of ['summary/','models/','agents/','skills/','chapter-route']) if (!html.includes(token)) throw new Error(`main presentation missing chapter route ${token}`);
if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http')) throw new Error('rules page has an external runtime dependency'); if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http')) throw new Error('rules page has an external runtime dependency');
for (const token of ['@media(min-width:2200px)','@media(max-width:900px)','@media(max-width:600px)','prefers-reduced-motion']) if (!rulesCss.includes(token)) throw new Error(`missing rules responsive contract ${token}`); for (const token of ['@media(min-width:2200px)','@media(max-width:900px)','@media(max-width:600px)','prefers-reduced-motion']) if (!rulesCss.includes(token)) throw new Error(`missing rules responsive contract ${token}`);
console.log('rules standalone verification passed'); console.log('rules standalone verification passed');
for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','?author=Name&amp;skill=skill-id&amp;view=improved']) if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`); for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','?author=Name&amp;skill=skill-id&amp;view=improved']) if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`);
for (const token of ["from './catalog.js'",'function renderList','function renderDetail','function original','function selectFromUrl','function syncUrl','URLSearchParams','navigator.clipboard','document.execCommand','download']) if (!reviewJs.includes(token)) throw new Error(`missing review interaction ${token}`); for (const token of ["from './catalog.js'", "from './files.js'",'function renderList','function renderDetail','function original','function selectFromUrl','function syncUrl','URLSearchParams','navigator.clipboard','document.execCommand','download','data-file','searchParams.set(\'file\'']) if (!reviewJs.includes(token)) throw new Error(`missing review interaction ${token}`);
for (const token of ['ndo-repro','reference.md','files =']) if (!reviewFiles.includes(token)) throw new Error(`missing review file manifest ${token}`);
if ((reviewCatalog.match(/id:'/g) || []).length !== 16) throw new Error('review catalog does not cover all submissions'); if ((reviewCatalog.match(/id:'/g) || []).length !== 16) throw new Error('review catalog does not cover all submissions');
if (!reviewCatalog.includes('hardcoded password') || !reviewCatalog.includes('safety-redacted') || !reviewJs.includes('[REDACTED]')) throw new Error('review catalog does not record secret safety handling'); if (!reviewCatalog.includes('hardcoded password') || !reviewCatalog.includes('safety-redacted') || !reviewJs.includes('[REDACTED]')) throw new Error('review catalog does not record secret safety handling');
console.log('skills review verification passed'); console.log('skills review verification passed');
for (const page of [summaryHtml, modelsHtml, agentsHtml, skillsHtml]) if (!page.includes('../chapters.css') || !page.includes('ROUTE MAP')) throw new Error('chapter page missing shared navigation');
for (const token of ['--ink','@media(max-width:800px)','@media(max-width:520px)']) if (!chaptersCss.includes(token)) throw new Error(`missing chapter responsive contract ${token}`);
console.log('chapter route verification passed');
skills-review/app.js
+12 -7
View File
@@ -1,6 +1,7 @@
import { catalog } from './catalog.js'; import { catalog } from './catalog.js';
import { files } from './files.js';
const state = { selected: catalog[0], query: '', preview: 'original', source: '' }; const state = { selected: catalog[0], query: '', preview: 'original', source: '', file: null };
const $ = (selector) => document.querySelector(selector); const $ = (selector) => document.querySelector(selector);
const escape = (value) => value.replace(/[&<>"']/g, (character) => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#039;' })[character]); const escape = (value) => value.replace(/[&<>"']/g, (character) => ({ '&':'&amp;', '<':'&lt;', '>':'&gt;', '"':'&quot;', "'":'&#039;' })[character]);
const redact = (value) => value.replace(/(NDO_PASS[^\n=]*[=:]\s*["']?)[^\n"']+/gi, '$1[REDACTED]').replace(/(password["']?\s*[:=]\s*["']?)[^\n"']+/gi, '$1[REDACTED]').replace(/\bsysadm@netcracker\.com\b/gi, '[REDACTED SERVICE ACCOUNT]'); const redact = (value) => value.replace(/(NDO_PASS[^\n=]*[=:]\s*["']?)[^\n"']+/gi, '$1[REDACTED]').replace(/(password["']?\s*[:=]\s*["']?)[^\n"']+/gi, '$1[REDACTED]').replace(/\bsysadm@netcracker\.com\b/gi, '[REDACTED SERVICE ACCOUNT]');
@@ -16,6 +17,7 @@ function syncUrl() {
url.searchParams.set('author', state.selected.author); url.searchParams.set('author', state.selected.author);
url.searchParams.set('skill', state.selected.id); url.searchParams.set('skill', state.selected.id);
url.searchParams.set('view', state.preview); url.searchParams.set('view', state.preview);
if (state.file && state.file.name !== 'SKILL.md') url.searchParams.set('file', state.file.name); else url.searchParams.delete('file');
history.replaceState({}, '', url); history.replaceState({}, '', url);
} }
function selectFromUrl() { function selectFromUrl() {
@@ -28,30 +30,33 @@ function selectFromUrl() {
state.selected = byId || byAuthor?.[0] || catalog[0]; state.selected = byId || byAuthor?.[0] || catalog[0];
state.query = byAuthor ? state.selected.author.toLowerCase() : ''; state.query = byAuthor ? state.selected.author.toLowerCase() : '';
state.preview = view === 'improved' ? 'improved' : 'original'; state.preview = view === 'improved' ? 'improved' : 'original';
const available = files[state.selected.id] || [{ name:'SKILL.md', path:state.selected.path, kind:'skill' }];
state.file = available.find((item) => item.name === params.get('file')) || available[0];
$('#skill-filter').value = byAuthor ? state.selected.author : ''; $('#skill-filter').value = byAuthor ? state.selected.author : '';
} }
function renderList() { function renderList() {
const items = visible(); const items = visible();
$('#count').textContent = `${items.length} of ${catalog.length} reviewed`; $('#count').textContent = `${items.length} of ${catalog.length} reviewed`;
$('#skill-list').innerHTML = items.map((item) => `<button role="option" aria-selected="${item.id === state.selected.id}" class="${item.id === state.selected.id ? 'active' : ''}" data-id="${item.id}"><span>${escape(item.author)}</span><strong>${escape(item.title)}</strong><small>${escape(item.status)}</small></button>`).join(''); $('#skill-list').innerHTML = items.map((item) => `<button role="option" aria-selected="${item.id === state.selected.id}" class="${item.id === state.selected.id ? 'active' : ''}" data-id="${item.id}"><span>${escape(item.author)}</span><strong>${escape(item.title)}</strong><small>${escape(item.status)}</small></button>`).join('');
$('#skill-list').querySelectorAll('button').forEach((button) => button.addEventListener('click', () => { state.selected = catalog.find((item) => item.id === button.dataset.id); state.preview = 'original'; state.source = ''; syncUrl(); renderList(); renderDetail(); })); $('#skill-list').querySelectorAll('button').forEach((button) => button.addEventListener('click', () => { state.selected = catalog.find((item) => item.id === button.dataset.id); state.file = (files[state.selected.id] || [{ name:'SKILL.md', path:state.selected.path, kind:'skill' }])[0]; state.preview = 'original'; state.source = ''; syncUrl(); renderList(); renderDetail(); }));
} }
async function original(entry) { async function original(entry) {
if (state.source) return state.source; if (state.source) return state.source;
try { state.source = redact(await (await fetch(entry.path)).text()); } catch { state.source = '# Original preview unavailable\n\nServe this site from the repository root to load the submitted source.'; } try { state.source = redact(await (await fetch(state.file.path)).text()); } catch { state.source = '# Original preview unavailable\n\nServe this site from the repository root to load the submitted source.'; }
renderDetail(); renderDetail();
return state.source; return state.source;
} }
function renderDetail() { function renderDetail() {
const entry = state.selected; const markdown = state.preview === 'original' ? (state.source || 'Loading original Markdown…') : entry.improved; const entry = state.selected; const available = files[entry.id] || [{ name:'SKILL.md', path:entry.path, kind:'skill' }]; const markdown = state.preview === 'original' ? (state.source || 'Loading original Markdown…') : entry.improved;
$('#detail').innerHTML = `<header><div><span class="status">${escape(entry.status)}</span><h2>${escape(entry.title)}</h2><p>Submitted by <a class="author-link" href="?author=${encodeURIComponent(entry.author)}">${escape(entry.author)}</a> · <a class="share-link" href="?author=${encodeURIComponent(entry.author)}&skill=${encodeURIComponent(entry.id)}&view=${state.preview}">share review ↗</a></p></div><div class="switch" role="group" aria-label="Preview version"><button class="${state.preview === 'original' ? 'active' : ''}" data-preview="original">Original</button><button class="${state.preview === 'improved' ? 'active' : ''}" data-preview="improved">Improved draft</button></div></header> $('#detail').innerHTML = `<header><div><span class="status">${escape(entry.status)}</span><h2>${escape(entry.title)}</h2><p>Submitted by <a class="author-link" href="?author=${encodeURIComponent(entry.author)}">${escape(entry.author)}</a> · <a class="share-link" href="?author=${encodeURIComponent(entry.author)}&skill=${encodeURIComponent(entry.id)}&view=${state.preview}">share review ↗</a></p></div><div class="switch" role="group" aria-label="Preview version"><button class="${state.preview === 'original' ? 'active' : ''}" data-preview="original">Original</button><button class="${state.preview === 'improved' ? 'active' : ''}" data-preview="improved">Improved draft</button></div></header>
<div class="purpose"><span>THE JOB</span><p>${escape(entry.focus)}</p></div> <div class="purpose"><span>THE JOB</span><p>${escape(entry.focus)}</p></div>
<div class="review-grid"><section><span>WHAT'S ALREADY WORKING</span><ul>${entry.wins.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section><section><span>HIGHEST-VALUE IMPROVEMENTS</span><ul>${entry.improve.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section></div> <div class="review-grid"><section><span>WHAT'S ALREADY WORKING</span><ul>${entry.wins.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section><section><span>HIGHEST-VALUE IMPROVEMENTS</span><ul>${entry.improve.map((item) => `<li>${escape(item)}</li>`).join('')}</ul></section></div>
<aside class="extras"><span>GOOD NEXT ADDITION</span>${escape(entry.extras)}</aside> <aside class="extras"><span>GOOD NEXT ADDITION</span><p>${escape(entry.extras)}</p></aside>
<section class="preview"><header><span>${state.preview === 'original' ? 'ORIGINAL / SAFETY-REDACTED WHERE NEEDED' : 'IMPROVED DRAFT / READY TO ADAPT'}</span><div><button data-copy>Copy</button><button data-download>Download</button></div></header><pre><code>${escape(markdown)}</code></pre></section>`; <section class="preview"><header><span>${state.preview === 'original' ? 'ORIGINAL / SAFETY-REDACTED WHERE NEEDED' : 'IMPROVED DRAFT / READY TO ADAPT'}</span><div><button data-copy>Copy</button><button data-download>Download</button></div></header><nav class="file-tabs" aria-label="Skill package files">${available.map((item) => `<button class="${item.name === state.file.name ? 'active' : ''}" data-file="${escape(item.name)}"><span>${escape(item.kind)}</span>${escape(item.name)}</button>`).join('')}</nav><pre><code>${escape(markdown)}</code></pre></section>`;
$('#detail').querySelectorAll('[data-file]').forEach((button) => button.addEventListener('click', () => { state.file = available.find((item) => item.name === button.dataset.file) || available[0]; state.source = ''; state.preview = 'original'; syncUrl(); renderDetail(); }));
$('#detail').querySelectorAll('[data-preview]').forEach((button) => button.addEventListener('click', () => { state.preview = button.dataset.preview; state.source = state.preview === 'original' ? state.source : ''; syncUrl(); renderDetail(); if (state.preview === 'original') original(entry); })); $('#detail').querySelectorAll('[data-preview]').forEach((button) => button.addEventListener('click', () => { state.preview = button.dataset.preview; state.source = state.preview === 'original' ? state.source : ''; syncUrl(); renderDetail(); if (state.preview === 'original') original(entry); }));
$('[data-copy]').addEventListener('click', async () => { const content = state.preview === 'original' ? await original(entry) : entry.improved; await copy(content); $('[data-copy]').textContent = 'Copied'; }); $('[data-copy]').addEventListener('click', async () => { const content = state.preview === 'original' ? await original(entry) : entry.improved; await copy(content); $('[data-copy]').textContent = 'Copied'; });
$('[data-download]').addEventListener('click', async () => download(`${entry.id}-${state.preview}.md`, state.preview === 'original' ? await original(entry) : entry.improved)); $('[data-download]').addEventListener('click', async () => download(`${entry.id}-${state.file.name.replaceAll('/', '-')}-${state.preview}.md`, state.preview === 'original' ? await original(entry) : entry.improved));
if (state.preview === 'original' && !state.source) original(entry); if (state.preview === 'original' && !state.source) original(entry);
} }
$('#skill-filter').addEventListener('input', (event) => { state.query = event.target.value.toLowerCase().trim(); renderList(); }); $('#skill-filter').addEventListener('input', (event) => { state.query = event.target.value.toLowerCase().trim(); renderList(); });
skills-review/files.js
+9
View File
@@ -0,0 +1,9 @@
export const files = {
'angular-accessibility-root': [{ name:'SKILL.md', path:'../submitted-skills/Leonardo%20Uno/SKILL.md', kind:'skill' }, { name:'skills/angular-accessibility/SKILL.md', path:'../submitted-skills/Leonardo%20Uno/skills/angular-accessibility/SKILL.md', kind:'skill' }],
'copy-quote-info-to-payload': [{ name:'SKILL.md', path:'../submitted-skills/Lucas%20Mantovan/skills/copy-quote-info-to-payload/SKILL.md', kind:'skill' }, { name:'reference.md', path:'../submitted-skills/Lucas%20Mantovan/skills/copy-quote-info-to-payload/reference.md', kind:'reference' }],
'ndo-repro': [{ name:'SKILL.md', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/SKILL.md', kind:'skill' }, { name:'envs.tsv', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/envs.tsv', kind:'data' }, { name:'lib/env.sh', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/lib/env.sh', kind:'script' }, { name:'ndo-api.sh', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/ndo-api.sh', kind:'script' }, { name:'ndo-ship.sh', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/ndo-ship.sh', kind:'script' }, { name:'reference/bom-Dockerfile_local.example', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/reference/bom-Dockerfile_local.example', kind:'reference' }, { name:'reference/dockerfile-local.md', path:'../submitted-skills/Pedro%20Aranha/skills/ndo-repro/reference/dockerfile-local.md', kind:'reference' }],
'am-i-free': [{ name:'SKILL.md', path:'../submitted-skills/Vinicius%20Nascimento/skills/am-i-free/SKILL.md', kind:'skill' }, { name:'am_i_free.py', path:'../submitted-skills/Vinicius%20Nascimento/skills/am-i-free/am_i_free.py', kind:'script' }],
'back-to-work': [{ name:'SKILL.md', path:'../submitted-skills/Vinicius%20Nascimento/skills/back-to-work/SKILL.md', kind:'skill' }, { name:'back.sh', path:'../submitted-skills/Vinicius%20Nascimento/skills/back-to-work/back.sh', kind:'script' }],
'long-day-start': [{ name:'SKILL.md', path:'../submitted-skills/Vinicius%20Nascimento/skills/long-day-start/SKILL.md', kind:'skill' }, { name:'start.sh', path:'../submitted-skills/Vinicius%20Nascimento/skills/long-day-start/start.sh', kind:'script' }],
'lunch-time': [{ name:'SKILL.md', path:'../submitted-skills/Vinicius%20Nascimento/skills/lunch-time/SKILL.md', kind:'skill' }, { name:'lunch.sh', path:'../submitted-skills/Vinicius%20Nascimento/skills/lunch-time/lunch.sh', kind:'script' }]
};
skills-review/styles.css
+2
View File
File diff suppressed because one or more lines are too long
skills/index.html
+1
View File
@@ -0,0 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>AI For Dummies — Skills</title><link rel="stylesheet" href="../chapters.css"></head><body><main><header class="top"><a href="../summary/">← ROUTE MAP</a><span>03 / SKILLS</span><a href="../skills-review/">review desk ↗</a></header><section class="hero"><p class="eyebrow">Reusable judgment</p><h1>Teach the<br><em>decision.</em></h1><p>A skill changes behavior. Keep the trigger precise, put the workflow in <code>SKILL.md</code>, and move conditional facts, scripts, and examples into focused files.</p></section><section class="pipeline"><div><p class="eyebrow">Package anatomy</p><h2>One job.<br>More than<br>one <em>file.</em></h2></div><div class="panel"><strong>REVIEW-UI / SKILL PACKAGE</strong><code>├── SKILL.md → trigger + workflow · ├── references/ → conditional facts · ├── scripts/ → deterministic checks · └── assets/ → templates + examples</code></div></section><section class="practice"><div><p class="eyebrow">Create a skill</p><h2>Observe →<br>trigger →<br>validate</h2></div><div class="steps"><article><b>01</b><div><strong>Observe friction</strong><span>Find a repeated decision or failure.</span></div></article><article><b>02</b><div><strong>Define the trigger</strong><span>Say when it should load and when it should stay out.</span></div></article><article><b>03</b><div><strong>Choose anatomy</strong><span>Use references for facts and scripts for deterministic mechanics.</span></div></article><article><b>04</b><div><strong>Evaluate behavior</strong><span>Test realistic prompts, edge cases, safety, and evidence.</span></div></article></div></section><nav class="links"><a href="../agents/">Agents & trees →</a><a href="../rules/">Rules case study →</a><a href="../skills-review/">Review submitted skills →</a></nav></main></body></html>
summary/index.html
+1
View File
@@ -0,0 +1 @@
<!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="../">← 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 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>