From 94f3491d7a494af570a51f66023af500d5cf7613 Mon Sep 17 00:00:00 2001 From: Marcos Paulo Date: Fri, 4 Sep 2026 03:52:36 +0000 Subject: [PATCH] feat: organize guide into focused chapters --- agents/index.html | 1 + chapters.css | 1 + index.html | 4 ++-- models/index.html | 1 + scripts/verify.mjs | 13 ++++++++++++- skills-review/app.js | 19 ++++++++++++------- skills-review/files.js | 9 +++++++++ skills-review/styles.css | 2 ++ skills/index.html | 1 + summary/index.html | 1 + 10 files changed, 42 insertions(+), 10 deletions(-) create mode 100644 agents/index.html create mode 100644 chapters.css create mode 100644 models/index.html create mode 100644 skills-review/files.js create mode 100644 skills/index.html create mode 100644 summary/index.html diff --git a/agents/index.html b/agents/index.html new file mode 100644 index 0000000..ee4d1f3 --- /dev/null +++ b/agents/index.html @@ -0,0 +1 @@ +AI For Dummies — Agents and trees
← ROUTE MAP02 / AGENTS & TREESfield guide ↗

Subagent workflow

One branch
per hand.

Agents work when roles, files, and evidence are bounded. A worktree gives each worker its own checkout while the orchestrator protects intent.

The tree

Split at
the seam.

MAIN / ORCHESTRATOR├── agent/ui → components + visual states · ├── agent/tests → acceptance + regressions · └── agent/docs → guide + examples · merge after each leaf returns a diff and evidence
FRAME

Orchestrator

Owns scope, task graph, boundaries, and integration.

HAND OFF

Worker

Owns one coherent slice and one worktree.

PROVE

Verifier

Re-runs gates and reports remaining gaps.

Handoff

Context that
can travel.

01
BriefGoal, owned files, dependencies, non-goals, acceptance.
02
IsolationOne branch and worktree per independent change.
03
EvidenceCommands, result, changed files, screenshots, gaps.
diff --git a/chapters.css b/chapters.css new file mode 100644 index 0000000..a3f95a0 --- /dev/null +++ b/chapters.css @@ -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}} diff --git a/index.html b/index.html index 143efa1..32b9dd0 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,6 @@ pnpm typecheck; echo "typecheck=$?"
02 · BEHAVIOR

Unit and contract

Tests that repeat. Run before claiming done.

pnpm test; echo "test=$?" cd services/api && go test ./...
03 · INTEGRATION

Real UI and API

Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404.

pnpm check:ui; echo "ui=$?" TURBO_FORCE=true pnpm e2e
FOUR WAYS A GREEN REPORT IS FALSE
1
Pipe a gate

tail, grep, or head hide the real exit code — a pipeline returns the last command's status.

2
Swallow a rejection

A silent .catch(() => {}) hides a panic, an upstream limit, or a partial failure.

3
Trust the cache

Turbo caches results. A gate that "passes" may not have run — use TURBO_FORCE=true.

4
Skip the third layer

Lint and unit can both be green while the page breaks on mobile and the API never returns 404.

RUN IT YOURSELF · two labs, under 10 minutes each
Path A · verification lab

Fill the four-row comparison strip on the starter. Run A naively, Run B with $gate-discipline and $webapp-testing.

Open the starter →Clone ↗ git.marcospaulo.dev.br/.../src/branch/pages/hands-on/starterPath B · rules lab

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.

Open the rules lab →Clone ↗ git.marcospaulo.dev.br/.../src/branch/pages/hands-on/rules
-
Keep learning12 new readings + primary docs

Go deeper with official documentation, production case studies, Medium, and practitioner workflows. Rules and enforcement case study → Primary references → 12-part reading path →

- +
Keep learning12 new readings + primary docs

Go deeper with official documentation, production case studies, Medium, and practitioner workflows. Rules and enforcement case study → Skills review desk → Primary references → 12-part reading path →

+
Navigate by ideashort chapters / one system

Prefer a focused chapter? Start with the route map, then jump directly to models, agents and worktrees, skill creation, rules, or the skills review desk.

diff --git a/models/index.html b/models/index.html new file mode 100644 index 0000000..de64d5c --- /dev/null +++ b/models/index.html @@ -0,0 +1 @@ +AI For Dummies — Models
← ROUTE MAP01 / MODELSfield guide ↗

Model routing

Choose the
engine.

A model has a capability ceiling. Effort controls how much room it gets to reason. Route by uncertainty and verification cost.

LOW

Bounded rhythm

Lookup, small edits, formatting, and transformations with clear checks.

MEDIUM

Default work

Normal implementation where the contract is clear but context matters.

HIGH

Ambiguity

Planning, architecture, security judgment, and hard failures.

Two knobs

Capability
× effort

ROUTING RULEstrong model + high effort → frame ambiguity · light model + low effort → bounded execution · raise one knob at a time → compare evidence

Sequence

Spend judgment
where it compounds.

01
PlanStrong model: scope, risks, acceptance, and worktree split.
02
BuildFocused worker: smallest context and lightest model that can pass.
03
ReviewIndependent pass when missed issues cost more than the call.
diff --git a/scripts/verify.mjs b/scripts/verify.mjs index 0381d3c..121bdf3 100644 --- a/scripts/verify.mjs +++ b/scripts/verify.mjs @@ -13,6 +13,12 @@ const rulesJs = read('rules/app.js'); const rulesCss = read('rules/styles.css'); const reviewHtml = read('skills-review/index.html'); 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'); 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'); @@ -34,11 +40,16 @@ for (const token of ['data-lang="en"','data-lang="pt"','data-copy-prompt','aria- 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="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'); 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'); for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','?author=Name&skill=skill-id&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.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'); +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'); diff --git a/skills-review/app.js b/skills-review/app.js index 549da88..7aa4ed9 100644 --- a/skills-review/app.js +++ b/skills-review/app.js @@ -1,6 +1,7 @@ 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 escape = (value) => value.replace(/[&<>"']/g, (character) => ({ '&':'&', '<':'<', '>':'>', '"':'"', "'":''' })[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]'); @@ -16,6 +17,7 @@ function syncUrl() { url.searchParams.set('author', state.selected.author); url.searchParams.set('skill', state.selected.id); 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); } function selectFromUrl() { @@ -28,30 +30,33 @@ function selectFromUrl() { state.selected = byId || byAuthor?.[0] || catalog[0]; state.query = byAuthor ? state.selected.author.toLowerCase() : ''; 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 : ''; } function renderList() { const items = visible(); $('#count').textContent = `${items.length} of ${catalog.length} reviewed`; $('#skill-list').innerHTML = items.map((item) => ``).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) { 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(); return state.source; } 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 = `
${escape(entry.status)}

${escape(entry.title)}

Submitted by ${escape(entry.author)} ·

THE JOB

${escape(entry.focus)}

WHAT'S ALREADY WORKING
    ${entry.wins.map((item) => `
  • ${escape(item)}
    • `).join('')}
HIGHEST-VALUE IMPROVEMENTS
    ${entry.improve.map((item) => `
  • ${escape(item)}
    • `).join('')}
- -
${state.preview === 'original' ? 'ORIGINAL / SAFETY-REDACTED WHERE NEEDED' : 'IMPROVED DRAFT / READY TO ADAPT'}
${escape(markdown)}
`; + +
${state.preview === 'original' ? 'ORIGINAL / SAFETY-REDACTED WHERE NEEDED' : 'IMPROVED DRAFT / READY TO ADAPT'}
${escape(markdown)}
`; + $('#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); })); $('[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); } $('#skill-filter').addEventListener('input', (event) => { state.query = event.target.value.toLowerCase().trim(); renderList(); }); diff --git a/skills-review/files.js b/skills-review/files.js new file mode 100644 index 0000000..55a22e5 --- /dev/null +++ b/skills-review/files.js @@ -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' }] +}; diff --git a/skills-review/styles.css b/skills-review/styles.css index 3258c85..5fe4b2f 100644 --- a/skills-review/styles.css +++ b/skills-review/styles.css @@ -1 +1,3 @@ :root{--ink:#122534;--paper:#f6f3ed;--line:#d0d5d2;--muted:#65717a;--blue:#215675;--gold:#ebbf58;--violet:#6b668f}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:15px/1.6 Arial,sans-serif}main{max-width:1500px;margin:auto;padding:0 4vw}.topbar{display:flex;justify-content:space-between;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);color:var(--muted);font:700 10px monospace;letter-spacing:.08em;text-transform:uppercase}.topbar a{color:var(--ink);text-decoration:none}.hero{max-width:1040px;padding:105px 0 75px}.eyebrow,.status,.purpose span,.review-grid span,.extras span,.preview header span{font:700 10px monospace;letter-spacing:.1em}.eyebrow{color:#a7483f}.hero h1,.method h2{margin:14px 0;font-size:clamp(48px,8vw,112px);line-height:.92;letter-spacing:-.07em}.hero em,.method em{color:#a7483f;font-family:Georgia,serif;font-weight:400}.hero p:last-child{max-width:620px;color:var(--muted);font-size:18px}.principles{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.principles article{display:grid;gap:10px;min-height:175px;padding:22px;background:var(--paper)}.principles b{color:#a7483f;font:22px monospace}.principles strong{font-size:18px}.principles span{color:var(--muted);font-size:13px}.method{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;padding:120px 0 55px}.method h2{font-size:clamp(40px,5vw,70px)}.method ol{margin:0;padding-left:20px;color:var(--muted)}.method li+li{margin-top:9px}.catalog{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--line);background:var(--line);gap:1px}.catalog aside{padding:24px;background:#e9eeed}.catalog label{display:block;margin:32px 0 7px;font:700 10px monospace;letter-spacing:.08em;text-transform:uppercase}.catalog input{width:100%;padding:12px;border:1px solid #9ba7a5;background:var(--paper);font:inherit}.count{color:var(--muted);font:11px monospace}#skill-list{display:grid;gap:1px;border-top:1px solid var(--line)}#skill-list button{display:grid;grid-template-columns:1fr auto;gap:3px;padding:14px;border:0;border-bottom:1px solid var(--line);color:var(--ink);background:transparent;text-align:left;cursor:pointer}#skill-list button span{grid-column:1/-1;color:var(--muted);font:10px monospace}#skill-list button strong{font-size:13px}#skill-list button small{color:#a7483f;font:9px monospace;text-transform:uppercase}#skill-list button:hover,#skill-list button.active{color:var(--paper);background:var(--ink)}#skill-list button.active span,#skill-list button.active small{color:var(--gold)}.detail{min-width:0;padding:38px;background:var(--paper)}.detail>header{display:flex;justify-content:space-between;gap:25px;align-items:start}.status{color:#a7483f}.detail h2{margin:5px 0;font-size:clamp(30px,4vw,58px);letter-spacing:-.06em}.detail header p{margin:0;color:var(--muted)}.switch{display:flex;border:1px solid var(--ink)}button{font:inherit}.switch button,.preview button{padding:9px 11px;border:0;background:transparent;cursor:pointer;font:700 10px monospace}.switch button.active{color:var(--paper);background:var(--ink)}.purpose{display:grid;grid-template-columns:150px 1fr;gap:20px;margin:45px 0 20px;padding:20px;background:var(--gold)}.purpose p{margin:0;font-size:18px;line-height:1.4}.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.review-grid section{padding:22px;background:var(--paper)}.review-grid span{color:#a7483f}.review-grid ul{margin:14px 0 0;padding-left:20px}.review-grid li+li{margin-top:9px}.extras{margin:1px 0 25px;padding:18px 22px;color:var(--paper);background:var(--blue)}.extras span{display:block;margin-bottom:8px;color:var(--gold)}.preview{border:1px solid var(--ink);background:var(--ink)}.preview header{display:flex;justify-content:space-between;gap:20px;padding:14px;color:var(--paper);border-bottom:1px solid #486175}.preview header span{color:var(--gold)}.preview button{color:var(--paper);border:1px solid #486175}.preview button:hover{background:#29455a}.preview pre{max-height:540px;margin:0;padding:24px;overflow:auto;color:#d6e1e4;background:#0c1a25}.preview code{font:12px/1.65 ui-monospace,monospace;white-space:pre-wrap}.research{margin:100px 0;padding:35px;color:var(--paper);background:var(--violet)}.research .eyebrow{color:var(--gold)}.research>p:not(.eyebrow){max-width:850px;font:20px/1.45 Georgia,serif}.research div{display:flex;flex-wrap:wrap;gap:12px}.research a{padding:8px 10px;color:var(--paper);border:1px solid #ffffff66;font:10px monospace;text-decoration:none}footer{padding:10px 0 50px;color:var(--muted);font-size:12px}footer code{color:var(--ink)}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #a7483f;outline-offset:2px}@media(max-width:850px){.principles{grid-template-columns:1fr 1fr}.catalog{grid-template-columns:1fr}.method{grid-template-columns:1fr;gap:25px;padding-top:80px}.detail{padding:24px}.review-grid{grid-template-columns:1fr}}@media(max-width:530px){main{padding:0 16px}.topbar span{display:none}.hero{padding:65px 0 45px}.principles{grid-template-columns:1fr}.detail>header,.preview header{display:block}.switch{margin-top:18px;width:max-content}.purpose{grid-template-columns:1fr}.preview header div{margin-top:12px}} +/* Review surface overrides: keep suggestions readable and packages navigable. */ +.extras{color:var(--ink);background:#e5eeeb;border-left:4px solid var(--blue)}.extras span{color:var(--blue)}.extras p{margin:0}.file-tabs{display:flex;gap:1px;overflow-x:auto;padding:10px 14px;background:#122534;border-bottom:1px solid #486175}.file-tabs button{display:grid;gap:1px;min-width:max-content;padding:7px 10px;color:#d6e1e4;background:transparent;border:1px solid #486175;cursor:pointer;text-align:left;font:11px ui-monospace,monospace}.file-tabs button span{color:#ebbf58;font-size:9px;text-transform:uppercase}.file-tabs button.active,.file-tabs button:hover{color:#122534;background:#ebbf58}.file-tabs button.active span,.file-tabs button:hover span{color:#122534} diff --git a/skills/index.html b/skills/index.html new file mode 100644 index 0000000..4418bd9 --- /dev/null +++ b/skills/index.html @@ -0,0 +1 @@ +AI For Dummies — Skills
← ROUTE MAP03 / SKILLSreview desk ↗

Reusable judgment

Teach the
decision.

A skill changes behavior. Keep the trigger precise, put the workflow in SKILL.md, and move conditional facts, scripts, and examples into focused files.

Package anatomy

One job.
More than
one file.

REVIEW-UI / SKILL PACKAGE├── SKILL.md → trigger + workflow · ├── references/ → conditional facts · ├── scripts/ → deterministic checks · └── assets/ → templates + examples

Create a skill

Observe →
trigger →
validate

01
Observe frictionFind a repeated decision or failure.
02
Define the triggerSay when it should load and when it should stay out.
03
Choose anatomyUse references for facts and scripts for deterministic mechanics.
04
Evaluate behaviorTest realistic prompts, edge cases, safety, and evidence.
diff --git a/summary/index.html b/summary/index.html new file mode 100644 index 0000000..a1184ec --- /dev/null +++ b/summary/index.html @@ -0,0 +1 @@ +AI For Dummies — Route map
← AI FOR DUMMIES00 / ROUTE MAPreview desk ↗

Start here

Ship the
system.

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.

05

Practice

Compare prompts and skill-enabled runs.

Open lab →
06

Review desk

Browse original files and improved drafts.

Open desk →