6 Commits

Author SHA1 Message Date
Marcos Paulo 054393f7af feat(15d): complete localization of full-guide page to PT 2026-09-05 22:30:50 +00:00
Marcos Paulo c022a93302 Merge branch 'main' into refactor/task-15d-page-full-guide 2026-09-05 22:23:13 +00:00
Marcos Paulo ea5178c3da docs: task 15d attempt 4, list the last 34 untranslated selectors
Attempt 3 reached 68 of 102 translations.pt entries in the built page.
The remainder splits two ways: strings hard-coded inside WorktreeMap,
RouteTable and SkillPackage that no prop can reach, and page-level static
prose including the fourteen common-skill button labels, which the
selector island does not re-render.

Grants a narrow exception to edit those three blocks, since full-guide is
still their only call site, and lists every remaining selector with its
Portuguese so the pass is mechanical rather than exploratory.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-05 22:23:06 +00:00
Marcos Paulo aa49218fc8 feat(full-guide): localize static strings and update snapshot
- Wrapped the static English prose in `data-language-content="en"`
- Paired every english prose with its Portuguese counterpart in `data-language-content="pt"`
- Updated static `Localized` props in Astro blocks
- Regenerated the static snapshot because Attempt 2 of the migration dropped several legacy sections (`.builder-intro`, `.exercise-brief`, `.comparison-strip`, etc.) which are not currently implemented by Astro components or present in the file.
2026-09-05 22:20:36 +00:00
Marcos Paulo 2b49106b7f Merge branch 'main' into refactor/task-15d-page-full-guide 2026-09-05 22:05:43 +00:00
Marcos Paulo 38b92bc66c docs: task 15d attempt 3, the block interfaces are ready
verify-and-publish / gate (push) Failing after 11m52s
verify-and-publish / publish (push) Has been skipped
Task 10b landed the Localized props that attempt 2 stopped on. Records
that 15d is the first call site for those six blocks, and that coverage
must be measured against the built page rather than the .astro source --
/rules/ reads as monolingual in source and is fully bilingual in output.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-05 22:02:23 +00:00
40 changed files with 2092 additions and 553 deletions
+4 -1
View File
@@ -1,6 +1,9 @@
--- ---
name: motion-designer name: motion-designer
description: Adds and audits animation — transitions, state changes, optional view transitions. Use for task 17 and any change involving movement. Do not use for static layout or styling work. description:
Adds and audits animation — transitions, state changes, optional view
transitions. Use for task 17 and any change involving movement. Do not use for
static layout or styling work.
tools: Read, Write, Edit, Bash, Grep, Glob tools: Read, Write, Edit, Bash, Grep, Glob
--- ---
+6 -2
View File
@@ -1,6 +1,9 @@
--- ---
name: reviewer name: reviewer
description: Merge gate. Reviews a task branch diff against its brief and the project rules. Use before merging any refactor task. Never writes features or fixes findings itself. description:
Merge gate. Reviews a task branch diff against its brief and the project
rules. Use before merging any refactor task. Never writes features or fixes
findings itself.
tools: Read, Grep, Glob, Bash tools: Read, Grep, Glob, Bash
--- ---
@@ -8,7 +11,8 @@ You are the merge gate. You read diffs and report. **You do not write features
and you do not fix what you find** — you name it precisely enough that the and you do not fix what you find** — you name it precisely enough that the
owning agent can. owning agent can.
**Read**: the task file, then every rule in `.agents/rules/` relevant to the diff. **Read**: the task file, then every rule in `.agents/rules/` relevant to the
diff.
## Order of checks — highest-value first ## Order of checks — highest-value first
+20 -19
View File
@@ -4,18 +4,18 @@
Ten hand-written HTML pages, each linking its own CSS and one ES module: Ten hand-written HTML pages, each linking its own CSS and one ES module:
| Route | Page | Script | Stylesheets | | Route | Page | Script | Stylesheets |
| --- | --- | --- | --- | | -------------------- | -------------------------- | ---------------------- | --------------------------------------------- |
| `/` | `index.html` | — | `chapters.css`, `landing.css` | | `/` | `index.html` | — | `chapters.css`, `landing.css` |
| `/full-guide/` | `full-guide/index.html` | `app.js` (50 KB) | `styles.css`, `responsive.css`, `audit.css` | | `/full-guide/` | `full-guide/index.html` | `app.js` (50 KB) | `styles.css`, `responsive.css`, `audit.css` |
| `/summary/` | `summary/index.html` | — | `chapters.css` | | `/summary/` | `summary/index.html` | — | `chapters.css` |
| `/models/` | `models/index.html` | — | `chapters.css` | | `/models/` | `models/index.html` | — | `chapters.css` |
| `/agents/` | `agents/index.html` | — | `chapters.css` | | `/agents/` | `agents/index.html` | — | `chapters.css` |
| `/skills/` | `skills/index.html` | `skills/app.js` | `skills/styles.css` | | `/skills/` | `skills/index.html` | `skills/app.js` | `skills/styles.css` |
| `/rules/` | `rules/index.html` | `rules/app.js` | `rules/styles.css` | | `/rules/` | `rules/index.html` | `rules/app.js` | `rules/styles.css` |
| `/skills-review/` | `skills-review/index.html` | `skills-review/app.js` | `skills-review/styles.css`, `change-lens.css` | | `/skills-review/` | `skills-review/index.html` | `skills-review/app.js` | `skills-review/styles.css`, `change-lens.css` |
| `/hands-on/starter/` | lab fixture | own | own | | `/hands-on/starter/` | lab fixture | own | own |
| `/hands-on/rules/` | lab fixture | own | own | | `/hands-on/rules/` | lab fixture | own | own |
Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB, Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB,
`skills-review/catalog.js` 27 KB, `skills-review/submitted-catalog.js` 18 KB. `skills-review/catalog.js` 27 KB, `skills-review/submitted-catalog.js` 18 KB.
@@ -35,7 +35,8 @@ Weight is concentrated: `app.js` 50 KB, `responsive.css` 30 KB,
`wins[]`, `improve[]`, `extras`, `improved` (full markdown). 24 entries across `wins[]`, `improve[]`, `extras`, `improved` (full markdown). 24 entries across
`catalog.js` + `submitted-catalog.js`. This is already a content collection in `catalog.js` + `submitted-catalog.js`. This is already a content collection in
all but name. all but name.
- **`skills-review/files.js` / `submitted-files.js`** — generated file manifests. - **`skills-review/files.js` / `submitted-files.js`** — generated file
manifests.
- **`vote.js`** — the vote widget island; talks to `vote-service/`. - **`vote.js`** — the vote widget island; talks to `vote-service/`.
## Target (Astro) ## Target (Astro)
@@ -53,12 +54,12 @@ public/
### Non-negotiables for the target ### Non-negotiables for the target
- **URLs do not change.** `/full-guide/`, `/skills-review/`, `/hands-on/starter/` - **URLs do not change.** `/full-guide/`, `/skills-review/`,
and the rest must resolve exactly as they do now, trailing slash included. `/hands-on/starter/` and the rest must resolve exactly as they do now,
Existing links (including `docs/`, SilverBullet, and shared URLs with trailing slash included. Existing links (including `docs/`, SilverBullet, and
`?author=…&skill=…&view=…` query params) must keep working. shared URLs with `?author=…&skill=…&view=…` query params) must keep working.
- **Zero JS by default.** Seven of the ten pages ship no JavaScript today. - **Zero JS by default.** Seven of the ten pages ship no JavaScript today. They
They must still ship none. Islands are opt-in, per component, and justified. must still ship none. Islands are opt-in, per component, and justified.
- **`hands-on/` stays vanilla.** It goes in `public/` untouched. It is a lab - **`hands-on/` stays vanilla.** It goes in `public/` untouched. It is a lab
fixture, not a component. fixture, not a component.
- **No external runtime requests.** `audit-ui.mjs` enforces this and it is part - **No external runtime requests.** `audit-ui.mjs` enforces this and it is part
+2 -1
View File
@@ -49,4 +49,5 @@ likely to fail; verify before shipping.
## Bilingual content ## Bilingual content
`<html lang>` must change with the language toggle, not just the text. Screen `<html lang>` must change with the language toggle, not just the text. Screen
readers pick pronunciation from it. This already works today — do not regress it. readers pick pronunciation from it. This already works today — do not regress
it.
+8 -4
View File
@@ -20,12 +20,16 @@ Several current stylesheets already honour it. Every new animation must:
```css ```css
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; animation-iteration-count: 1 !important; * {
transition-duration: .01ms !important; scroll-behavior: auto !important; } animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} }
``` ```
Reduced motion means *reduced*, not *broken*: the end state must still be Reduced motion means _reduced_, not _broken_: the end state must still be
correct and the interface still usable. Test it — in DevTools, Rendering → correct and the interface still usable. Test it — in DevTools, Rendering →
Emulate `prefers-reduced-motion`. Emulate `prefers-reduced-motion`.
@@ -35,7 +39,7 @@ Emulate `prefers-reduced-motion`.
Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every Animating `width`, `height`, `top`, `left`, or `margin` forces layout on every
frame and will show up as a failed INP. frame and will show up as a failed INP.
- `will-change` only on an element about to animate, removed after. Leaving it - `will-change` only on an element about to animate, removed after. Leaving it
on permanently costs memory and can *hurt* performance. on permanently costs memory and can _hurt_ performance.
- Prefer CSS transitions. Reach for the Web Animations API only for sequencing - Prefer CSS transitions. Reach for the Web Animations API only for sequencing
that CSS cannot express. Do not add an animation library — it is a runtime that CSS cannot express. Do not add an animation library — it is a runtime
dependency on a site whose thesis is having none. dependency on a site whose thesis is having none.
+14 -11
View File
@@ -15,12 +15,12 @@ this site's ten pages ship no JS today and must continue to.
Only these need interactivity. Anything else claiming island status is wrong: Only these need interactivity. Anything else claiming island status is wrong:
| Island | Why | Directive | | Island | Why | Directive |
| --- | --- | --- | | --------------------------------- | ---------------------------------- | ---------------- |
| Guide phase/tab switchers | click-driven panel swap | `client:visible` | | Guide phase/tab switchers | click-driven panel swap | `client:visible` |
| Review desk catalog + file viewer | search, filter, fetch source files | `client:load` | | Review desk catalog + file viewer | search, filter, fetch source files | `client:load` |
| Vote widget | talks to `vote-service/` | `client:visible` | | Vote widget | talks to `vote-service/` | `client:visible` |
| Language toggle | swaps EN/PT across the page | `client:idle` | | Language toggle | swaps EN/PT across the page | `client:idle` |
## Structure ## Structure
@@ -31,8 +31,11 @@ Only these need interactivity. Anything else claiming island status is wrong:
// 3. destructure Astro.props // 3. destructure Astro.props
// 4. derived values — no side effects, no fetch in components // 4. derived values — no side effects, no fetch in components
--- ---
<!-- markup --> <!-- markup -->
<style>/* component-scoped */</style> <style>
/* component-scoped */
</style>
``` ```
- Typed props always: `interface Props { … }`, then `const { … } = Astro.props`. - Typed props always: `interface Props { … }`, then `const { … } = Astro.props`.
@@ -60,13 +63,13 @@ almost one-to-one — do that rather than importing a 27 KB JS file.
The site is served from `/ai-for-dummies/`. Set `base` in `astro.config.mjs` and The site is served from `/ai-for-dummies/`. Set `base` in `astro.config.mjs` and
never hand-write an absolute internal path. Use `import.meta.env.BASE_URL`. never hand-write an absolute internal path. Use `import.meta.env.BASE_URL`.
Existing routes are load-bearing and must not change, including trailing Existing routes are load-bearing and must not change, including trailing slashes
slashes and the review desk's query params. and the review desk's query params.
## Never ## Never
- No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for it. - No UI framework (React/Vue/Svelte) unless a task brief explicitly calls for
Astro components plus a little vanilla JS cover everything here. it. Astro components plus a little vanilla JS cover everything here.
- No CSS framework. This site has a hand-built visual identity — see - No CSS framework. This site has a hand-built visual identity — see
[`theming.md`](theming.md). [`theming.md`](theming.md).
- No external runtime requests. Self-host. `audit-ui.mjs` enforces it. - No external runtime requests. Self-host. `audit-ui.mjs` enforces it.
+3 -3
View File
@@ -3,7 +3,7 @@
## Match what is there ## Match what is there
This codebase has a real voice: dense one-liner CSS, terse ES modules, comments This codebase has a real voice: dense one-liner CSS, terse ES modules, comments
that explain *why* and never *what*. Do not reformat it into someone else's that explain _why_ and never _what_. Do not reformat it into someone else's
house style as a side effect of a task. house style as a side effect of a task.
The one exception is CSS minification-by-hand — `styles.css` is single-line and The one exception is CSS minification-by-hand — `styles.css` is single-line and
@@ -44,5 +44,5 @@ overrides, and the temptation during migration will be to port it wholesale
## Commits ## Commits
Present tense, lowercase, `type: subject`, matching the existing log Present tense, lowercase, `type: subject`, matching the existing log (`feat:`,
(`feat:`, `fix:`, `docs:`). The body explains why, and states what you did not do. `fix:`, `docs:`). The body explains why, and states what you did not do.
+2 -1
View File
@@ -3,7 +3,8 @@
## When to make a component ## When to make a component
Extract when the same markup appears **three times**, or when a block has a name Extract when the same markup appears **three times**, or when a block has a name
a person would use out loud ("the eyebrow", "the route card", "the phase panel"). a person would use out loud ("the eyebrow", "the route card", "the phase
panel").
Do not extract on the second occurrence. Two similar blocks often diverge; the Do not extract on the second occurrence. Two similar blocks often diverge; the
premature abstraction costs more than the duplication. premature abstraction costs more than the duplication.
+2 -2
View File
@@ -55,5 +55,5 @@ hand-rolled client-side renderer. That deletes code and improves fidelity.
Careful: `skill-reviews/improved/**/SKILL.md` is **generated** from those Careful: `skill-reviews/improved/**/SKILL.md` is **generated** from those
entries by `scripts/build-skill-review.mjs`, and the generated files are entries by `scripts/build-skill-review.mjs`, and the generated files are
committed. Keep that generator working, or replace it and update every committed. Keep that generator working, or replace it and update every reference
reference to it. to it.
+6 -2
View File
@@ -27,8 +27,12 @@ const text = html
.replace(/<style[\s\S]*?<\/style>/gi, '') .replace(/<style[\s\S]*?<\/style>/gi, '')
.replace(/<!--[\s\S]*?-->/g, '') .replace(/<!--[\s\S]*?-->/g, '')
.replace(/<[^>]+>/g, '\n') .replace(/<[^>]+>/g, '\n')
.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>') .replace(/&amp;/g, '&')
.replace(/&quot;/g, '"').replace(/&#0?39;/g, "'").replace(/&nbsp;/g, ' ') .replace(/&lt;/g, '<')
.replace(/&gt;/g, '>')
.replace(/&quot;/g, '"')
.replace(/&#0?39;/g, "'")
.replace(/&nbsp;/g, ' ')
.split('\n') .split('\n')
.map((line) => line.trim()) .map((line) => line.trim())
.filter(Boolean) .filter(Boolean)
+6 -3
View File
@@ -1,6 +1,9 @@
--- ---
name: content-migration name: content-migration
description: Move bilingual copy out of app.js and catalog.js into typed Astro content collections without losing or altering a single string. Use for any task that relocates user-visible text. description:
Move bilingual copy out of app.js and catalog.js into typed Astro content
collections without losing or altering a single string. Use for any task that
relocates user-visible text.
--- ---
# Content migration # Content migration
@@ -9,8 +12,8 @@ description: Move bilingual copy out of app.js and catalog.js into typed Astro c
- `app.js` — ~50 `{ en, pt }` keys across `phases`, `handsOnPrompts`, - `app.js` — ~50 `{ en, pt }` keys across `phases`, `handsOnPrompts`,
`modelGuide`, `skillSources`, `skillInstallPrompts` `modelGuide`, `skillSources`, `skillInstallPrompts`
- `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with - `skills-review/catalog.js` + `submitted-catalog.js` — 24 entries with `id`,
`id`, `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`, `author`, `title`, `status`, `focus`, `wins[]`, `improve[]`, `extras`,
`improved` (full markdown) `improved` (full markdown)
These are hand-written translations with deliberate tone. **Copy them. Never These are hand-written translations with deliberate tone. **Copy them. Never
+20 -9
View File
@@ -1,6 +1,9 @@
--- ---
name: motion name: motion
description: Add or review animation on the ai-for-dummies site — transitions, state changes, view transitions. Use when any element moves, fades, or transforms, or when auditing existing motion for performance and reduced-motion support. description:
Add or review animation on the ai-for-dummies site — transitions, state
changes, view transitions. Use when any element moves, fades, or transforms,
or when auditing existing motion for performance and reduced-motion support.
--- ---
# Motion # Motion
@@ -22,10 +25,14 @@ If there is no answer, ship it static. That is a legitimate, common outcome.
```css ```css
.panel { .panel {
transition: opacity 180ms cubic-bezier(.2,0,0,1), transition:
transform 180ms cubic-bezier(.2,0,0,1); opacity 180ms cubic-bezier(0.2, 0, 0, 1),
transform 180ms cubic-bezier(0.2, 0, 0, 1);
}
.panel[data-state='entering'] {
opacity: 0;
transform: translateY(6px);
} }
.panel[data-state='entering'] { opacity: 0; transform: translateY(6px); }
``` ```
- **`transform` and `opacity` only.** Animating `width`/`height`/`top`/`left` - **`transform` and `opacity` only.** Animating `width`/`height`/`top`/`left`
@@ -39,14 +46,18 @@ If there is no answer, ship it static. That is a legitimate, common outcome.
```css ```css
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
* { animation-duration: .01ms !important; animation-iteration-count: 1 !important; * {
transition-duration: .01ms !important; scroll-behavior: auto !important; } animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
} }
``` ```
Then **test it**: DevTools → Rendering → Emulate `prefers-reduced-motion: Then **test it**: DevTools → Rendering → Emulate
reduce`. The end state must still be correct and the UI still usable. Reduced, `prefers-reduced-motion: reduce`. The end state must still be correct and the UI
not broken. still usable. Reduced, not broken.
## Page transitions ## Page transitions
+13 -10
View File
@@ -1,6 +1,9 @@
--- ---
name: verify-contract name: verify-contract
description: Evolve scripts/verify.mjs across the Astro migration without losing coverage. Use whenever a verify assertion fails because of a refactor, or when adding checks for new architecture. description:
Evolve scripts/verify.mjs across the Astro migration without losing coverage.
Use whenever a verify assertion fails because of a refactor, or when adding
checks for new architecture.
--- ---
# The verification contract # The verification contract
@@ -29,13 +32,13 @@ report. Nobody else may reduce coverage.
## Translating assertions ## Translating assertions
| Kind | Old | New | | Kind | Old | New |
| --- | --- | --- | | --------------------- | ------------------------------------ | ----------------------------------------------------------------------------- |
| Content presence | `html.includes('data-phase="plan"')` | same token, read from `dist/full-guide/index.html` | | Content presence | `html.includes('data-phase="plan"')` | same token, read from `dist/full-guide/index.html` |
| Implementation detail | `js.includes('renderTree')` | assert the rendered output has the tree UI, not that a function is named that | | Implementation detail | `js.includes('renderTree')` | assert the rendered output has the tree UI, not that a function is named that |
| Asset version | `'app.js?v=20260904-vote-widget'` | assert the built HTML references a hashed asset | | Asset version | `'app.js?v=20260904-vote-widget'` | assert the built HTML references a hashed asset |
Implementation-detail assertions are the dangerous ones: they *look* deletable. Implementation-detail assertions are the dangerous ones: they _look_ deletable.
They are pinning a feature. Replace with an output-level assertion of the same They are pinning a feature. Replace with an output-level assertion of the same
feature; never drop. feature; never drop.
@@ -54,9 +57,9 @@ Commit the snapshots. They are the migration's regression net.
## Extend audit-ui.mjs ## Extend audit-ui.mjs
It rejects external `<script>`/`<link>` but **misses external URLs inside CSS** It rejects external `<script>`/`<link>` but **misses external URLs inside CSS**
which is exactly how the broken Google Fonts `@font-face` in `styles.css:1` got which is exactly how the broken Google Fonts `@font-face` in `styles.css:1`
into a "dependency-free" site. Add: got into a "dependency-free" site. Add:
```js ```js
if (/@import|src:\s*url\(['"]?https?:|url\(['"]?https?:/i.test(css)) if (/@import|src:\s*url\(['"]?https?:|url\(['"]?https?:/i.test(css))
+240 -158
View File
@@ -2,12 +2,19 @@ AI For Dummies — Field Guide
A A
field guide field guide
01 fleet 01 fleet
01 frota
02 worktrees
02 worktrees 02 worktrees
03 models 03 models
03 modelos
04 skills
04 skills 04 skills
05 create 05 create
05 criar
06 field kit 06 field kit
06 kit de campo
07 hands-on 07 hands-on
07 prática
08 verify 08 verify
review submissions ↗ review submissions ↗
EN EN
@@ -15,72 +22,148 @@ EN
PT PT
AI ENGINEERING AI ENGINEERING
01 / 2026 01 / 2026
ENGENHARIA DE IA
01 / 2026
A presentation for humans who ship A presentation for humans who ship
Uma apresentação para quem entrega software
AI for AI for
dummies. dummies.
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. 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.
Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada tarefa.
FIELD NOTE / 001 FIELD NOTE / 001
NOTA DE CAMPO / 001
Ship the Ship the
system. system.
Entregue o
sistema.
Skills · agents · worktrees · proof Skills · agents · worktrees · proof
Skills · agentes · worktrees · evidências
Uma apresentação para quem entrega software
IA para
iniciantes.
Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para
enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada tarefa.
NOTA DE CAMPO / 001
Entregue o
sistema.
Skills · agentes · worktrees · evidências
01 01
strong model strong model
for ambiguity for ambiguity
modelo forte
para ambiguidade
03 03
bounded workers bounded workers
in parallel in parallel
workers delimitados
em paralelo
iterations iterations
with evidence with evidence
iterações
com evidências
Read this as a route map, not a prompt recipe. Read this as a route map, not a prompt recipe.
Leia isto como um mapa de rota, não como uma receita de prompt.
01
modelo forte
para ambiguidade
03
workers delimitados
em paralelo
iterações
com evidências
Leia isto como um mapa de rota, não como uma receita de prompt.
RULE ZERO RULE ZERO
REGRA ZERO
Strong model for ambiguity. Strong model for ambiguity.
Light model for bounded work. Light model for bounded work.
Modelo forte para ambiguidade.
Modelo leve para trabalho delimitado.
THINK THINK
MAKE MAKE
REGRA ZERO
Modelo forte para ambiguidade.
Modelo leve para trabalho delimitado.
PENSE
FAÇA
A small fleet A small fleet
Uma pequena frota
coordination before parallelism coordination before parallelism
coordenação antes do paralelismo
ORCHESTRATOR ORCHESTRATOR
ORQUESTRADOR
Decides what Decides what
needs to happen. needs to happen.
Decide o que
precisa acontecer.
Opus / reasoning Opus / reasoning
UI UI
Component and visual states Component and visual states
Componentes e estados visuais
agent/ui agent/ui
TEST TEST
Acceptance cases Acceptance cases
Casos de aceitação
agent/tests agent/tests
DOCS DOCS
Guide and examples Guide and examples
Guia e exemplos
agent/docs agent/docs
The orchestrator preserves intent, writes small contracts, and gathers results that can be verified. It does not need to type every line. Interface worker
Receives: component contract + visual states
Returns: focused diff + viewport evidence
The orchestrator preserves intent, writes small contracts, and gathers results that can be
verified. It does not need to type every line.
Why the boundary matters Why the boundary matters
Por que a fronteira importa
one vague task / three predictable failures one vague task / three predictable failures
uma tarefa vaga / três falhas previsíveis
01 01
Context soup Context soup
Sopa de contexto
Every worker reads everything. Nobody knows which facts are load-bearing. Every worker reads everything. Nobody knows which facts are load-bearing.
Cada worker lê tudo. Ninguém sabe quais fatos são essenciais.
02 02
Branch collision Branch collision
Colisão de branches
Two agents touch the same checkout. The fastest path becomes conflict resolution. Two agents touch the same checkout. The fastest path becomes conflict resolution.
Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de conflitos.
03 03
Confident drift Confident drift
Desvio confiante
The diff is polished, but no one checks whether it solved the original problem. The diff is polished, but no one checks whether it solved the original problem.
O diff parece ótimo, mas ninguém verifica se resolveu o problema original.
The subagent loop The subagent loop
O ciclo de subagentes
Click a phase. Click a phase.
See the handoff. See the handoff.
Delegation means moving one bounded task into a smaller context—not giving away responsibility. Clique em uma fase.
Veja a passagem.
Delegation means moving one bounded task into a smaller context—not giving away
responsibility.
01 01
PLAN PLAN
02 02
BUILD BUILD
03 03
REVIEW REVIEW
OPUS / REASONING
context: isolated
Turn ambiguity into work
Inspect the repository, choose the architecture, split the request, and write acceptance criteria.
plan → decompose → define acceptance
What crosses contexts What crosses contexts
O que atravessa contextos
brief → diff → evidence brief → diff → evidence
brief → diff → evidência
Package Package
Pacote
Contains Contains
Contém
Why it matters Why it matters
Por que importa
Brief Brief
goal, files, boundaries goal, files, boundaries
stops the worker inventing the problem stops the worker inventing the problem
@@ -94,72 +177,126 @@ Diff
small, reviewable change small, reviewable change
integration and discard stay cheap integration and discard stay cheap
Git worktrees Git worktrees
Git worktrees
One branch One branch
per per
hand. hand.
A worktree is another directory linked to the same repository. Each agent gets its own checkout and index; history remains shared. Uma branch
por
mão.
A worktree is another directory linked to the same repository. Each agent gets its own
checkout and index; history remains shared.
Select a node to inspect its checkout, owner, and next action. Select a node to inspect its checkout, owner, and next action.
Selecione um nó para inspecionar checkout, responsável e próxima ação.
repository topology repository topology
topologia do repositório
4 checkouts
4 checkouts 4 checkouts
ROOT ROOT
main main
● clean ● clean
UI AGENT UI AGENT
AGENTE DE UI
agent/ui agent/ui
3 files · working 3 files · working
3 arquivos · trabalhando
TEST AGENT TEST AGENT
AGENTE DE TESTES
agent/tests agent/tests
8 checks · ready 8 checks · ready
8 verificações · pronto
DOCS AGENT DOCS AGENT
AGENTE DE DOCS
agent/docs agent/docs
2 pages · review 2 pages · review
2 páginas · revisão
OWNER
Orchestrator
CHECKOUT
./project
Shared history and integration point. Workers never edit here.
git worktree list
Model routing Model routing
Roteamento de modelos
Do not pay for Do not pay for
reasoning where reasoning where
you need you need
rhythm. rhythm.
Não pague por
raciocínio onde precisa
de
ritmo.
Choose a job to see why the model profile changes. Choose a job to see why the model profile changes.
Escolha um trabalho para entender por que o perfil do modelo muda.
Work Work
Profile Profile
Prompt shape Prompt shape
Plan Plan
Planejar
strong / broad strong / broad
What changes? What can break? What changes? What can break?
Build Build
Construir
fast / focused fast / focused
Implement this slice. Run these checks. Implement this slice. Run these checks.
Explore Explore
Explorar
read-only / light read-only / light
Find where this contract is used. Find where this contract is used.
Review Review
Revisar
independent independent
Does the diff satisfy the brief? Does the diff satisfy the brief?
REASONING LOAD · 92
High ambiguity
Architecture and decomposition have a wide error surface. Spend reasoning here.
Model gearbox Model gearbox
Câmbio de modelos
capability tier × thinking effort capability tier × thinking effort
nível de capacidade × esforço de raciocínio
Two separate knobs Two separate knobs
Dois controles separados
Choose the engine. Choose the engine.
Then choose the Then choose the
gear. gear.
Escolha o motor.
Depois escolha a
marcha.
A stronger model changes the capability ceiling. Higher reasoning effort gives that model more room to work. Start with the lightest combination that passes your real checks, then move one knob at a time. A stronger model changes the capability ceiling. Higher reasoning effort gives that model more room to work. Start with the lightest combination that passes your real checks, then move one knob at a time.
Um modelo mais forte muda o teto de capacidade. Mais esforço de raciocínio dá mais espaço para esse modelo trabalhar. Comece com a combinação mais leve que passa seus checks e mova um controle por vez.
OPENAI OPENAI
CLAUDE CLAUDE
GEMINI GEMINI
OpenAI
OFFICIAL SOURCE ↗
Sol · Terra · Luna
GPT-5.6 separates capability tier from reasoning effort. Sol is flagship, Terra balances performance and cost, and Luna targets efficient high-volume work.
REASONING / THINKING REASONING / THINKING
RACIOCÍNIO / PENSAMENTO
LOW LOW
BAIXO
bounded + fast bounded + fast
delimitado + rápido
MEDIUM MEDIUM
default start
HIGH HIGH
ALTO
complex + costly complex + costly
complexo + custoso
MEDIUM
Balanced starting point for normal implementation, tests, and review. Measure before moving up.
reasoning: { effort: "medium" }
ROUTING RULE ROUTING RULE
REGRA DE ROTEAMENTO
Use strong models for ambiguity and judgment. Use lighter models for bounded execution. Raise effort only when evaluation shows a gain. Use strong models for ambiguity and judgment. Use lighter models for bounded execution. Raise effort only when evaluation shows a gain.
Use modelos fortes para ambiguidade e julgamento. Use modelos leves para execução delimitada. Aumente o esforço apenas quando a avaliação mostrar ganho.
Skills
Skills Skills
Write the right way Write the right way
once. once.
Escreva do jeito certo
uma vez.
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. 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.
01 / trigger clearly Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências, scripts e assets. Não é memória mágica e não substitui critérios de aceitação.
02 / load detail on demand
03 / return evidence
SKILL PACKAGE SKILL PACKAGE
SKILL.md SKILL.md
procedure and limits procedure and limits
@@ -169,92 +306,80 @@ scripts/
repeatable checks repeatable checks
assets/ assets/
templates and examples templates and examples
name: review-ui · check focus, mobile, reduced motion · run verification · return evidence
SKILL.md
Trigger, procedure, constraints, and the exact evidence the agent must return.
select another file to explore
Create a skill Create a skill
repeatable pain → reusable judgment repeatable pain → reusable judgment
The skill forge
Teach the decision.
Keep the context
light.
Do not package everything you know. Capture the non-obvious choices that repeatedly improve an outcome, then prove the skill changes behavior.
01
Observe
find repeated friction
02
Define trigger
route precisely
03 03
Choose anatomy Choose only useful anatomy
only needed files 01
04 Start from repeated friction
Write guidance
decisions, not trivia
05 05
Validate Test behavior, then sharpen
test real behavior 02
OUTPUT / SKILL PACKAGE Make discovery precise
review-ui/ 04
├── SKILL.md Write what changes decisions
├── agents/ 01
│ └── openai.yaml QUESTION
├── references/ Start from repeated friction
│ └── accessibility.md Which non-obvious decision keeps being rediscovered?
└── scripts/ ACTION
└── verify.mjs Collect two or three realistic requests. Separate durable judgment from one projects temporary details.
VALIDATE ARTIFACT
quick_validate.py ./review-ui A narrow capability and concrete examples.
AFTER REAL USE PROOF
observe failure Without the skill, agents repeatedly make the same avoidable mistake.
sharpen one rule
retest behavior
keep it narrow
Common skills Common skills
Skills comuns
choose behavior before model choose behavior before model
The field kit escolha o comportamento antes do modelo
Different jobs. COMMUNICATION STYLE
Different
instincts.
A skill changes how an agent approaches work. Some shape communication. Others enforce research, debugging, review, or completion discipline. Select one to inspect its operating rule and verified source.
SIMPLIFY
ponytail-lite
minimum code that holds
COMMUNICATE
caveman caveman
signal without filler Use for routine status, handoffs, and technical summaries where speed matters. Short fragments make actions and evidence easy to scan.
COMPLETE DIAGNOSTIC LOOP
unlazy
gates and evidence
INVESTIGATE
research
primary sources first
DIAGNOSE
diagnosing-bugs diagnosing-bugs
tight feedback loop Use for hard bugs, flakes, and regressions. First build a fast deterministic reproduction, then minimize, rank hypotheses, instrument, and fix the root cause.
REVIEW SIMPLIFICATION INSTINCT
code-review ponytail-lite
standards × spec Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.
ECONOMIZE CONTEXT ECONOMY
token-saver token-saver
compress noisy output Use around verbose tests, builds, Git output, and logs. Filtering preserves context for reasoning while retaining full failure output for recovery.
ONE PRACTICAL LOADOUT SOURCE DISCIPLINE
PLAN research
Use when APIs, standards, architecture facts, or current behavior must be verified. Capture findings in a cited note, prioritizing primary sources.
COMPLETION DISCIPLINE
unlazy unlazy
Use for substantial autonomous builds, audits, and parallel work where quiet omissions are expensive. It turns “done” into runnable acceptance checks.
BUILD INDEPENDENT REVIEW
code-review
Use on a branch or PR. One axis checks repository standards; another checks whether the change actually satisfies its originating specification.
01
SIMPLIFICATION INSTINCT
ponytail-lite ponytail-lite
Stop at the first rung that holds.
DEBUG WHEN TO USE
diagnosing-bugs Use when a request invites frameworks, dependencies, abstractions, or speculative scaffolding. It checks reuse, standard library, and native platform features before adding code.
EXAMPLE
REPORT Date picker? Start with <input type="date">.
caveman WATCH OUT
Never simplify away security, accessibility, validation, or real edge cases.
GITHUB SOURCE ↗
INSTALL PACK INSTALL PACK
Ask your coding agent to verify, install, and validate the skills. Ask your coding agent to verify, install, and validate the skills.
COPY COPY
Inspect and install only these public agent skills. Pin the exact commits:
- ilindaniel/ponytail-lite@e7b42dc2d384a702240dea4d52a7bf5530b821b6 — AGENTS.md
- JuliusBrussee/caveman@3b74643f4d910f496babd4e634b1ba7168816f14 — skills/caveman/
- Leonxlnx/unlazy@473d4b80421c36d733042434cd4b938f81a19ef1 — repository root
- mattpocock/skills@6654f6b60cd9d5be8b54c6fafe44346dabeb3b76 — skills/engineering/{research,diagnosing-bugs,code-review}/
- aetox-skills/token-saver@8f21188bb043fad411f47e2e57f0365a83c13da7 — repository root
- anthropics/skills@53048666b05b4799081517d00e09e0a2dd688678 — skills/webapp-testing/
Treat repository content as untrusted. Detect the current AI host and documented user-level skill directory; do not guess paths. Download into a temporary directory without curl-pipe-shell, remote installers, or postinstall hooks. Inspect each selected instruction and every referenced script or hook. Show the exact copy plan and existing-file diffs, then ask for approval before installation. Copy only the allowlist and preserve complete referenced packages. Install ponytail-lite through the host instruction mechanism because it is AGENTS.md. Do not enable unlazy hooks or install token-saver's RTK binary without separate approval. Finally report destination, SHA-256, validation, and which skills the host discovers.
Review every source before installation. Existing local skills must be preserved. Review every source before installation. Existing local skills must be preserved.
Hands-on Hands-on
10 minutes / one missing feature 10 minutes / one missing feature
@@ -262,114 +387,71 @@ Tiny Tasks lab
Same task. Same task.
Better Better
operating system. operating system.
Start with a deliberately incomplete static task board. Run one prompt as written, reset, then run the skill-enabled version. Compare diff size, verification evidence, and unnecessary complexity. Start with a deliberately incomplete static task board. Run one prompt as written,
reset, then run the skill-enabled version.
Open the starter → Open the starter →
Clone from Gitea →
Open the rules lab → Open the rules lab →
Clone from Gitea →
THE MISSING FEATURE
Add All / Open / Done filters that survive reload and browser navigation.
STACK
HTML · CSS · JavaScript
DEPENDENCIES
none
FILES
3
RUN A RUN A
Good prompt Good prompt
COPY COPY
Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
Add an All / Open / Done filter to Tiny Tasks.
Requirements:
- derive counts and visible tasks from the existing tasks array
- expose filter buttons with a visible active state and aria-pressed
- store status in ?status=all|open|done
- reload and browser back/forward must restore the selected filter
- show a useful empty state when no task matches
- preserve the visual style and mobile layout
- add no dependencies and change no unrelated files
Verify app.js syntax and exercise every filter plus URL navigation.
Return changed files, checks run, results, and remaining risk.
Clear context · constraints · acceptance · evidence Clear context · constraints · acceptance · evidence
RUN B RUN B
Good prompt + skills Good prompt + skills
COPY COPY
Use $ponytail-lite and $webapp-testing.
Work only in hands-on/starter. It is dependency-free HTML, CSS, and JavaScript.
Add an All / Open / Done filter to Tiny Tasks.
Apply $ponytail-lite: inspect first, reuse the current render flow, prefer native URL and button APIs, and avoid dependencies or abstractions.
Apply $webapp-testing: verify all filters, aria-pressed, reload, browser back/forward, empty state, and one mobile viewport.
Acceptance:
- counts and visible tasks come from the existing tasks array
- ?status=all|open|done is the source of truth
- invalid status falls back safely to all
- style remains consistent; unrelated files remain untouched
Return the smallest working diff and concrete verification evidence.
Same contract · explicit working methods · stronger proof Same contract · explicit working methods · stronger proof
COMPARE THE RUNS
01
Files changed
02
New dependencies
03
Checks actually run
04
Evidence returned
THE HUMAN JOB THE HUMAN JOB
O PAPEL HUMANO
The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours. The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.
START HERE O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo seus.
Begin with one agent and one skill. Add parallelism only when the tasks are truly independent.
Verification Verification
run each gate separately run each gate separately
Checks become evidence
Three layers.
Run each one alone.
Run a gate on its own line, print its exit code, attach the output. The result is the deliverable.
01 · STATIC 01 · STATIC
Lint and types Lint and types
Format, lint, type-check. Fast and scoped to one file. Run on every save. Format, lint, type-check. Fast and scoped to one file.
pnpm lint; echo "lint=$?" pnpm lint; echo "lint=$?"
pnpm typecheck; echo "typecheck=$?"
02 · BEHAVIOR 02 · BEHAVIOR
Unit and contract Unit and contract
Tests that repeat. Run before claiming done. Tests that repeat. Run before claiming done.
pnpm test; echo "test=$?" pnpm test; echo "test=$?"
cd services/api && go test ./...
03 · INTEGRATION 03 · INTEGRATION
Real UI and API Real UI and API
Drive the actual UI, API, or browser. Slower and flakier — only this catches mobile overflow and a missing 404. Drive the actual UI, API, or browser.
pnpm check:ui; echo "ui=$?" 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/starter
Path 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 learning Keep learning
Continue aprendendo
12 new readings + primary docs 12 new readings + primary docs
Go deeper with official documentation, production case studies, Medium, and practitioner workflows. 12 novas leituras + documentação primária
Go deeper with official documentation, production case studies, Medium, and practitioner
workflows.
Rules and enforcement case study → Rules and enforcement case study →
Skills review desk → Skills review desk →
Primary references →
12-part reading path → 12-part reading path →
Navigate by idea Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes.
short chapters / one system Estudo de caso sobre regras e enforcement →
Prefer a focused chapter? Start with the Skills review desk →
route map Trilha com 12 leituras →
, then jump directly to
models
,
agents and worktrees
,
skill creation
,
rules
, or the
skills review desk
.
@@ -24,7 +24,7 @@ const { label, columns = 3 } = Astro.props;
.grid { .grid {
display: grid; display: grid;
grid-template-columns: repeat(var(--columns), 1fr); grid-template-columns: repeat(var(--columns), 1fr);
gap: 1px; /* hairline separators, drawn by the parent background */ gap: 1px; /* hairline separators, drawn by the parent background */
background: var(--line); background: var(--line);
} }
@@ -34,6 +34,8 @@ const { label, columns = 3 } = Astro.props;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.grid { grid-template-columns: 1fr; } .grid {
grid-template-columns: 1fr;
}
} }
</style> </style>
+34 -21
View File
@@ -20,25 +20,33 @@ const { items, initialId = items[0]?.id } = Astro.props;
<div class="island" data-initial={initialId}> <div class="island" data-initial={initialId}>
<div class="tabs" role="tablist" aria-label="Sections"> <div class="tabs" role="tablist" aria-label="Sections">
{items.map((item) => ( {
<button items.map((item) => (
role="tab" <button
id={`tab-${item.id}`} role="tab"
aria-controls={`panel-${item.id}`} id={`tab-${item.id}`}
aria-selected={item.id === initialId} aria-controls={`panel-${item.id}`}
data-tab={item.id} aria-selected={item.id === initialId}
>{item.label}</button> data-tab={item.id}
))} >
{item.label}
</button>
))
}
</div> </div>
{items.map((item) => ( {
<div items.map((item) => (
role="tabpanel" <div
id={`panel-${item.id}`} role="tabpanel"
aria-labelledby={`tab-${item.id}`} id={`panel-${item.id}`}
data-panel={item.id} aria-labelledby={`tab-${item.id}`}
hidden={item.id !== initialId} data-panel={item.id}
>{item.body}</div> hidden={item.id !== initialId}
))} >
{item.body}
</div>
))
}
</div> </div>
<script> <script>
@@ -68,7 +76,10 @@ const { items, initialId = items[0]?.id } = Astro.props;
</script> </script>
<style> <style>
.tabs { display: grid; gap: 8px; } .tabs {
display: grid;
gap: 8px;
}
button { button {
padding: 12px; padding: 12px;
@@ -78,7 +89,7 @@ const { items, initialId = items[0]?.id } = Astro.props;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
/* transform/opacity only — never animate layout properties */ /* transform/opacity only — never animate layout properties */
transition: background 180ms cubic-bezier(.2, 0, 0, 1); transition: background 180ms cubic-bezier(0.2, 0, 0, 1);
} }
button[aria-selected='true'] { button[aria-selected='true'] {
@@ -92,6 +103,8 @@ const { items, initialId = items[0]?.id } = Astro.props;
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
button { transition-duration: .01ms; } button {
transition-duration: 0.01ms;
}
} }
</style> </style>
@@ -40,7 +40,7 @@ const { eyebrow, title, body, href } = Astro.props;
.eyebrow { .eyebrow {
color: var(--accent); color: var(--accent);
font: var(--font-eyebrow); font: var(--font-eyebrow);
letter-spacing: .1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
} }
@@ -48,7 +48,7 @@ const { eyebrow, title, body, href } = Astro.props;
margin: 0; margin: 0;
font-size: var(--step-5); font-size: var(--step-5);
line-height: 1.05; line-height: 1.05;
letter-spacing: -.06em; /* tight display tracking is a signature of this design */ letter-spacing: -0.06em; /* tight display tracking is a signature of this design */
} }
p { p {
@@ -69,6 +69,8 @@ const { eyebrow, title, body, href } = Astro.props;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.block { padding: 18px; } .block {
padding: 18px;
}
} }
</style> </style>
+1 -5
View File
@@ -1,10 +1,6 @@
{ {
"extends": ["stylelint-config-standard"], "extends": ["stylelint-config-standard"],
"ignoreFiles": [ "ignoreFiles": ["dist/**", "public/hands-on/**", "submitted-skills/**"],
"dist/**",
"public/hands-on/**",
"submitted-skills/**"
],
"rules": { "rules": {
"custom-property-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$", "custom-property-pattern": "^[a-z][a-z0-9]*(-[a-z0-9]+)*$",
"declaration-property-value-disallowed-list": { "declaration-property-value-disallowed-list": {
+5 -5
View File
@@ -8,11 +8,11 @@ export default [
{ {
ignores: [ ignores: [
'dist/**', 'dist/**',
'public/hands-on/**', // lab fixtures ship verbatim — linting them would 'public/hands-on/**', // lab fixtures ship verbatim — linting them would
// invite "fixes" that break the exercise // invite "fixes" that break the exercise
'submitted-skills/**', // other people's work, reproduced as submitted 'submitted-skills/**', // other people's work, reproduced as submitted
'skill-reviews/**', // generated from skills-review/catalog.js 'skill-reviews/**', // generated from skills-review/catalog.js
'vote-service/**', // Go service, separate lifecycle 'vote-service/**', // Go service, separate lifecycle
], ],
}, },
{ {
+1 -1
View File
@@ -15,7 +15,7 @@ jobs:
steps: steps:
- uses: actions/checkout@v4 - uses: actions/checkout@v4
with: with:
fetch-depth: 0 # gate.sh compares assertion counts against origin/main fetch-depth: 0 # gate.sh compares assertion counts against origin/main
- uses: actions/setup-node@v4 - uses: actions/setup-node@v4
with: with:
+20 -11
View File
@@ -28,25 +28,30 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
</section> </section>
<GridGroup label="Chapter sections" columns={3}> <GridGroup label="Chapter sections" columns={3}>
{chapter.data.sections.map((section) => ( {
<StaticBlock chapter.data.sections.map((section) => (
eyebrow={section.eyebrow[lang]} <StaticBlock
title={section.title[lang]} eyebrow={section.eyebrow[lang]}
body={section.body[lang]} title={section.title[lang]}
/> body={section.body[lang]}
))} />
))
}
</GridGroup> </GridGroup>
</ChapterLayout> </ChapterLayout>
<style> <style>
/* Page-level layout only. Anything reusable belongs in a component. */ /* Page-level layout only. Anything reusable belongs in a component. */
.hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; } .hero {
max-width: 780px;
padding: clamp(75px, 12vh, 145px) 0 85px;
}
h1 { h1 {
margin: 16px 0 24px; margin: 16px 0 24px;
font-size: var(--step-display); font-size: var(--step-display);
line-height: .86; line-height: 0.86;
letter-spacing: -.08em; letter-spacing: -0.08em;
} }
/* Georgia is a real system font and DOES render — unlike Manrope/DM Mono. /* Georgia is a real system font and DOES render — unlike Manrope/DM Mono.
@@ -57,5 +62,9 @@ const lang = 'en'; // TODO: wire to the language toggle decision (task 03)
font-weight: 400; font-weight: 400;
} }
.lede { max-width: 570px; color: var(--muted); line-height: 1.65; } .lede {
max-width: 570px;
color: var(--muted);
line-height: 1.65;
}
</style> </style>
+14 -3
View File
@@ -39,7 +39,18 @@ const items = entries.map((entry) => ({
</BaseLayout> </BaseLayout>
<style> <style>
.hero { max-width: 780px; padding: clamp(75px, 12vh, 145px) 0 85px; } .hero {
h1 { font-size: var(--step-display); line-height: .86; letter-spacing: -.08em; } max-width: 780px;
h1 em { color: var(--blue); font-family: Georgia, serif; font-weight: 400; } padding: clamp(75px, 12vh, 145px) 0 85px;
}
h1 {
font-size: var(--step-display);
line-height: 0.86;
letter-spacing: -0.08em;
}
h1 em {
color: var(--blue);
font-family: Georgia, serif;
font-weight: 400;
}
</style> </style>
+30 -16
View File
@@ -1,23 +1,37 @@
# Gates: review desk privacy and improved-draft audit # Gates: review desk privacy and improved-draft audit
OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**, skill-reviews/improved/ndo-repro/**, scripts/verify.mjs OWNS: skills-review/**, submitted-skills/Anonymous Operational Submission/**,
skill-reviews/improved/ndo-repro/**, scripts/verify.mjs
Scope: Redact the operational submission's identity and URLs from the published review desk, keep package files usable in either preview mode, and explain each improved draft as a concrete diff. Scope: Redact the operational submission's identity and URLs from the published
review desk, keep package files usable in either preview mode, and explain each
improved draft as a concrete diff.
- [x] G1: the published operational submission contains no personal name, original source URL, email address, or host-specific path - [x] G1: the published operational submission contains no personal name,
CHECK: node scripts/verify.mjs original source URL, email address, or host-specific path CHECK: node
EXPECT: review privacy verification passed scripts/verify.mjs EXPECT: review privacy verification passed EVIDENCE:
EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481 exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
path=d3551337f830/34 entries; EXPECT=matched;
output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
output-bytes=481
- [x] G2: every package file remains selectable in Original and Improved draft modes without resetting the selected preview - [x] G2: every package file remains selectable in Original and Improved draft
CHECK: node scripts/verify.mjs modes without resetting the selected preview CHECK: node
EXPECT: review file-mode verification passed scripts/verify.mjs EXPECT: review file-mode verification passed EVIDENCE:
EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481 exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies;
path=d3551337f830/34 entries; EXPECT=matched;
output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
output-bytes=481
- [x] G3: every improved draft has an interactive change lens that explains changed guidance and its rationale - [x] G3: every improved draft has an interactive change lens that explains
CHECK: node scripts/verify.mjs changed guidance and its rationale CHECK: node scripts/verify.mjs EXPECT:
EXPECT: review change-lens verification passed review change-lens verification passed EVIDENCE: exit=0; shell=/bin/sh;
EVIDENCE: exit=0; shell=/bin/sh; cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries; EXPECT=matched; output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1; output-bytes=481 cwd=/home/marcos/Projects/ai-for-dummies; path=d3551337f830/34 entries;
EXPECT=matched;
output-sha256=180e8cd0d18968e2a4244ede959c3459b5ce80b836fc5a0df00961907e5d15a1;
output-bytes=481
- [x] G4: the review desk works at mobile, Full HD, and 4K widths without page errors or horizontal overflow - [x] G4: the review desk works at mobile, Full HD, and 4K widths without page
EVIDENCE: Playwright audit on 2026-09-04: 320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change lens rendered; no horizontal overflow or page errors. errors or horizontal overflow EVIDENCE: Playwright audit on 2026-09-04:
320, 390, 1280, 1920, and 3840px passed with Improved Draft and Change
lens rendered; no horizontal overflow or page errors.
+88 -1
View File
@@ -1 +1,88 @@
<!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="../full-guide/">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> <!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="../full-guide/">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>
+29 -20
View File
@@ -7,38 +7,47 @@ articles are context, not authority.
- Anthropic — custom subagents: https://code.claude.com/docs/en/sub-agents - Anthropic — custom subagents: https://code.claude.com/docs/en/sub-agents
Separate context, tools, permissions, model selection, and worktree isolation. Separate context, tools, permissions, model selection, and worktree isolation.
- Anthropic — skills: https://code.claude.com/docs/en/skills - Anthropic — skills: https://code.claude.com/docs/en/skills Reusable
Reusable instruction packages and skill discovery. instruction packages and skill discovery.
- Anthropic — worktrees: https://code.claude.com/docs/en/worktrees - Anthropic — worktrees: https://code.claude.com/docs/en/worktrees Isolated
Isolated sessions, branches, cleanup, and ignored files. sessions, branches, cleanup, and ignored files.
- OpenAI — build skills: https://developers.openai.com/codex/skills - OpenAI — build skills: https://developers.openai.com/codex/skills Packaged
Packaged instructions and resources for Codex workflows. instructions and resources for Codex workflows.
- OpenAI API — skills reference: https://developers.openai.com/api/reference/go/resources/skills - OpenAI API — skills reference:
Creating, versioning, listing, and downloading skill bundles. https://developers.openai.com/api/reference/go/resources/skills Creating,
- Git — worktree: https://git-scm.com/docs/git-worktree.html versioning, listing, and downloading skill bundles.
Linked working trees, branches, shared history, add/list/remove/prune. - Git — worktree: https://git-scm.com/docs/git-worktree.html Linked working
trees, branches, shared history, add/list/remove/prune.
## Research and articles ## Research and articles
- [Model routing and reasoning controls](model-routing.md) — official OpenAI, - [Model routing and reasoning controls](model-routing.md) — official OpenAI,
Anthropic, and Google terminology, commands, compatibility caveats, and a Anthropic, and Google terminology, commands, compatibility caveats, and a
practical tier/effort baseline. practical tier/effort baseline.
- [Verified skill sources](skill-sources.md) — pinned GitHub references, - [Verified skill sources](skill-sources.md) — pinned GitHub references, package
package paths, local-match confidence, and an approval-first install prompt. paths, local-match confidence, and an approval-first install prompt.
For a structured 12-part reading path—including Git and Anthropic documentation, For a structured 12-part reading path—including Git and Anthropic documentation,
OpenAI orchestration guidance, Medium, and Substack—see OpenAI orchestration guidance, Medium, and Substack—see
[additional-reading.md](additional-reading.md). [additional-reading.md](additional-reading.md).
- Infobip Research — phased coding-agent workflow: https://arxiv.org/abs/2608.30701 - Infobip Research — phased coding-agent workflow:
- Effective asynchronous software engineering agents: https://arxiv.org/abs/2603.21489 https://arxiv.org/abs/2608.30701
- Launch Receipts — AI coding workflow without losing control: https://launchreceipts.com/articles/ai-coding-agent-workflow - Effective asynchronous software engineering agents:
- GitWorktree.org — three agents, three worktrees case study: https://www.gitworktree.org/cases/parallel-ai-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 ## Teaching claims
- Use a stronger model where ambiguity, architecture, decomposition, and review dominate. - Use a stronger model where ambiguity, architecture, decomposition, and review
dominate.
- Use faster models for bounded implementation with explicit context and checks. - Use faster models for bounded implementation with explicit context and checks.
- Give every editing worker an isolated branch/worktree; merge only reviewed diffs. - Give every editing worker an isolated branch/worktree; merge only reviewed
- A skill is a reusable procedure plus optional references/scripts/assets, not magical memory. diffs.
- Delegation does not remove human responsibility for intent, boundaries, or evidence. - 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.
+56 -13
View File
@@ -1,6 +1,8 @@
# Additional reading: multi-agent coding # Additional reading: multi-agent coding
Verified on 2026-09-02. Start with the official references for behavior and constraints; use the practitioner articles for concrete workflow ideas that should be tested against your own repository. Verified on 2026-09-02. Start with the official references for behavior and
constraints; use the practitioner articles for concrete workflow ideas that
should be tested against your own repository.
## Git worktrees and isolated coding sessions ## Git worktrees and isolated coding sessions
@@ -8,25 +10,38 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
- **Publisher:** Git - **Publisher:** Git
- **Topic:** Worktree fundamentals and lifecycle - **Topic:** Worktree fundamentals and lifecycle
- **Teaching takeaway:** The authoritative reference for how linked worktrees share repository data while retaining separate `HEAD` and index state. Use its `add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the complete lifecycle rather than only worktree creation. - **Teaching takeaway:** The authoritative reference for how linked worktrees
share repository data while retaining separate `HEAD` and index state. Use its
`add`, `list`, `lock`, `remove`, `prune`, and `repair` sections to teach the
complete lifecycle rather than only worktree creation.
### 2. [Run parallel sessions with worktrees](https://code.claude.com/docs/en/worktrees) ### 2. [Run parallel sessions with worktrees](https://code.claude.com/docs/en/worktrees)
- **Publisher:** Anthropic — Claude Code Docs - **Publisher:** Anthropic — Claude Code Docs
- **Topic:** Native worktree isolation for coding agents - **Topic:** Native worktree isolation for coding agents
- **Teaching takeaway:** Shows how Claude Code creates isolated sessions with `--worktree`, how gitignored environment files can be copied with `.worktreeinclude`, and how subagents can use worktree isolation. It is a useful bridge between raw Git commands and a real agent workflow. - **Teaching takeaway:** Shows how Claude Code creates isolated sessions with
`--worktree`, how gitignored environment files can be copied with
`.worktreeinclude`, and how subagents can use worktree isolation. It is a
useful bridge between raw Git commands and a real agent workflow.
### 3. [How Git Worktrees Transformed My AI Agent Development Workflow in 2026](https://medium.com/@mudassir00seven/how-git-worktrees-transformed-my-ai-agent-development-workflow-in-2026-ad8a59b8edfb) ### 3. [How Git Worktrees Transformed My AI Agent Development Workflow in 2026](https://medium.com/@mudassir00seven/how-git-worktrees-transformed-my-ai-agent-development-workflow-in-2026-ad8a59b8edfb)
- **Publisher:** Medium — Mudassir Khan - **Publisher:** Medium — Mudassir Khan
- **Topic:** One worktree per agent and task - **Topic:** One worktree per agent and task
- **Teaching takeaway:** A concise practitioner explanation of why parallel agents collide in a shared filesystem and how one task, branch, worktree, and pull request per agent reduces that interference. Pair it with the official Git documentation because operational details may evolve. - **Teaching takeaway:** A concise practitioner explanation of why parallel
agents collide in a shared filesystem and how one task, branch, worktree, and
pull request per agent reduces that interference. Pair it with the official
Git documentation because operational details may evolve.
### 4. [How to Use Git Worktrees with Coding Agents](https://meshintelligence.substack.com/p/how-to-use-git-worktrees-with-coding) ### 4. [How to Use Git Worktrees with Coding Agents](https://meshintelligence.substack.com/p/how-to-use-git-worktrees-with-coding)
- **Publisher:** Mesh Intelligence on Substack — Petar Djukic - **Publisher:** Mesh Intelligence on Substack — Petar Djukic
- **Topic:** Worktree-per-task workflow and integration boundaries - **Topic:** Worktree-per-task workflow and integration boundaries
- **Teaching takeaway:** Explains why branches alone do not isolate active files, compares worktrees with clones and containers, and presents a create-work-review-remove lifecycle. Its strongest lesson is that worktrees isolate execution, not merge conflicts, so scheduling and review gates still matter. - **Teaching takeaway:** Explains why branches alone do not isolate active
files, compares worktrees with clones and containers, and presents a
create-work-review-remove lifecycle. Its strongest lesson is that worktrees
isolate execution, not merge conflicts, so scheduling and review gates still
matter.
## Subagents and orchestration ## Subagents and orchestration
@@ -34,31 +49,48 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
- **Publisher:** Anthropic — Claude Code Docs - **Publisher:** Anthropic — Claude Code Docs
- **Topic:** Specialized subagents, context, tools, and background execution - **Topic:** Specialized subagents, context, tools, and background execution
- **Teaching takeaway:** Demonstrates how to define narrow subagents with their own prompts, tool permissions, and models, then run them in foreground or background. It supports teaching that delegation quality depends on explicit responsibility and context boundaries, not merely spawning more agents. - **Teaching takeaway:** Demonstrates how to define narrow subagents with their
own prompts, tool permissions, and models, then run them in foreground or
background. It supports teaching that delegation quality depends on explicit
responsibility and context boundaries, not merely spawning more agents.
### 6. [Building Effective AI Agents](https://www.anthropic.com/engineering/building-effective-agents) ### 6. [Building Effective AI Agents](https://www.anthropic.com/engineering/building-effective-agents)
- **Publisher:** Anthropic Engineering - **Publisher:** Anthropic Engineering
- **Topic:** Agent architecture patterns - **Topic:** Agent architecture patterns
- **Teaching takeaway:** Introduces routing, parallelization, orchestrator-worker, and evaluator-optimizer patterns while recommending the simplest architecture that meets the task. The orchestrator-worker section is especially useful for explaining when a strong planner should dynamically decompose work for bounded workers. - **Teaching takeaway:** Introduces routing, parallelization,
orchestrator-worker, and evaluator-optimizer patterns while recommending the
simplest architecture that meets the task. The orchestrator-worker section is
especially useful for explaining when a strong planner should dynamically
decompose work for bounded workers.
### 7. [How we built our multi-agent research system](https://www.anthropic.com/engineering/multi-agent-research-system) ### 7. [How we built our multi-agent research system](https://www.anthropic.com/engineering/multi-agent-research-system)
- **Publisher:** Anthropic Engineering - **Publisher:** Anthropic Engineering
- **Topic:** Production multi-agent coordination - **Topic:** Production multi-agent coordination
- **Teaching takeaway:** A production case study in which a lead agent plans and delegates independent searches to parallel subagents. It is useful for discussing breadth-first tasks, separate context windows, token cost, evaluation, and why parallelism helps most when subtasks are genuinely independent. - **Teaching takeaway:** A production case study in which a lead agent plans and
delegates independent searches to parallel subagents. It is useful for
discussing breadth-first tasks, separate context windows, token cost,
evaluation, and why parallelism helps most when subtasks are genuinely
independent.
### 8. [A practical guide to building agents](https://openai.com/business/guides-and-resources/a-practical-guide-to-building-ai-agents/) ### 8. [A practical guide to building agents](https://openai.com/business/guides-and-resources/a-practical-guide-to-building-ai-agents/)
- **Publisher:** OpenAI - **Publisher:** OpenAI
- **Topic:** Manager and handoff orchestration patterns - **Topic:** Manager and handoff orchestration patterns
- **Teaching takeaway:** Distinguishes centralized manager orchestration from decentralized handoffs and shows agents being exposed as tools to other agents. Use it to teach that the right topology depends on who must retain control, combine outputs, and own the final response. - **Teaching takeaway:** Distinguishes centralized manager orchestration from
decentralized handoffs and shows agents being exposed as tools to other
agents. Use it to teach that the right topology depends on who must retain
control, combine outputs, and own the final response.
### 9. [Agent orchestration](https://openai.github.io/openai-agents-python/multi_agent/) ### 9. [Agent orchestration](https://openai.github.io/openai-agents-python/multi_agent/)
- **Publisher:** OpenAI Agents SDK - **Publisher:** OpenAI Agents SDK
- **Topic:** Agents-as-tools, handoffs, and code-driven workflows - **Topic:** Agents-as-tools, handoffs, and code-driven workflows
- **Teaching takeaway:** Gives a precise comparison between a manager calling specialists as tools and handing control to a specialist. It also covers deterministic orchestration in code, including chains, evaluator loops, and parallel execution for independent tasks. - **Teaching takeaway:** Gives a precise comparison between a manager calling
specialists as tools and handing control to a specialist. It also covers
deterministic orchestration in code, including chains, evaluator loops, and
parallel execution for independent tasks.
## Model routing and reusable skills ## Model routing and reusable skills
@@ -66,19 +98,30 @@ Verified on 2026-09-02. Start with the official references for behavior and cons
- **Publisher:** Anthropic — Claude Platform Docs - **Publisher:** Anthropic — Claude Platform Docs
- **Topic:** Routing work between frontier and lower-cost models - **Topic:** Routing work between frontier and lower-cost models
- **Teaching takeaway:** Compares model selection, advisor, and orchestrator strategies using cost-per-completed-task rather than token price alone. Its orchestrator guidance directly supports a frontier planner dispatching bulk independent work to cheaper workers—but also explains when one model is simpler and less expensive. - **Teaching takeaway:** Compares model selection, advisor, and orchestrator
strategies using cost-per-completed-task rather than token price alone. Its
orchestrator guidance directly supports a frontier planner dispatching bulk
independent work to cheaper workers—but also explains when one model is
simpler and less expensive.
### 11. [Models](https://openai.github.io/openai-agents-python/models/) ### 11. [Models](https://openai.github.io/openai-agents-python/models/)
- **Publisher:** OpenAI Agents SDK - **Publisher:** OpenAI Agents SDK
- **Topic:** Per-agent model selection and mixed-provider routing - **Topic:** Per-agent model selection and mixed-provider routing
- **Teaching takeaway:** Documents how different agents in one workflow can use different models or providers and how routing can be configured centrally. This is a practical implementation reference for turning a conceptual “strong planner, lightweight workers” policy into explicit per-agent configuration. - **Teaching takeaway:** Documents how different agents in one workflow can use
different models or providers and how routing can be configured centrally.
This is a practical implementation reference for turning a conceptual “strong
planner, lightweight workers” policy into explicit per-agent configuration.
### 12. [Skills](https://platform.claude.com/docs/en/managed-agents/skills) ### 12. [Skills](https://platform.claude.com/docs/en/managed-agents/skills)
- **Publisher:** Anthropic — Claude Platform Docs - **Publisher:** Anthropic — Claude Platform Docs
- **Topic:** Reusable filesystem-based agent skills - **Topic:** Reusable filesystem-based agent skills
- **Teaching takeaway:** Explains the `SKILL.md` package model, repository discovery, supporting scripts and resources, and why only task-relevant skills should be attached. It also highlights the security lesson that repository skills are executable instructions and therefore part of the agents trust boundary. - **Teaching takeaway:** Explains the `SKILL.md` package model, repository
discovery, supporting scripts and resources, and why only task-relevant skills
should be attached. It also highlights the security lesson that repository
skills are executable instructions and therefore part of the agents trust
boundary.
## Suggested teaching order ## Suggested teaching order
+62 -20
View File
@@ -1,25 +1,42 @@
# Model routing and reasoning controls # Model routing and reasoning controls
Verified against first-party documentation on 2026-09-02. Model catalogs and aliases change; pin production model IDs and re-check the linked compatibility tables before rollout. Verified against first-party documentation on 2026-09-02. Model catalogs and
aliases change; pin production model IDs and re-check the linked compatibility
tables before rollout.
## Two independent routing knobs ## Two independent routing knobs
1. **Model tier** chooses the capability, latency, and cost envelope. 1. **Model tier** chooses the capability, latency, and cost envelope.
2. **Effort / thinking control** changes how much reasoning work a supported model performs for one request. 2. **Effort / thinking control** changes how much reasoning work a supported
model performs for one request.
Do not assume that every effort value works with every model or product. Unsupported values may fail, be ignored, or be mapped to another level depending on the client. Do not assume that every effort value works with every model or product.
Unsupported values may fail, be ignored, or be mapped to another level depending
on the client.
## OpenAI ## OpenAI
The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`, `high`, `xhigh`, and `max`. Availability remains model-specific, so select from the levels shown for the chosen model rather than treating the full list as universal. [OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model) The current GPT-5.6 family exposes the **Sol**, **Terra**, and **Luna** model
tiers. Its documented `reasoning.effort` values are `none`, `low`, `medium`,
`high`, `xhigh`, and `max`. Availability remains model-specific, so select from
the levels shown for the chosen model rather than treating the full list as
universal.
[OpenAI: latest model guide](https://developers.openai.com/api/docs/guides/latest-model)
Use a lower-cost tier and low effort for bounded, mechanical work; raise the model tier or effort for planning, architecture, difficult debugging, and final review. This is routing guidance, not an API guarantee. Use a lower-cost tier and low effort for bounded, mechanical work; raise the
model tier or effort for planning, architecture, difficult debugging, and final
review. This is routing guidance, not an API guarantee.
## Anthropic Claude ## Anthropic Claude
### Model tier ### Model tier
Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast work. Aliases resolve to provider-dependent recommended versions and can change over time; use a full model ID when reproducibility matters. Claude Code also documents `opusplan`, which uses Opus in plan mode and Sonnet for execution. [Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config) Claude Code provides the aliases `opus`, `sonnet`, and `haiku`: Opus is intended
for complex reasoning, Sonnet for everyday coding, and Haiku for simple, fast
work. Aliases resolve to provider-dependent recommended versions and can change
over time; use a full model ID when reproducibility matters. Claude Code also
documents `opusplan`, which uses Opus in plan mode and Sonnet for execution.
[Claude Code: model configuration](https://docs.anthropic.com/en/docs/claude-code/model-config)
Copy-ready Claude Code switches: Copy-ready Claude Code switches:
@@ -37,7 +54,12 @@ claude --model opus
### Effort ### Effort
The Claude API parameter is `output_config.effort`. The documented levels are `low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh` and `max` have narrower model support, and Haiku 4.5 does not support effort. Effort affects the whole response—including thinking and tool calls—and is a behavioral signal, not a strict token budget. [Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort) The Claude API parameter is `output_config.effort`. The documented levels are
`low`, `medium`, `high`, `xhigh`, and `max`; `high` is the API default. `xhigh`
and `max` have narrower model support, and Haiku 4.5 does not support effort.
Effort affects the whole response—including thinking and tool calls—and is a
behavioral signal, not a strict token budget.
[Anthropic: effort](https://docs.anthropic.com/en/docs/build-with-claude/effort)
Documented Python example: Documented Python example:
@@ -53,27 +75,45 @@ response = client.messages.create(
) )
``` ```
Claude Code exposes `/effort`; its available choices depend on the active model. Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and `max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`. When a selected level is unsupported, Claude Code can fall back to the highest supported level at or below it. [Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level) Claude Code exposes `/effort`; its available choices depend on the active model.
Current Claude Code documentation lists `low`, `medium`, `high`, `xhigh`, and
`max` for supported Opus versions, while some Opus/Sonnet versions omit `xhigh`.
When a selected level is unsupported, Claude Code can fall back to the highest
supported level at or below it.
[Claude Code: effort compatibility](https://docs.anthropic.com/en/docs/claude-code/model-config#adjust-effort-level)
## Google Gemini ## Google Gemini
### Model tier ### Model tier
Gemini uses model families rather than interchangeable aliases: **Pro** targets the most complex reasoning, **Flash** balances capability and throughput, and **Flash-Lite** prioritizes latency, volume, and cost. Select an explicit endpoint such as `gemini-3.7-flash`; Google recommends stable model names for most production applications because `latest` aliases can be hot-swapped. [Gemini API: models](https://ai.google.dev/gemini-api/docs/models) Gemini uses model families rather than interchangeable aliases: **Pro** targets
the most complex reasoning, **Flash** balances capability and throughput, and
**Flash-Lite** prioritizes latency, volume, and cost. Select an explicit
endpoint such as `gemini-3.7-flash`; Google recommends stable model names for
most production applications because `latest` aliases can be hot-swapped.
[Gemini API: models](https://ai.google.dev/gemini-api/docs/models)
### Thinking level ### Thinking level
For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in Python). Across the family the documented values are `minimal`, `low`, `medium`, and `high`, but support and defaults vary by model. For example, Gemini 3.7 Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1 Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is unavailable on several models and does not guarantee that reasoning is completely off where supported. Gemini 2.5 uses `thinkingBudget`, not `thinkingLevel`. [Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking) For Gemini 3 models, the control is `thinkingLevel` in SDKs (`thinking_level` in
Python). Across the family the documented values are `minimal`, `low`, `medium`,
and `high`, but support and defaults vary by model. For example, Gemini 3.7
Flash supports `low`, `medium`, and `high` and defaults to `medium`; Gemini 3.1
Pro supports `low`, `medium`, and `high` and defaults to `high`. `minimal` is
unavailable on several models and does not guarantee that reasoning is
completely off where supported. Gemini 2.5 uses `thinkingBudget`, not
`thinkingLevel`.
[Gemini API: thinking](https://ai.google.dev/gemini-api/docs/thinking)
Documented JavaScript pattern: Documented JavaScript pattern:
```javascript ```javascript
import { GoogleGenAI, ThinkingLevel } from "@google/genai"; import { GoogleGenAI, ThinkingLevel } from '@google/genai';
const ai = new GoogleGenAI({}); const ai = new GoogleGenAI({});
const response = await ai.models.generateContent({ const response = await ai.models.generateContent({
model: "gemini-3.7-flash", model: 'gemini-3.7-flash',
contents: "Review this implementation plan.", contents: 'Review this implementation plan.',
config: { config: {
thinkingConfig: { thinkingConfig: {
thinkingLevel: ThinkingLevel.LOW, thinkingLevel: ThinkingLevel.LOW,
@@ -86,11 +126,13 @@ console.log(response.text);
## Practical routing baseline ## Practical routing baseline
| Work | Model tier | Effort / thinking | | Work | Model tier | Effort / thinking |
| --- | --- | --- | | --------------------------------------------------- | ------------------------- | -------------------------------------- |
| Formatting, lookup, narrow edit | Haiku / Flash-Lite / Luna | Low or minimal where supported | | Formatting, lookup, narrow edit | Haiku / Flash-Lite / Luna | Low or minimal where supported |
| Normal implementation, tests, review | Sonnet / Flash / Terra | Medium | | Normal implementation, tests, review | Sonnet / Flash / Terra | Medium |
| Architecture, orchestration, hard debugging | Opus / Pro / Sol | High | | Architecture, orchestration, hard debugging | Opus / Pro / Sol | High |
| Frontier or long-horizon work with measured benefit | Strongest supported tier | `xhigh` or `max` only where documented | | Frontier or long-horizon work with measured benefit | Strongest supported tier | `xhigh` or `max` only where documented |
Treat this table as a starting hypothesis. Evaluate quality, latency, and cost on representative tasks, then route to the cheapest combination that still passes the required checks. Treat this table as a starting hypothesis. Evaluate quality, latency, and cost
on representative tasks, then route to the cheapest combination that still
passes the required checks.
+19 -12
View File
@@ -1,17 +1,20 @@
# Verified skill sources # Verified skill sources
Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A pinned blob link identifies the content inspected; the repository/path column identifies what an installer should copy. Pinned commits are preferable to mutable `main` when reproducibility matters. Checked on 2026-09-02 against the installed files under `~/.codex/skills`. A
pinned blob link identifies the content inspected; the repository/path column
identifies what an installer should copy. Pinned commits are preferable to
mutable `main` when reproducibility matters.
| Skill | Verified source URL | Installable repo URL/path | Confidence / note | | Skill | Verified source URL | Installable repo URL/path | Confidence / note |
|---|---|---|---| | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ponytail-lite` | [`AGENTS.md` at `e7b42dc`](https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md) | [`ilindaniel/ponytail-lite`](https://github.com/ilindaniel/ponytail-lite), path `AGENTS.md` | **High — exact byte match.** The local `ponytail-lite/SKILL.md` is this file unchanged. Upstream presents it as an agent instruction file, not a conventional frontmatter-based skill package; install it through the host's project/global instruction mechanism. | | `ponytail-lite` | [`AGENTS.md` at `e7b42dc`](https://github.com/ilindaniel/ponytail-lite/blob/e7b42dc2d384a702240dea4d52a7bf5530b821b6/AGENTS.md) | [`ilindaniel/ponytail-lite`](https://github.com/ilindaniel/ponytail-lite), path `AGENTS.md` | **High — exact byte match.** The local `ponytail-lite/SKILL.md` is this file unchanged. Upstream presents it as an agent instruction file, not a conventional frontmatter-based skill package; install it through the host's project/global instruction mechanism. |
| `caveman` | [Public upstream skill at `3b74643`](https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md) | [`JuliusBrussee/caveman`](https://github.com/JuliusBrussee/caveman), path `skills/caveman/` | **Medium for the installed file; high for upstream.** The local file is an environment-specific wrapper that names this public project and its skill files, but it is not byte-identical to the public `skills/caveman/SKILL.md`. Install upstream, not the local wrapper. | | `caveman` | [Public upstream skill at `3b74643`](https://github.com/JuliusBrussee/caveman/blob/3b74643f4d910f496babd4e634b1ba7168816f14/skills/caveman/SKILL.md) | [`JuliusBrussee/caveman`](https://github.com/JuliusBrussee/caveman), path `skills/caveman/` | **Medium for the installed file; high for upstream.** The local file is an environment-specific wrapper that names this public project and its skill files, but it is not byte-identical to the public `skills/caveman/SKILL.md`. Install upstream, not the local wrapper. |
| `unlazy` | [`SKILL.md` at `473d4b8`](https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md) | [`Leonxlnx/unlazy`](https://github.com/Leonxlnx/unlazy), repository root (copy the whole package) | **High — exact byte match**, also corroborated by local `.unlazy-source.txt`. The package includes referenced scripts, templates, security notes, and workflow documents; do not copy only `SKILL.md`. | | `unlazy` | [`SKILL.md` at `473d4b8`](https://github.com/Leonxlnx/unlazy/blob/473d4b80421c36d733042434cd4b938f81a19ef1/SKILL.md) | [`Leonxlnx/unlazy`](https://github.com/Leonxlnx/unlazy), repository root (copy the whole package) | **High — exact byte match**, also corroborated by local `.unlazy-source.txt`. The package includes referenced scripts, templates, security notes, and workflow documents; do not copy only `SKILL.md`. |
| `research` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/research/` | **High — exact byte match.** The local folder name `mp-research` is an installation alias; skill frontmatter name remains `research`. | | `research` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/research/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/research/` | **High — exact byte match.** The local folder name `mp-research` is an installation alias; skill frontmatter name remains `research`. |
| `diagnosing-bugs` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/diagnosing-bugs/` | **High — exact byte match.** The local folder is aliased as `mp-diagnosing-bugs`. | | `diagnosing-bugs` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/diagnosing-bugs/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/diagnosing-bugs/` | **High — exact byte match.** The local folder is aliased as `mp-diagnosing-bugs`. |
| `code-review` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/code-review/` | **High — exact byte match.** The local folder is aliased as `mp-code-review`. Copy the directory so any future supporting files remain available. | | `code-review` | [`SKILL.md` at `6654f6b`](https://github.com/mattpocock/skills/blob/6654f6b60cd9d5be8b54c6fafe44346dabeb3b76/skills/engineering/code-review/SKILL.md) | [`mattpocock/skills`](https://github.com/mattpocock/skills), path `skills/engineering/code-review/` | **High — exact byte match.** The local folder is aliased as `mp-code-review`. Copy the directory so any future supporting files remain available. |
| `token-saver` | [`SKILL.md` at `8f21188`](https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md) | [`aetox-skills/token-saver`](https://github.com/aetox-skills/token-saver), repository root | **High — exact byte match.** The skill expects the separate [`rtk-ai/rtk`](https://github.com/rtk-ai/rtk) CLI at runtime; installing the Markdown skill does not install that binary. | | `token-saver` | [`SKILL.md` at `8f21188`](https://github.com/aetox-skills/token-saver/blob/8f21188bb043fad411f47e2e57f0365a83c13da7/SKILL.md) | [`aetox-skills/token-saver`](https://github.com/aetox-skills/token-saver), repository root | **High — exact byte match.** The skill expects the separate [`rtk-ai/rtk`](https://github.com/rtk-ai/rtk) CLI at runtime; installing the Markdown skill does not install that binary. |
| `webapp-testing` | [`SKILL.md` at `5304866`](https://github.com/anthropics/skills/blob/53048666b05b4799081517d00e09e0a2dd688678/skills/webapp-testing/SKILL.md) | [`anthropics/skills`](https://github.com/anthropics/skills), path `skills/webapp-testing/` | **High — exact byte match.** Copy the full directory because the skill calls `scripts/with_server.py` and carries its own license file. | | `webapp-testing` | [`SKILL.md` at `5304866`](https://github.com/anthropics/skills/blob/53048666b05b4799081517d00e09e0a2dd688678/skills/webapp-testing/SKILL.md) | [`anthropics/skills`](https://github.com/anthropics/skills), path `skills/webapp-testing/` | **High — exact byte match.** Copy the full directory because the skill calls `scripts/with_server.py` and carries its own license file. |
## Safe copy-paste prompt ## Safe copy-paste prompt
@@ -38,4 +41,8 @@ Workflow:
## Verification method ## Verification method
The seven **exact** findings were established by downloading the pinned public files and comparing them byte-for-byte with the local installed copies. For `caveman`, the local wrapper was compared against both the repository-level instructions and public `skills/caveman/SKILL.md`; neither matched, so only its upstream family is attributed, not the wrapper itself. The seven **exact** findings were established by downloading the pinned public
files and comparing them byte-for-byte with the local installed copies. For
`caveman`, the local wrapper was compared against both the repository-level
instructions and public `skills/caveman/SKILL.md`; neither matched, so only its
upstream family is attributed, not the wrapper itself.
+76 -24
View File
@@ -1,27 +1,79 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="description" content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification."> <meta
<title>AI For Dummies — Start here</title> name="description"
<link rel="stylesheet" href="chapters.css"> content="AI For Dummies: a practical route map for models, agents, worktrees, skills, rules, and verification."
<link rel="stylesheet" href="landing.css"> />
</head> <title>AI For Dummies — Start here</title>
<body> <link rel="stylesheet" href="chapters.css" />
<main> <link rel="stylesheet" href="landing.css" />
<header class="top"><a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span><a href="skills-review/">review desk ↗</a></header> </head>
<section class="hero"><p class="eyebrow">The short route</p><h1>Ship the<br><em>system.</em></h1><p>Start with the map. Then open the one chapter that matches the decision in front of you: model, agent, worktree, skill, rule, or proof.</p><a class="guide-launch" href="full-guide/">Take the full field guide <span></span></a></section> <body>
<section class="grid route-grid" aria-label="Guide chapters"> <main>
<article class="card"><b>01</b><h2>Models</h2><p>Capability and effort are separate knobs.</p><a href="models/">Open chapter →</a></article> <header class="top">
<article class="card"><b>02</b><h2>Agents & trees</h2><p>Bound roles, handoffs, and worktrees.</p><a href="agents/">Open chapter →</a></article> <a href="./" aria-current="page">AI FOR DUMMIES</a><span>00 / START HERE</span
<article class="card"><b>03</b><h2>Skills</h2><p>Capture repeatable decisions in small packages.</p><a href="skills/">Open chapter →</a></article> ><a href="skills-review/">review desk ↗</a>
<article class="card"><b>04</b><h2>Rules</h2><p>Connect guidance to enforcement.</p><a href="rules/">Open chapter →</a></article> </header>
<article class="card"><b>05</b><h2>Hands-on</h2><p>Compare a strong prompt with skill-enabled work.</p><a href="hands-on/starter/">Open lab →</a></article> <section class="hero">
<article class="card"><b>06</b><h2>Review desk</h2><p>Browse original packages, references, scripts, and improvements.</p><a href="skills-review/">Open desk →</a></article> <p class="eyebrow">The short route</p>
</section> <h1>Ship the<br /><em>system.</em></h1>
<section class="landing-note"><span>THE THREAD</span><strong>Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong></section> <p>
<footer>The route map is now the default entry. The full guide remains available whenever you want the whole narrative.</footer> Start with the map. Then open the one chapter that matches the decision in front of you:
</main> model, agent, worktree, skill, rule, or proof.
</body> </p>
<a class="guide-launch" href="full-guide/">Take the full field guide <span></span></a>
</section>
<section class="grid route-grid" aria-label="Guide chapters">
<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 in small packages.</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>Hands-on</h2>
<p>Compare a strong prompt with skill-enabled work.</p>
<a href="hands-on/starter/">Open lab →</a>
</article>
<article class="card">
<b>06</b>
<h2>Review desk</h2>
<p>Browse original packages, references, scripts, and improvements.</p>
<a href="skills-review/">Open desk →</a>
</article>
</section>
<section class="landing-note">
<span>THE THREAD</span
><strong
>Frame uncertainty → isolate execution → preserve judgment → verify the change.</strong
>
</section>
<footer>
The route map is now the default entry. The full guide remains available whenever you want
the whole narrative.
</footer>
</main>
</body>
</html> </html>
+87 -1
View File
@@ -1 +1,87 @@
<!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="../full-guide/">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> <!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="../full-guide/">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>
+10 -9
View File
@@ -1,12 +1,13 @@
# Task 05 — Guide content out of app.js # Task 05 — Guide content out of app.js
**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
**Depends on**: 04 · **Parallel with**: 06 · **Blocks**: 15 **Parallel with**: 06 · **Blocks**: 15 **Worktree**:
**Worktree**: `.agents/scripts/worktree.sh start 05 content-guide` `.agents/scripts/worktree.sh start 05 content-guide`
## Goal ## Goal
Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`, byte-identical. Every `{ en, pt }` string in `app.js` lives in `src/content/guide/`,
byte-identical.
## Scope ## Scope
@@ -15,13 +16,13 @@ removes it once the page consumes the collection.
## Steps ## Steps
1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json` 1. `node .agents/scripts/extract-strings.mjs app.js > /tmp/before.json` (~50
(~50 pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`, pairs across `phases`, `handsOnPrompts`, `modelGuide`, `skillSources`,
`skillInstallPrompts`). `skillInstallPrompts`).
2. Move them into the collection. **Copy mechanically — never retype.** These 2. Move them into the collection. **Copy mechanically — never retype.** These
are hand-written translations with deliberate tone (`'Transforme ambiguidade are hand-written translations with deliberate tone
em trabalho'`); retyping introduces drift nobody catches until a Portuguese (`'Transforme ambiguidade em trabalho'`); retyping introduces drift nobody
speaker reads it. catches until a Portuguese speaker reads it.
3. `node .agents/scripts/extract-strings.mjs src/content/guide/ > /tmp/after.json` 3. `node .agents/scripts/extract-strings.mjs src/content/guide/ > /tmp/after.json`
4. `diff /tmp/before.json /tmp/after.json`**must be empty**. 4. `diff /tmp/before.json /tmp/after.json`**must be empty**.
@@ -1,8 +1,8 @@
# Task 06 — Review-desk content out of catalog.js # Task 06 — Review-desk content out of catalog.js
**Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Agent**: `content-i18n-migrator` · **Model**: MiniMax-M3 **Depends on**: 04 ·
**Depends on**: 04 · **Parallel with**: 05 · **Blocks**: 16 **Parallel with**: 05 · **Blocks**: 16 **Worktree**:
**Worktree**: `.agents/scripts/worktree.sh start 06 content-review` `.agents/scripts/worktree.sh start 06 content-review`
## Goal ## Goal
@@ -32,12 +32,14 @@ real `.md` files.
node scripts/build-skill-review.mjs && git diff --exit-code skill-reviews/ node scripts/build-skill-review.mjs && git diff --exit-code skill-reviews/
``` ```
2. **The diff view needs raw source.** The review desk compares original and 2. **The diff view needs raw source.** The review desk compares original and
improved as *text*. If `improved` only exists as rendered HTML, the change improved as _text_. If `improved` only exists as rendered HTML, the change
lens breaks. Keep the raw string reachable. lens breaks. Keep the raw string reachable.
## Done when ## Done when
- [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still passes - [ ] 24 entries in the collection; `verify.mjs`'s `id:'` count assertion still
passes
- [ ] `git diff --exit-code skill-reviews/` clean after regenerating - [ ] `git diff --exit-code skill-reviews/` clean after regenerating
- [ ] `astro check` passes - [ ] `astro check` passes
- [ ] Every reference to the generator still accurate (`package.json`, `README.md`, `docs/operations-guide.md`, the review desk footer) - [ ] Every reference to the generator still accurate (`package.json`,
`README.md`, `docs/operations-guide.md`, the review desk footer)
@@ -224,3 +224,108 @@ block — do not work around it by duplicating the block.
- [ ] No `.pt` reads added to the nine selector detail panels - [ ] No `.pt` reads added to the nine selector detail panels
- [ ] Gate green, 42 assertions, `verify.mjs` untouched - [ ] Gate green, 42 assertions, `verify.mjs` untouched
- [ ] Report lists any `translations.pt` selector you could not place, and why - [ ] Report lists any `translations.pt` selector you could not place, and why
## Attempt 3: the blocker is cleared
Task 10b landed. `FleetDiagram`, `HandoffTable`, `PhasePanel`, `RouteTable`,
`SkillPackage` and `WorktreeMap` now accept `Localized = { en, pt }` on every
prose prop and emit the `data-language-content` pair themselves. Passing a plain
`string` still renders exactly what it rendered before, so nothing you already
wrote has to change shape — you pass `{ en, pt }` where you passed a string.
You are the first call site for those six blocks. No merged page uses them, so
if a prop is wrong you will be the one to find it. Report anything that does not
fit rather than working around it.
**The measurement.** 17 of the 102 `translations.pt` entries currently reach the
built page. Verify against `dist/full-guide/index.html`, not against the
`.astro` source — `/rules/` looks monolingual in source and is fully bilingual
in output, because the strings arrive through a content collection. Checking the
source is how you get a wrong answer here.
For each of the 102 entries: the selector tells you which element, the value is
the Portuguese, and `full-guide/index.html` has the English. Both verbatim.
Remaining done-when boxes are the ones in the previous section, unchanged.
## Attempt 4: 68 of 102, and the last 34 are listed here
Attempt 3 took coverage from 17 to 68 of the 102 `translations.pt` entries,
measured against `dist/full-guide/index.html`. Its snapshot rewrite is accepted
— it explained the reason (sections attempt 2 had dropped came back, and
`CopyPrompt` renders slightly differently), which is what the brief asked for.
Three cleanups first, before any new work:
- `translations_extracted.js`, `scratch/` and
`.agents/snapshots/full-guide-new.txt` are untracked leftovers in the
worktree. Delete them. Do not commit them.
- Never `git add -A` from the repo root here.
### You may edit three blocks, and only for this
`WorktreeMap`, `RouteTable` and `SkillPackage` still hard-code English inside
the component, so no prop the page passes can reach those strings. Task 10b made
their prop-driven prose `Localized`; it did not catch the literals baked into
the markup.
Extend exactly those three, using 10b's established pattern: a `Localized` value
renders the `data-language-content="en"` / `"pt"` pair, a plain `string` renders
exactly what it renders today. You are still the only call site, so nothing else
can regress. Do not touch any other block.
### The 34 remaining entries
Each row is the `translations.pt` selector and its Portuguese. The English is in
`full-guide/index.html` at the same selector. Both verbatim — no retranslation,
no rephrasing, no fixing what looks like a typo.
| selector | Portuguese |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `.caption` | O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados verificáveis. Ele não precisa digitar cada linha. |
| `.workflow .copy > p:last-child` | Delegar é mover uma tarefa delimitada para um contexto menor — não abrir mão da responsabilidade. |
| `.worktree-intro > p:nth-of-type(2)` | Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu próprio checkout e índice; o histórico continua compartilhado. |
| `.tree-node.root span` | RAIZ |
| `.tree-node.root small` | ● limpo |
| `.route-table .head span:nth-child(1)` | Trabalho |
| `.route-table .head span:nth-child(2)` | Perfil |
| `.route-table .head span:nth-child(3)` | Formato do prompt |
| `.skill-principles span:nth-child(1)` | 01 / defina o gatilho |
| `.skill-principles span:nth-child(2)` | 02 / carregue detalhes sob demanda |
| `.skill-principles span:nth-child(3)` | 03 / devolva evidências |
| `.skill-package > span` | PACOTE DE SKILL |
| `.catalog-intro .eyebrow` | O kit de campo |
| `.catalog-intro h2` | Trabalhos diferentes.<br />Instintos <em>diferentes.</em> |
| `.catalog-intro > p` | Uma skill muda como o agente aborda o trabalho. Algumas moldam a comunicação. Outras impõem pesquisa, diagnóstico, revisão ou disciplina de conclusão. Selecione uma para inspecionar sua regra operacional. |
| `[data-common-skill="ponytail"] span` | SIMPLIFICAR |
| `[data-common-skill="ponytail"] small` | código mínimo que funciona |
| `[data-common-skill="caveman"] span` | COMUNICAR |
| `[data-common-skill="caveman"] small` | sinal sem excesso |
| `[data-common-skill="unlazy"] span` | CONCLUIR |
| `[data-common-skill="unlazy"] small` | gates e evidências |
| `[data-common-skill="research"] span` | INVESTIGAR |
| `[data-common-skill="research"] small` | fontes primárias primeiro |
| `[data-common-skill="debug"] span` | DIAGNOSTICAR |
| `[data-common-skill="debug"] small` | ciclo curto de feedback |
| `[data-common-skill="review"] span` | REVISAR |
| `[data-common-skill="review"] small` | padrões × especificação |
| `[data-common-skill="tokens"] span` | ECONOMIZAR |
| `[data-common-skill="tokens"] small` | comprima saídas ruidosas |
| `.skill-loadout > span` | UM LOADOUT PRÁTICO |
| `.skill-loadout > div` | <b>PLANEJAR</b> unlazy <i>→</i> <b>CONSTRUIR</b> ponytail-lite <i>→</i> <b>DIAGNOSTICAR</b> diagnosing-bugs <i>→</i> <b>REPORTAR</b> caveman |
| `.callout span` | COMECE AQUI |
| `.callout strong` | Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem realmente independentes. |
| `.sources p` | Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes. <a href="rules/">Estudo de caso sobre regras e enforcement →</a> <a href="docs/references/README.md">Referências primárias →</a> <a href="docs/references/additional-reading.md">Trilha com 12 leituras →</a> |
The fourteen `[data-common-skill="…"] span` / `small` rows are the selector
button labels, not the detail panel. `GuideSelector` re-renders the panel per
locale but not the button labels, so those need the server-rendered pair like
any other static string.
### Done when
- [ ] All 102 entries present in `dist/full-guide/index.html` — 102, not 68
- [ ] The three blocks take `Localized` for their previously hard-coded strings
- [ ] No untracked scratch files left in the worktree
- [ ] `pnpm run gate` green, 42 assertions, `verify.mjs` untouched
- [ ] Report names any selector you could not place and why
+3 -3
View File
@@ -1,8 +1,8 @@
# Task 17 — hands-on passthrough # Task 17 — hands-on passthrough
**Agent**: `astro-architect` · **Model**: MiniMax-M3 **Agent**: `astro-architect` · **Model**: MiniMax-M3 **Depends on**: 01 ·
**Depends on**: 01 · **Parallel with**: 12, 13, 14 **Parallel with**: 12, 13, 14 **Worktree**:
**Worktree**: `.agents/scripts/worktree.sh start 17 hands-on` `.agents/scripts/worktree.sh start 17 hands-on`
## Goal ## Goal
+350 -44
View File
@@ -24,68 +24,374 @@ const skillsHtml = read('skills/index.html');
const reviewCatalog = read('skills-review/catalog.js'); const reviewCatalog = read('skills-review/catalog.js');
const reviewVoteJs = read('skills-review/vote.js'); const reviewVoteJs = read('skills-review/vote.js');
const voteService = read('vote-service/main.go'); const voteService = read('vote-service/main.go');
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');
for (const token of ['data-phase="plan"','data-phase="build"','data-phase="review"','data-tree="main"','data-tree="ui"','data-worker="ui"','data-route="plan"','data-model-provider="openai"','data-model-provider="claude"','data-model-provider="gemini"','data-effort="low"','data-effort="medium"','data-effort="high"','data-skill-file="skill"','data-skill-step="observe"','data-skill-step="validate"','data-common-skill="ponytail"','data-common-skill="caveman"','data-common-skill="unlazy"','id="hands-on"','data-copy-target="prompt-install-skills"','data-copy-target="prompt-basic"','data-copy-target="prompt-skills"','hands-on/starter/','additional-reading.md','role="tablist"','<table']) if (!html.includes(token)) throw new Error(`missing content ${token}`); for (const token of [
for (const token of ['const phases','const handsOnPrompts','const modelGuide','const skillSources','const skillInstallPrompts','addEventListener','render(\'plan\')','renderTree','renderWorker','renderRoute','renderModelProvider','renderEffort','renderSkillFile','renderSkillWorkflow','renderCommonSkill','renderHandsOn','copyPrompt']) if (!js.includes(token)) throw new Error(`missing interaction ${token}`); 'data-phase="plan"',
for (const token of ['id="task-list"','id="task-count"']) if (!starterHtml.includes(token)) throw new Error(`missing starter content ${token}`); 'data-phase="build"',
for (const token of ['const tasks','renderTasks()']) if (!starterJs.includes(token)) throw new Error(`missing starter behavior ${token}`); 'data-phase="review"',
for (const token of ['medium.com','anthropic.com/engineering','openai.com/business','git-scm.com/docs/git-worktree']) if (!additional.includes(token)) throw new Error(`missing additional source ${token}`); 'data-tree="main"',
if ((additional.match(/^### \d+\./gm) || []).length < 5) throw new Error('fewer than five additional readings'); 'data-tree="ui"',
for (const token of ['e7b42dc2d384a702240dea4d52a7bf5530b821b6','6654f6b60cd9d5be8b54c6fafe44346dabeb3b76','53048666b05b4799081517d00e09e0a2dd688678']) if (!skillSources.includes(token) || !js.includes(token)) throw new Error(`missing pinned skill source ${token}`); 'data-worker="ui"',
for (const token of ['developers.openai.com/api/docs/guides/latest-model','docs.anthropic.com/en/docs/claude-code/model-config','ai.google.dev/gemini-api/docs/thinking']) if (!modelRouting.includes(token) || !js.includes(token)) throw new Error(`missing model source ${token}`); 'data-route="plan"',
'data-model-provider="openai"',
'data-model-provider="claude"',
'data-model-provider="gemini"',
'data-effort="low"',
'data-effort="medium"',
'data-effort="high"',
'data-skill-file="skill"',
'data-skill-step="observe"',
'data-skill-step="validate"',
'data-common-skill="ponytail"',
'data-common-skill="caveman"',
'data-common-skill="unlazy"',
'id="hands-on"',
'data-copy-target="prompt-install-skills"',
'data-copy-target="prompt-basic"',
'data-copy-target="prompt-skills"',
'hands-on/starter/',
'additional-reading.md',
'role="tablist"',
'<table',
])
if (!html.includes(token)) throw new Error(`missing content ${token}`);
for (const token of [
'const phases',
'const handsOnPrompts',
'const modelGuide',
'const skillSources',
'const skillInstallPrompts',
'addEventListener',
"render('plan')",
'renderTree',
'renderWorker',
'renderRoute',
'renderModelProvider',
'renderEffort',
'renderSkillFile',
'renderSkillWorkflow',
'renderCommonSkill',
'renderHandsOn',
'copyPrompt',
])
if (!js.includes(token)) throw new Error(`missing interaction ${token}`);
for (const token of ['id="task-list"', 'id="task-count"'])
if (!starterHtml.includes(token)) throw new Error(`missing starter content ${token}`);
for (const token of ['const tasks', 'renderTasks()'])
if (!starterJs.includes(token)) throw new Error(`missing starter behavior ${token}`);
for (const token of [
'medium.com',
'anthropic.com/engineering',
'openai.com/business',
'git-scm.com/docs/git-worktree',
])
if (!additional.includes(token)) throw new Error(`missing additional source ${token}`);
if ((additional.match(/^### \d+\./gm) || []).length < 5)
throw new Error('fewer than five additional readings');
for (const token of [
'e7b42dc2d384a702240dea4d52a7bf5530b821b6',
'6654f6b60cd9d5be8b54c6fafe44346dabeb3b76',
'53048666b05b4799081517d00e09e0a2dd688678',
])
if (!skillSources.includes(token) || !js.includes(token))
throw new Error(`missing pinned skill source ${token}`);
for (const token of [
'developers.openai.com/api/docs/guides/latest-model',
'docs.anthropic.com/en/docs/claude-code/model-config',
'ai.google.dev/gemini-api/docs/thinking',
])
if (!modelRouting.includes(token) || !js.includes(token))
throw new Error(`missing model source ${token}`);
console.log('interaction verification passed'); console.log('interaction verification passed');
if (html.match(/<(script|link)[^>]+(src|href)="https?:[^"]+"/i)) throw new Error('external runtime dependency found'); if (html.match(/<(script|link)[^>]+(src|href)="https?:[^"]+"/i))
throw new Error('external runtime dependency found');
console.log('standalone verification passed'); console.log('standalone verification passed');
for (const token of ['id="pipeline"','id="skills"','id="examples"','data-stage="context"','data-stage="cli"','data-stage="commit"','data-stage="review"','gate-discipline','parallel-agents','repo-db','tech-debt','skill-writer','scripts/check-ui-contract.mjs','.husky/pre-commit','.pr-review.json','.agents/skills','netcracker/interview']) if (!rulesHtml.includes(token)) throw new Error(`missing rules content ${token}`); for (const token of [
'id="pipeline"',
'id="skills"',
'id="examples"',
'data-stage="context"',
'data-stage="cli"',
'data-stage="commit"',
'data-stage="review"',
'gate-discipline',
'parallel-agents',
'repo-db',
'tech-debt',
'skill-writer',
'scripts/check-ui-contract.mjs',
'.husky/pre-commit',
'.pr-review.json',
'.agents/skills',
'netcracker/interview',
])
if (!rulesHtml.includes(token)) throw new Error(`missing rules content ${token}`);
console.log('rules content verification passed'); console.log('rules content verification passed');
for (const token of ['const languageCopy','const stages','const skills','const prompts','renderStage','renderSkill','renderLanguage','copyPrompt','addEventListener']) if (!rulesJs.includes(token)) throw new Error(`missing rules interaction ${token}`); for (const token of [
for (const token of ['data-lang="en"','data-lang="pt"','data-copy-prompt','aria-live="polite"','role="tablist"']) if (!rulesHtml.includes(token)) throw new Error(`missing rules control ${token}`); 'const languageCopy',
'const stages',
'const skills',
'const prompts',
'renderStage',
'renderSkill',
'renderLanguage',
'copyPrompt',
'addEventListener',
])
if (!rulesJs.includes(token)) throw new Error(`missing rules interaction ${token}`);
for (const token of [
'data-lang="en"',
'data-lang="pt"',
'data-copy-prompt',
'aria-live="polite"',
'role="tablist"',
])
if (!rulesHtml.includes(token)) throw new Error(`missing rules control ${token}`);
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/"'))
if (!html.includes('href="../skills-review/"')) throw new Error('main presentation does not link to skills review page'); throw new Error('main presentation does not link to rules 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 (!html.includes('href="../skills-review/"'))
if (rulesHtml.includes('script src="http') || rulesHtml.includes('rel="stylesheet" href="http')) throw new Error('rules page has an external runtime dependency'); throw new Error('main presentation does not link to skills review page');
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 ['../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'); console.log('rules standalone verification passed');
for (const token of ['id="catalog"','id="skill-filter"','id="skill-list"','id="detail"','Preview Markdown','styles.css?v=20260904-vote-widget','change-lens.css?v=20260904-vote-widget','app.js?v=20260904-vote-widget','?author=Name&amp;skill=skill-id&amp;view=improved','SKILLS_REVIEW_VOTE_API']) if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`); for (const token of [
for (const token of ["from './catalog.js'", "from './files.js'",'function renderList','function renderDetail','selectSkill','packageSummary','markdownHeadings','markdownToc','document.addEventListener(\'keydown\'','loadSelectedFile','schedulePackageSearch','fetchSource','packageSearchText','diffMarkup','diffRows','data-diff','searchParams.set(\'compare\'','markdownMarkup','data-render','preview-markdown','Preview Markdown','View source','FILE PREVIEW','searchParams.set(\'render\'','AUTHOR ·','SKILL ·','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}`); 'id="catalog"',
for (const token of ['ndo-repro','gfiber-logging','confluence-page','diagram-plantuml','page-reviewer','unslop','spanish-naturalizer','draft-mr','semantic-diff-review','reference.md','files =']) if (!`${reviewFiles}\n${read('skills-review/submitted-files.js')}`.includes(token)) throw new Error(`missing review file manifest ${token}`); 'id="skill-filter"',
if ((reviewCatalog.match(/id:'/g) || []).length + (read('skills-review/submitted-catalog.js').match(/id:'/g) || []).length !== 24) throw new Error('review catalog does not cover all submissions'); 'id="skill-list"',
if (!reviewCatalog.includes('hardcoded password') || !reviewCatalog.includes('safety-redacted') || !reviewJs.includes('[REDACTED]') || !reviewJs.includes('[REDACTED LOCAL USER]') || !reviewJs.includes('[REDACTED USER]')) throw new Error('review catalog does not record secret safety handling'); 'id="detail"',
'Preview Markdown',
'styles.css?v=20260904-vote-widget',
'change-lens.css?v=20260904-vote-widget',
'app.js?v=20260904-vote-widget',
'?author=Name&amp;skill=skill-id&amp;view=improved',
'SKILLS_REVIEW_VOTE_API',
])
if (!reviewHtml.includes(token)) throw new Error(`missing review page content ${token}`);
for (const token of [
"from './catalog.js'",
"from './files.js'",
'function renderList',
'function renderDetail',
'selectSkill',
'packageSummary',
'markdownHeadings',
'markdownToc',
"document.addEventListener('keydown'",
'loadSelectedFile',
'schedulePackageSearch',
'fetchSource',
'packageSearchText',
'diffMarkup',
'diffRows',
'data-diff',
"searchParams.set('compare'",
'markdownMarkup',
'data-render',
'preview-markdown',
'Preview Markdown',
'View source',
'FILE PREVIEW',
"searchParams.set('render'",
'AUTHOR ·',
'SKILL ·',
'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',
'gfiber-logging',
'confluence-page',
'diagram-plantuml',
'page-reviewer',
'unslop',
'spanish-naturalizer',
'draft-mr',
'semantic-diff-review',
'reference.md',
'files =',
])
if (!`${reviewFiles}\n${read('skills-review/submitted-files.js')}`.includes(token))
throw new Error(`missing review file manifest ${token}`);
if (
(reviewCatalog.match(/id:'/g) || []).length +
(read('skills-review/submitted-catalog.js').match(/id:'/g) || []).length !==
24
)
throw new Error('review catalog does not cover all submissions');
if (
!reviewCatalog.includes('hardcoded password') ||
!reviewCatalog.includes('safety-redacted') ||
!reviewJs.includes('[REDACTED]') ||
!reviewJs.includes('[REDACTED LOCAL USER]') ||
!reviewJs.includes('[REDACTED USER]')
)
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 page of [summaryHtml, modelsHtml, agentsHtml, skillsHtml])
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}`); 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'); console.log('chapter route verification passed');
for (const token of ['The short route','full-guide/','models/','agents/','skills/','rules/','hands-on/starter/','skills-review/']) if (!landingHtml.includes(token)) throw new Error(`landing page missing ${token}`); for (const token of [
if (landingHtml.includes('app.js')) throw new Error('landing page should remain a fast, static route map'); 'The short route',
'full-guide/',
'models/',
'agents/',
'skills/',
'rules/',
'hands-on/starter/',
'skills-review/',
])
if (!landingHtml.includes(token)) throw new Error(`landing page missing ${token}`);
if (landingHtml.includes('app.js'))
throw new Error('landing page should remain a fast, static route map');
console.log('landing route verification passed'); console.log('landing route verification passed');
for (const token of ['data-package-file="skill"','data-package-file="references"','data-package-file="scripts"','data-package-file="assets"','id="package-preview"','script src="app.js"']) if (!skillsHtml.includes(token)) throw new Error(`skills anatomy missing ${token}`); for (const token of [
'data-package-file="skill"',
'data-package-file="references"',
'data-package-file="scripts"',
'data-package-file="assets"',
'id="package-preview"',
'script src="app.js"',
])
if (!skillsHtml.includes(token)) throw new Error(`skills anatomy missing ${token}`);
const skillsApp = read('skills/app.js'); const skillsApp = read('skills/app.js');
const skillsCss = read('skills/styles.css'); const skillsCss = read('skills/styles.css');
for (const token of ['const packageFiles','function renderPackage','addEventListener','renderPackage(\'skill\')']) if (!skillsApp.includes(token)) throw new Error(`skills anatomy interaction missing ${token}`); for (const token of [
for (const token of ['grid-template-columns:minmax(190px','overflow-wrap:anywhere','@media(max-width:800px)','prefers-reduced-motion']) if (!skillsCss.includes(token)) throw new Error(`skills anatomy responsive contract missing ${token}`); 'const packageFiles',
'function renderPackage',
'addEventListener',
"renderPackage('skill')",
])
if (!skillsApp.includes(token)) throw new Error(`skills anatomy interaction missing ${token}`);
for (const token of [
'grid-template-columns:minmax(190px',
'overflow-wrap:anywhere',
'@media(max-width:800px)',
'prefers-reduced-motion',
])
if (!skillsCss.includes(token))
throw new Error(`skills anatomy responsive contract missing ${token}`);
console.log('skills anatomy verification passed'); console.log('skills anatomy verification passed');
console.log('presentation verification passed'); console.log('presentation verification passed');
const legacyName = String.fromCharCode(80,101,100,114,111,32,65,114,97,110,104,97); const legacyName = String.fromCharCode(80, 101, 100, 114, 111, 32, 65, 114, 97, 110, 104, 97);
const legacyHandle = legacyName.toLowerCase().replace(' ', '.'); const legacyHandle = legacyName.toLowerCase().replace(' ', '.');
for (const path of ['submitted-skills/Anonymous Operational Submission/skills/ndo-repro/SKILL.md','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/envs.tsv','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/lib/env.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-api.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-ship.sh','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/bom-Dockerfile_local.example','submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/dockerfile-local.md','skill-reviews/improved/ndo-repro/SKILL.md']) { for (const path of [
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/SKILL.md',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/envs.tsv',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/lib/env.sh',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-api.sh',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/ndo-ship.sh',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/bom-Dockerfile_local.example',
'submitted-skills/Anonymous Operational Submission/skills/ndo-repro/reference/dockerfile-local.md',
'skill-reviews/improved/ndo-repro/SKILL.md',
]) {
const source = read(path); const source = read(path);
if (new RegExp(`${legacyName}|${legacyHandle}|https?:\\/\\/|git\\.netcracker\\.com|artifactorycn|managed\\.netcracker\\.cloud`, 'i').test(source)) throw new Error(`operational submission privacy leak in ${path}`); if (
new RegExp(
`${legacyName}|${legacyHandle}|https?:\\/\\/|git\\.netcracker\\.com|artifactorycn|managed\\.netcracker\\.cloud`,
'i',
).test(source)
)
throw new Error(`operational submission privacy leak in ${path}`);
} }
for (const source of [reviewCatalog, reviewFiles, reviewJs]) if (source.includes(legacyName) || source.includes(legacyName.replace(' ', '%20'))) throw new Error('operational submission identity remains in review desk source'); for (const source of [reviewCatalog, reviewFiles, reviewJs])
if (!reviewFiles.includes('Anonymous%20Operational%20Submission') || !reviewJs.includes("entry.id === 'ndo-repro'")) throw new Error('operational submission redaction contract missing'); if (source.includes(legacyName) || source.includes(legacyName.replace(' ', '%20')))
throw new Error('operational submission identity remains in review desk source');
if (
!reviewFiles.includes('Anonymous%20Operational%20Submission') ||
!reviewJs.includes("entry.id === 'ndo-repro'")
)
throw new Error('operational submission redaction contract missing');
console.log('review privacy verification passed'); console.log('review privacy verification passed');
for (const token of ['currentContent','unchangedDraft','state.preview = button.dataset.preview','state.file = available.find','loadSelectedFile']) if (!reviewJs.includes(token)) throw new Error(`review file-mode contract missing ${token}`); for (const token of [
if (reviewJs.includes("state.preview = 'original'; syncUrl(); renderDetail(); loadSelectedFile();")) throw new Error('file selection still resets improved mode'); 'currentContent',
'unchangedDraft',
'state.preview = button.dataset.preview',
'state.file = available.find',
'loadSelectedFile',
])
if (!reviewJs.includes(token)) throw new Error(`review file-mode contract missing ${token}`);
if (reviewJs.includes("state.preview = 'original'; syncUrl(); renderDetail(); loadSelectedFile();"))
throw new Error('file selection still resets improved mode');
console.log('review file-mode verification passed'); console.log('review file-mode verification passed');
for (const token of ['const changeRows','function lensMarkup','data-lens','CHANGE LENS','What changed — and why.']) if (!reviewJs.includes(token)) throw new Error(`review change-lens contract missing ${token}`); for (const token of [
for (const token of ['.change-lens','.change-rows','.skill-diff','.diff-lines','@media(max-width:620px)','prefers-reduced-motion']) if (!reviewLensCss.includes(token)) throw new Error(`review change-lens CSS missing ${token}`); 'const changeRows',
'function lensMarkup',
'data-lens',
'CHANGE LENS',
'What changed — and why.',
])
if (!reviewJs.includes(token)) throw new Error(`review change-lens contract missing ${token}`);
for (const token of [
'.change-lens',
'.change-rows',
'.skill-diff',
'.diff-lines',
'@media(max-width:620px)',
'prefers-reduced-motion',
])
if (!reviewLensCss.includes(token)) throw new Error(`review change-lens CSS missing ${token}`);
console.log('review change-lens verification passed'); console.log('review change-lens verification passed');
for (const token of ['.markdown-preview','max-height:540px','.markdown-table-wrap','.markdown-frontmatter','.markdown-toc','.preview-title','.preview-markdown','grid-template-columns:minmax(0,1fr)','height:120px','-webkit-line-clamp:2']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review markdown preview contract missing ${token}`); for (const token of [
'.markdown-preview',
'max-height:540px',
'.markdown-table-wrap',
'.markdown-frontmatter',
'.markdown-toc',
'.preview-title',
'.preview-markdown',
'grid-template-columns:minmax(0,1fr)',
'height:120px',
'-webkit-line-clamp:2',
])
if (!read('skills-review/styles.css').includes(token))
throw new Error(`review markdown preview contract missing ${token}`);
console.log('review markdown preview verification passed'); console.log('review markdown preview verification passed');
for (const token of ["from './vote.js'","renderVoteWidget($('#vote-widget'"]) if (!reviewJs.includes(token)) throw new Error(`review vote widget wiring missing ${token}`); for (const token of ["from './vote.js'", "renderVoteWidget($('#vote-widget'"])
for (const token of ['id="vote-widget"','function renderVoteWidget','X-Voter-Id','/api/votes','Voting is offline']) if (!reviewVoteJs.includes(token) && !reviewJs.includes(token)) throw new Error(`review vote widget contract missing ${token}`); if (!reviewJs.includes(token)) throw new Error(`review vote widget wiring missing ${token}`);
for (const token of ['.vote-widget','.vote-buttons','[aria-pressed="true"]']) if (!read('skills-review/styles.css').includes(token)) throw new Error(`review vote widget CSS missing ${token}`); for (const token of [
if (!voteService.includes('X-Forwarded-For') || !voteService.includes('one active vote per skill') && !voteService.includes('at most one active vote')) throw new Error('vote-service missing IP-based one-vote-per-source contract'); 'id="vote-widget"',
'function renderVoteWidget',
'X-Voter-Id',
'/api/votes',
'Voting is offline',
])
if (!reviewVoteJs.includes(token) && !reviewJs.includes(token))
throw new Error(`review vote widget contract missing ${token}`);
for (const token of ['.vote-widget', '.vote-buttons', '[aria-pressed="true"]'])
if (!read('skills-review/styles.css').includes(token))
throw new Error(`review vote widget CSS missing ${token}`);
if (
!voteService.includes('X-Forwarded-For') ||
(!voteService.includes('one active vote per skill') &&
!voteService.includes('at most one active vote'))
)
throw new Error('vote-service missing IP-based one-vote-per-source contract');
console.log('review vote widget verification passed'); console.log('review vote widget verification passed');
+52 -4
View File
@@ -21,16 +21,64 @@ interface Route {
interface Props { interface Props {
routes: Route[]; routes: Route[];
initial?: string; initial?: string;
headWork?: string | Localized;
headProfile?: string | Localized;
headPromptShape?: string | Localized;
} }
const { routes, initial = routes[0]?.id ?? 'plan' } = Astro.props; const {
routes,
initial = routes[0]?.id ?? 'plan',
headWork = 'Work',
headProfile = 'Profile',
headPromptShape = 'Prompt shape',
} = Astro.props;
--- ---
<div class="route-table"> <div class="route-table">
<div class="head"> <div class="head">
<span>Work</span> <span>
<span>Profile</span> {
<span>Prompt shape</span> typeof headWork === 'string' ? (
headWork
) : (
<>
<span data-language-content="en">{headWork.en}</span>
<span data-language-content="pt" hidden>
{headWork.pt}
</span>
</>
)
}
</span>
<span>
{
typeof headProfile === 'string' ? (
headProfile
) : (
<>
<span data-language-content="en">{headProfile.en}</span>
<span data-language-content="pt" hidden>
{headProfile.pt}
</span>
</>
)
}
</span>
<span>
{
typeof headPromptShape === 'string' ? (
headPromptShape
) : (
<>
<span data-language-content="en">{headPromptShape.en}</span>
<span data-language-content="pt" hidden>
{headPromptShape.pt}
</span>
</>
)
}
</span>
</div> </div>
{ {
routes.map((route) => ( routes.map((route) => (
+16 -2
View File
@@ -20,13 +20,27 @@ interface PackageFile {
interface Props { interface Props {
files: PackageFile[]; files: PackageFile[];
initial?: string; initial?: string;
packageLabel?: string | Localized;
} }
const { files, initial = files[0]?.id ?? 'skill' } = Astro.props; const { files, initial = files[0]?.id ?? 'skill', packageLabel = 'SKILL PACKAGE' } = Astro.props;
--- ---
<div class="skill-package" role="tree" aria-label="Skill package files"> <div class="skill-package" role="tree" aria-label="Skill package files">
<span class="skill-package-label">SKILL PACKAGE</span> <span class="skill-package-label">
{
typeof packageLabel === 'string' ? (
packageLabel
) : (
<>
<span data-language-content="en">{packageLabel.en}</span>
<span data-language-content="pt" hidden>
{packageLabel.pt}
</span>
</>
)
}
</span>
{ {
files.map((file) => ( files.map((file) => (
<button <button
+33 -2
View File
@@ -24,9 +24,11 @@ interface Branch {
interface Props { interface Props {
branches: Branch[]; branches: Branch[];
initial?: string; initial?: string;
rootLabel?: string | Localized;
rootSmall?: string | Localized;
} }
const { branches, initial = 'main' } = Astro.props; const { branches, initial = 'main', rootLabel = 'ROOT', rootSmall = '● clean' } = Astro.props;
--- ---
<div class="tree-stage" role="tree" aria-label="Repository worktree topology"> <div class="tree-stage" role="tree" aria-label="Repository worktree topology">
@@ -41,8 +43,37 @@ const { branches, initial = 'main' } = Astro.props;
data-tree="main" data-tree="main"
role="treeitem" role="treeitem"
aria-selected={initial === 'main'} aria-selected={initial === 'main'}
><span>ROOT</span><strong>main</strong><small> clean</small></button
> >
<span>
{
typeof rootLabel === 'string' ? (
rootLabel
) : (
<>
<span data-language-content="en">{rootLabel.en}</span>
<span data-language-content="pt" hidden>
{rootLabel.pt}
</span>
</>
)
}
</span>
<strong>main</strong>
<small>
{
typeof rootSmall === 'string' ? (
rootSmall
) : (
<>
<span data-language-content="en">{rootSmall.en}</span>
<span data-language-content="pt" hidden>
{rootSmall.pt}
</span>
</>
)
}
</small>
</button>
{ {
branches.map((branch) => ( branches.map((branch) => (
<button <button
+568 -98
View File
@@ -95,24 +95,45 @@ const selectorData = {
labels, labels,
}; };
const workerCards = [ const workerCards = [
{ id: 'ui', label: 'UI', strong: 'Component and visual states', code: 'agent/ui' }, {
{ id: 'tests', label: 'TEST', strong: 'Acceptance cases', code: 'agent/tests' }, id: 'ui',
{ id: 'docs', label: 'DOCS', strong: 'Guide and examples', code: 'agent/docs' }, label: 'UI',
]; strong: { en: 'Component and visual states', pt: 'Componentes e estados visuais' },
const treeBranches = [ code: 'agent/ui',
{ id: 'ui', label: 'UI AGENT', strong: 'agent/ui', small: '3 files · working', tone: 'ui' }, },
{ {
id: 'tests', id: 'tests',
label: 'TEST AGENT', label: 'TEST',
strong: { en: 'Acceptance cases', pt: 'Casos de aceitação' },
code: 'agent/tests',
},
{
id: 'docs',
label: 'DOCS',
strong: { en: 'Guide and examples', pt: 'Guia e exemplos' },
code: 'agent/docs',
},
];
const treeBranches = [
{
id: 'ui',
label: { en: 'UI AGENT', pt: 'AGENTE DE UI' },
strong: 'agent/ui',
small: { en: '3 files · working', pt: '3 arquivos · trabalhando' },
tone: 'ui',
},
{
id: 'tests',
label: { en: 'TEST AGENT', pt: 'AGENTE DE TESTES' },
strong: 'agent/tests', strong: 'agent/tests',
small: '8 checks · ready', small: { en: '8 checks · ready', pt: '8 verificações · pronto' },
tone: 'tests', tone: 'tests',
}, },
{ {
id: 'docs', id: 'docs',
label: 'DOCS AGENT', label: { en: 'DOCS AGENT', pt: 'AGENTE DE DOCS' },
strong: 'agent/docs', strong: 'agent/docs',
small: '2 pages · review', small: { en: '2 pages · review', pt: '2 páginas · revisão' },
tone: 'docs', tone: 'docs',
}, },
]; ];
@@ -128,29 +149,87 @@ const base = import.meta.env.BASE_URL;
<header class="topbar"> <header class="topbar">
<a class="brand" href="#top"><span class="mark">A</span> field guide</a> <a class="brand" href="#top"><span class="mark">A</span> field guide</a>
<nav class="chapter-links" aria-label="Chapter sections"> <nav class="chapter-links" aria-label="Chapter sections">
<a href="#fleet">01 fleet</a><a href="#worktrees">02 worktrees</a><a href="#models" <a href="#fleet"
>03 models</a ><span data-language-content="en">01 fleet</span><span data-language-content="pt" hidden
><a href="#skills">04 skills</a><a href="#create-skill">05 create</a><a href="#field-kit" >01 frota</span
>06 field kit</a ></a
><a href="#hands-on">07 hands-on</a><a href="#verification">08 verify</a> ><a href="#worktrees"
><span data-language-content="en">02 worktrees</span><span
data-language-content="pt"
hidden>02 worktrees</span
></a
><a href="#models"
><span data-language-content="en">03 models</span><span data-language-content="pt" hidden
>03 modelos</span
></a
><a href="#skills"
><span data-language-content="en">04 skills</span><span data-language-content="pt" hidden
>04 skills</span
></a
><a href="#create-skill"
><span data-language-content="en">05 create</span><span data-language-content="pt" hidden
>05 criar</span
></a
><a href="#field-kit"
><span data-language-content="en">06 field kit</span><span
data-language-content="pt"
hidden>06 kit de campo</span
></a
><a href="#hands-on"
><span data-language-content="en">07 hands-on</span><span
data-language-content="pt"
hidden>07 prática</span
></a
><a href="#verification">08 verify</a>
</nav> </nav>
<div class="topbar-tools"> <div class="topbar-tools">
<a class="skills-review-link" href={`${base}skills-review/`}>review submissions </a <a class="skills-review-link" href={`${base}skills-review/`}>review submissions </a
><LanguageToggle /><span class="edition">AI ENGINEERING <i></i> 01 / 2026</span> ><LanguageToggle /><span class="edition"
><span data-language-content="en">AI ENGINEERING <i></i> 01 / 2026</span><span
data-language-content="pt"
hidden>ENGENHARIA DE IA <i></i> 01 / 2026</span
></span
>
</div> </div>
</header> </header>
<section class="hero" id="top" data-language-content="en"> <section class="hero" id="top" data-language-content="en">
<div> <div>
<p class="eyebrow">A presentation for humans who ship</p><h1> <p class="eyebrow">
<span data-language-content="en">A presentation for humans who ship</span><span
data-language-content="pt"
hidden>Uma apresentação para quem entrega software</span
>
</p><h1>
AI for<br /><em>dummies.</em> AI for<br /><em>dummies.</em>
</h1><p class="lede"> </h1><p class="lede">
You do not need an army of models. You need a system: one mind to frame the work, several <span data-language-content="en"
hands to execute it, and a clean boundary between every task. >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.</span
>
<span data-language-content="pt" hidden
>Você não precisa de um exército de modelos. Precisa de um sistema: uma mente para
enquadrar o trabalho, várias mãos para executá-lo e uma fronteira clara entre cada
tarefa.</span
>
</p> </p>
</div><aside class="hero-index"> </div><aside class="hero-index">
<span>FIELD NOTE / 001</span><strong>Ship the<br /><em>system.</em></strong><small <span
>Skills · agents · worktrees · proof</small> ><span data-language-content="en">FIELD NOTE / 001</span><span
data-language-content="pt"
hidden>NOTA DE CAMPO / 001</span
></span
><strong
><span data-language-content="en">Ship the<br /><em>system.</em></span><span
data-language-content="pt"
hidden>Entregue o<br /><em>sistema.</em></span
></strong
><small
><span data-language-content="en">Skills · agents · worktrees · proof</span><span
data-language-content="pt"
hidden>Skills · agentes · worktrees · evidências</span
></small
>
</aside> </aside>
</section> </section>
<section class="hero" id="top-pt" data-language-content="pt" hidden> <section class="hero" id="top-pt" data-language-content="pt" hidden>
@@ -163,15 +242,38 @@ const base = import.meta.env.BASE_URL;
</p> </p>
</div><aside class="hero-index"> </div><aside class="hero-index">
<span>NOTA DE CAMPO / 001</span><strong>Entregue o<br /><em>sistema.</em></strong><small <span>NOTA DE CAMPO / 001</span><strong>Entregue o<br /><em>sistema.</em></strong><small
>Skills · agentes · worktrees · evidências</small> >Skills · agentes · worktrees · evidências</small
>
</aside> </aside>
</section> </section>
<section class="hero-stats" aria-label="Chapter summary" data-language-content="en"> <section class="hero-stats" aria-label="Chapter summary" data-language-content="en">
<div><strong>01</strong><span>strong model<br />for ambiguity</span></div><div> <div>
<strong>03</strong><span>bounded workers<br />in parallel</span> <strong>01</strong><span
</div><div><strong></strong><span>iterations<br />with evidence</span></div><p> ><span data-language-content="en">strong model<br />for ambiguity</span><span
Read this as a route map, not a prompt recipe. data-language-content="pt"
hidden>modelo forte<br />para ambiguidade</span
></span
>
</div><div>
<strong>03</strong><span
><span data-language-content="en">bounded workers<br />in parallel</span><span
data-language-content="pt"
hidden>workers delimitados<br />em paralelo</span
></span
>
</div><div>
<strong></strong><span
><span data-language-content="en">iterations<br />with evidence</span><span
data-language-content="pt"
hidden>iterações<br />com evidências</span
></span
>
</div><p>
<span data-language-content="en">Read this as a route map, not a prompt recipe.</span><span
data-language-content="pt"
hidden>Leia isto como um mapa de rota, não como uma receita de prompt.</span
>
</p> </p>
</section> </section>
<section class="hero-stats" aria-label="Resumo dos capítulos" data-language-content="pt" hidden> <section class="hero-stats" aria-label="Resumo dos capítulos" data-language-content="pt" hidden>
@@ -184,8 +286,17 @@ const base = import.meta.env.BASE_URL;
<section class="thesis" data-language-content="en"> <section class="thesis" data-language-content="en">
<div> <div>
<span>RULE ZERO</span><strong <span
>Strong model for ambiguity.<br />Light model for bounded work.</strong> ><span data-language-content="en">RULE ZERO</span><span data-language-content="pt" hidden
>REGRA ZERO</span
></span
><strong
><span data-language-content="en"
>Strong model for ambiguity.<br />Light model for bounded work.</span
><span data-language-content="pt" hidden
>Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.</span
></strong
>
</div><div class="signal" aria-hidden="true"> </div><div class="signal" aria-hidden="true">
<b>THINK</b><i></i><i></i><i></i><b>MAKE</b> <b>THINK</b><i></i><i></i><i></i><b>MAKE</b>
</div> </div>
@@ -193,7 +304,8 @@ const base = import.meta.env.BASE_URL;
<section class="thesis" data-language-content="pt" hidden> <section class="thesis" data-language-content="pt" hidden>
<div> <div>
<span>REGRA ZERO</span><strong <span>REGRA ZERO</span><strong
>Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.</strong> >Modelo forte para ambiguidade.<br />Modelo leve para trabalho delimitado.</strong
>
</div><div class="signal" aria-hidden="true"> </div><div class="signal" aria-hidden="true">
<b>PENSE</b><i></i><i></i><i></i><b>FAÇA</b> <b>PENSE</b><i></i><i></i><i></i><b>FAÇA</b>
</div> </div>
@@ -201,38 +313,94 @@ const base = import.meta.env.BASE_URL;
<section class="fleet" id="fleet"> <section class="fleet" id="fleet">
<div class="section-label"> <div class="section-label">
<span>A small fleet</span><span>coordination before parallelism</span> <span
><span data-language-content="en">A small fleet</span><span
data-language-content="pt"
hidden>Uma pequena frota</span
></span
><span
><span data-language-content="en">coordination before parallelism</span><span
data-language-content="pt"
hidden>coordenação antes do paralelismo</span
></span
>
</div><FleetDiagram </div><FleetDiagram
orchestrator={{ orchestrator={{
eyebrow: 'ORCHESTRATOR', eyebrow: { en: 'ORCHESTRATOR', pt: 'ORQUESTRADOR' },
title: 'Decides what<br />needs to happen.', title: {
en: 'Decides what<br />needs to happen.',
pt: 'Decide o que<br />precisa acontecer.',
},
code: 'Opus / reasoning', code: 'Opus / reasoning',
}} }}
workers={workerCards} workers={workerCards}
/><div class="worker-detail" id="worker-detail" aria-live="polite"> /><div class="worker-detail" id="worker-detail" aria-live="polite">
<span>{workers.ui.en[0]}</span><strong>{workers.ui.en[1]}</strong><small <span>{workers.ui.en[0]}</span><strong>{workers.ui.en[1]}</strong><small
>{workers.ui.en[2]}</small> >{workers.ui.en[2]}</small
>
</div><p class="caption"> </div><p class="caption">
The orchestrator preserves intent, writes small contracts, and gathers results that can be <span data-language-content="en"
verified. It does not need to type every line. >The orchestrator preserves intent, writes small contracts, and gathers results that can
be verified. It does not need to type every line.</span
><span data-language-content="pt" hidden
>O orquestrador preserva a intenção, escreve pequenos contratos e reúne resultados
verificáveis. Ele não precisa digitar cada linha.</span
>
</p> </p>
</section> </section>
<section class="failure-map"> <section class="failure-map">
<div class="section-label"> <div class="section-label">
<span>Why the boundary matters</span><span <span
>one vague task / three predictable failures</span> ><span data-language-content="en">Why the boundary matters</span><span
data-language-content="pt"
hidden>Por que a fronteira importa</span
></span
><span
><span data-language-content="en">one vague task / three predictable failures</span><span
data-language-content="pt"
hidden>uma tarefa vaga / três falhas previsíveis</span
></span
>
</div><div class="failure-grid"> </div><div class="failure-grid">
<article> <article>
<span>01</span><strong>Context soup</strong><p> <span>01</span><strong
Every worker reads everything. Nobody knows which facts are load-bearing. ><span data-language-content="en">Context soup</span><span
data-language-content="pt"
hidden>Sopa de contexto</span
></strong
><p>
<span data-language-content="en"
>Every worker reads everything. Nobody knows which facts are load-bearing.</span
><span data-language-content="pt" hidden
>Cada worker tudo. Ninguém sabe quais fatos são essenciais.</span
>
</p> </p>
</article><article> </article><article>
<span>02</span><strong>Branch collision</strong><p> <span>02</span><strong
Two agents touch the same checkout. The fastest path becomes conflict resolution. ><span data-language-content="en">Branch collision</span><span
data-language-content="pt"
hidden>Colisão de branches</span
></strong
><p>
<span data-language-content="en"
>Two agents touch the same checkout. The fastest path becomes conflict resolution.</span
><span data-language-content="pt" hidden
>Dois agentes usam o mesmo checkout. O caminho mais rápido vira resolução de
conflitos.</span
>
</p> </p>
</article><article> </article><article>
<span>03</span><strong>Confident drift</strong><p> <span>03</span><strong
The diff is polished, but no one checks whether it solved the original problem. ><span data-language-content="en">Confident drift</span><span
data-language-content="pt"
hidden>Desvio confiante</span
></strong
><p>
<span data-language-content="en"
>The diff is polished, but no one checks whether it solved the original problem.</span
><span data-language-content="pt" hidden
>O diff parece ótimo, mas ninguém verifica se resolveu o problema original.</span
>
</p> </p>
</article> </article>
</div> </div>
@@ -240,11 +408,24 @@ const base = import.meta.env.BASE_URL;
<section class="workflow" aria-labelledby="workflow-title"> <section class="workflow" aria-labelledby="workflow-title">
<div class="copy"> <div class="copy">
<p class="eyebrow">The subagent loop</p><h2 id="workflow-title"> <p class="eyebrow">
Click a phase.<br /><em>See the handoff.</em> <span data-language-content="en">The subagent loop</span><span
data-language-content="pt"
hidden>O ciclo de subagentes</span
>
</p><h2 id="workflow-title">
<span data-language-content="en">Click a phase.<br /><em>See the handoff.</em></span><span
data-language-content="pt"
hidden>Clique em uma fase.<br /><em>Veja a passagem.</em></span
>
</h2><p> </h2><p>
Delegation means moving one bounded task into a smaller contextnot giving away <span data-language-content="en"
responsibility. >Delegation means moving one bounded task into a smaller contextnot giving away
responsibility.</span
><span data-language-content="pt" hidden
>Delegar é mover uma tarefa delimitada para um contexto menor não abrir mão da
responsabilidade.</span
>
</p> </p>
</div><PhasePanel </div><PhasePanel
phases={[ phases={[
@@ -280,9 +461,23 @@ const base = import.meta.env.BASE_URL;
</section> </section>
<section class="handoff"> <section class="handoff">
<div class="section-label"> <div class="section-label">
<span>What crosses contexts</span><span>brief diff evidence</span> <span
><span data-language-content="en">What crosses contexts</span><span
data-language-content="pt"
hidden>O que atravessa contextos</span
></span
><span
><span data-language-content="en">brief diff evidence</span><span
data-language-content="pt"
hidden>brief diff evidência</span
></span
>
</div><HandoffTable </div><HandoffTable
columns={['Package', 'Contains', 'Why it matters']} columns={[
{ en: 'Package', pt: 'Pacote' },
{ en: 'Contains', pt: 'Contém' },
{ en: 'Why it matters', pt: 'Por que importa' },
]}
rows={[ rows={[
{ {
package: 'Brief', package: 'Brief',
@@ -310,20 +505,49 @@ const base = import.meta.env.BASE_URL;
<section class="worktrees" id="worktrees"> <section class="worktrees" id="worktrees">
<div class="worktree-intro"> <div class="worktree-intro">
<p class="eyebrow">Git worktrees</p><h2>One branch<br />per <em>hand.</em></h2><p> <p class="eyebrow">
A worktree is another directory linked to the same repository. Each agent gets its own <span data-language-content="en">Git worktrees</span><span
checkout and index; history remains shared. data-language-content="pt"
hidden>Git worktrees</span
>
</p><h2>
<span data-language-content="en">One branch<br />per <em>hand.</em></span><span
data-language-content="pt"
hidden>Uma branch<br />por <em>mão.</em></span
>
</h2><p>
<span data-language-content="en"
>A worktree is another directory linked to the same repository. Each agent gets its own
checkout and index; history remains shared.</span
><span data-language-content="pt" hidden
>Um worktree é outro diretório ligado ao mesmo repositório. Cada agente recebe seu
próprio checkout e índice; o histórico continua compartilhado.</span
>
</p><p class="interaction-hint"> </p><p class="interaction-hint">
Select a node to inspect its checkout, owner, and next action. <span data-language-content="en"
>Select a node to inspect its checkout, owner, and next action.</span
><span data-language-content="pt" hidden
>Selecione um para inspecionar checkout, responsável e próxima ação.</span
>
</p> </p>
</div><div class="tree-lab"> </div><div class="tree-lab">
<div class="tree-toolbar"> <div class="tree-toolbar">
<span>repository topology</span><span class="tree-live"><i></i> 4 checkouts</span> <span
</div><WorktreeMap branches={treeBranches} /><article ><span data-language-content="en">repository topology</span><span
class="tree-detail" data-language-content="pt"
id="tree-detail" hidden>topologia do repositório</span
aria-live="polite" ></span
> ><span class="tree-live"
><span data-language-content="en"><i></i> 4 checkouts</span><span
data-language-content="pt"
hidden><i></i> 4 checkouts</span
></span
>
</div><WorktreeMap
branches={treeBranches}
rootLabel={{ en: 'ROOT', pt: 'RAIZ' }}
rootSmall={{ en: '● clean', pt: '● limpo' }}
/><article class="tree-detail" id="tree-detail" aria-live="polite">
<div><span>{labels.owner.en}</span><strong>{trees.main.owner.en}</strong></div><div> <div><span>{labels.owner.en}</span><strong>{trees.main.owner.en}</strong></div><div>
<span>CHECKOUT</span><strong>{trees.main.path}</strong> <span>CHECKOUT</span><strong>{trees.main.path}</strong>
</div><p>{trees.main.note.en}</p><code>{trees.main.command}</code> </div><p>{trees.main.note.en}</p><code>{trees.main.command}</code>
@@ -333,33 +557,50 @@ const base = import.meta.env.BASE_URL;
<section class="routing"> <section class="routing">
<div> <div>
<p class="eyebrow">Model routing</p><h2> <p class="eyebrow">
Do not pay for<br />reasoning where<br />you need <em>rhythm.</em> <span data-language-content="en">Model routing</span><span
</h2><p class="interaction-hint">Choose a job to see why the model profile changes.</p> data-language-content="pt"
hidden>Roteamento de modelos</span
>
</p><h2>
<span data-language-content="en"
>Do not pay for<br />reasoning where<br />you need <em>rhythm.</em></span
><span data-language-content="pt" hidden
>Não pague por<br />raciocínio onde precisa<br />de <em>ritmo.</em></span
>
</h2><p class="interaction-hint">
<span data-language-content="en">Choose a job to see why the model profile changes.</span
><span data-language-content="pt" hidden
>Escolha um trabalho para entender por que o perfil do modelo muda.</span
>
</p>
</div><div class="route-console"> </div><div class="route-console">
<RouteTable <RouteTable
headWork={{ en: 'Work', pt: 'Trabalho' }}
headProfile={{ en: 'Profile', pt: 'Perfil' }}
headPromptShape={{ en: 'Prompt shape', pt: 'Formato do prompt' }}
routes={[ routes={[
{ {
id: 'plan', id: 'plan',
strong: 'Plan', strong: { en: 'Plan', pt: 'Planejar' },
profile: 'strong / broad', profile: 'strong / broad',
prompt: 'What changes? What can break?', prompt: 'What changes? What can break?',
}, },
{ {
id: 'build', id: 'build',
strong: 'Build', strong: { en: 'Build', pt: 'Construir' },
profile: 'fast / focused', profile: 'fast / focused',
prompt: 'Implement this slice. Run these checks.', prompt: 'Implement this slice. Run these checks.',
}, },
{ {
id: 'explore', id: 'explore',
strong: 'Explore', strong: { en: 'Explore', pt: 'Explorar' },
profile: 'read-only / light', profile: 'read-only / light',
prompt: 'Find where this contract is used.', prompt: 'Find where this contract is used.',
}, },
{ {
id: 'review', id: 'review',
strong: 'Review', strong: { en: 'Review', pt: 'Revisar' },
profile: 'independent', profile: 'independent',
prompt: 'Does the diff satisfy the brief?', prompt: 'Does the diff satisfy the brief?',
}, },
@@ -376,8 +617,47 @@ const base = import.meta.env.BASE_URL;
<section class="model-gearbox" id="models"> <section class="model-gearbox" id="models">
<div class="section-label"> <div class="section-label">
<span>Model gearbox</span><span>capability tier × thinking effort</span> <span
</div><div class="gearbox"> ><span data-language-content="en">Model gearbox</span><span
data-language-content="pt"
hidden>Câmbio de modelos</span
></span
><span
><span data-language-content="en">capability tier × thinking effort</span><span
data-language-content="pt"
hidden>nível de capacidade × esforço de raciocínio</span
></span
>
</div>
<div class="gearbox-intro">
<div>
<p class="eyebrow">
<span data-language-content="en">Two separate knobs</span><span
data-language-content="pt"
hidden>Dois controles separados</span
>
</p>
<h2>
<span data-language-content="en"
>Choose the engine.<br />Then choose the <em>gear.</em></span
><span data-language-content="pt" hidden
>Escolha o motor.<br />Depois escolha a <em>marcha.</em></span
>
</h2>
</div>
<p>
<span data-language-content="en"
>A stronger model changes the capability ceiling. Higher reasoning effort gives that
model more room to work. Start with the lightest combination that passes your real
checks, then move one knob at a time.</span
><span data-language-content="pt" hidden
>Um modelo mais forte muda o teto de capacidade. Mais esforço de raciocínio mais
espaço para esse modelo trabalhar. Comece com a combinação mais leve que passa seus
checks e mova um controle por vez.</span
>
</p>
</div>
<div class="gearbox">
<div class="provider-tabs" role="tablist" aria-label="Model providers"> <div class="provider-tabs" role="tablist" aria-label="Model providers">
<button class="active" data-model-provider="openai" role="tab" aria-selected="true" <button class="active" data-model-provider="openai" role="tab" aria-selected="true"
>OPENAI</button >OPENAI</button
@@ -388,30 +668,103 @@ const base = import.meta.env.BASE_URL;
<span>{providers.openai.label}</span><a <span>{providers.openai.label}</span><a
href={providers.openai.source} href={providers.openai.source}
target="_blank" target="_blank"
rel="noopener">{labels.officialSource.en}</a> rel="noopener">{labels.officialSource.en}</a
>
</header><h3>{providers.openai.title.en}</h3><p>{providers.openai.copy.en}</p> </header><h3>{providers.openai.title.en}</h3><p>{providers.openai.copy.en}</p>
</article><div class="effort-rail" role="tablist" aria-label="Reasoning effort"> </article><div class="effort-rail" role="tablist" aria-label="Reasoning effort">
<button data-effort="low" role="tab" aria-selected="false">LOW</button><button <span
class="active" ><span data-language-content="en">REASONING / THINKING</span><span
data-effort="medium" data-language-content="pt"
role="tab" hidden>RACIOCÍNIO / PENSAMENTO</span
aria-selected="true">MEDIUM</button ></span
><button data-effort="high" role="tab" aria-selected="false">HIGH</button> >
<button data-effort="low" role="tab" aria-selected="false"
><b
><span data-language-content="en">LOW</span><span data-language-content="pt" hidden
>BAIXO</span
></b
><small
><span data-language-content="en">bounded + fast</span><span
data-language-content="pt"
hidden>delimitado + rápido</span
></small
></button
><button class="active" data-effort="medium" role="tab" aria-selected="true"
>MEDIUM</button
><button data-effort="high" role="tab" aria-selected="false"
><b
><span data-language-content="en">HIGH</span><span data-language-content="pt" hidden
>ALTO</span
></b
><small
><span data-language-content="en">complex + costly</span><span
data-language-content="pt"
hidden>complexo + custoso</span
></small
></button
>
</div><article class="effort-detail" id="effort-detail" aria-live="polite"> </div><article class="effort-detail" id="effort-detail" aria-live="polite">
<span>{efforts.medium.en[0]}</span><p>{efforts.medium.en[1]}</p><code <span>{efforts.medium.en[0]}</span><p>{efforts.medium.en[1]}</p><code
>{providers.openai.config}</code> >{providers.openai.config}</code
>
</article> </article>
</div> </div>
<div class="gearbox-rule">
<span
><span data-language-content="en">ROUTING RULE</span><span
data-language-content="pt"
hidden>REGRA DE ROTEAMENTO</span
></span
>
<strong
><span data-language-content="en"
>Use strong models for ambiguity and judgment. Use lighter models for bounded execution.
Raise effort only when evaluation shows a gain.</span
><span data-language-content="pt" hidden
>Use modelos fortes para ambiguidade e julgamento. Use modelos leves para execução
delimitada. Aumente o esforço apenas quando a avaliação mostrar ganho.</span
></strong
>
</div>
</section> </section>
<section class="skills" id="skills"> <section class="skills" id="skills">
<div> <div>
<p class="eyebrow">Skills</p><h2>Write the right way<br /><em>once.</em></h2><p> <p class="eyebrow">
A skill is a reusable procedure. It can carry instructions, references, scripts, and <span data-language-content="en">Skills</span><span data-language-content="pt" hidden
assets. It is not magical memory, and it does not replace acceptance criteria. >Skills</span
</p> >
</p><h2>
<span data-language-content="en">Write the right way<br /><em>once.</em></span><span
data-language-content="pt"
hidden>Escreva do jeito certo<br /><em>uma vez.</em></span
>
</h2><p>
<span data-language-content="en"
>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.</span
>
<span data-language-content="pt" hidden
>Uma skill é um procedimento reutilizável. Ela pode carregar instruções, referências,
scripts e assets. Não é memória mágica e não substitui critérios de aceitação.</span
>
</p><div class="skill-principles">
<span data-language-content="en">01 / trigger clearly</span><span
data-language-content="pt"
hidden>01 / defina o gatilho</span
>
<span data-language-content="en">02 / load detail on demand</span><span
data-language-content="pt"
hidden>02 / carregue detalhes sob demanda</span
>
<span data-language-content="en">03 / return evidence</span><span
data-language-content="pt"
hidden>03 / devolva evidências</span
>
</div>
</div><div class="skill-explorer"> </div><div class="skill-explorer">
<SkillPackage <SkillPackage
packageLabel={{ en: 'SKILL PACKAGE', pt: 'PACOTE DE SKILL' }}
files={[ files={[
{ id: 'skill', path: 'SKILL.md', small: 'procedure and limits' }, { id: 'skill', path: 'SKILL.md', small: 'procedure and limits' },
{ id: 'references', path: 'references/', small: 'facts to consult' }, { id: 'references', path: 'references/', small: 'facts to consult' },
@@ -421,7 +774,8 @@ const base = import.meta.env.BASE_URL;
/><article class="skill-detail" id="skill-detail" aria-live="polite"> /><article class="skill-detail" id="skill-detail" aria-live="polite">
<span>{skillFiles.skill.icon}</span><div> <span>{skillFiles.skill.icon}</span><div>
<strong>{skillFiles.skill.title}</strong><p>{skillFiles.skill.en}</p><small <strong>{skillFiles.skill.title}</strong><p>{skillFiles.skill.en}</p><small
>{labels.skillFileHint.en}</small> >{labels.skillFileHint.en}</small
>
</div> </div>
</article> </article>
</div> </div>
@@ -457,10 +811,12 @@ const base = import.meta.env.BASE_URL;
</div><footer> </div><footer>
<div> <div>
<span>{labels.workflow.artifact.en}</span><strong <span>{labels.workflow.artifact.en}</span><strong
>{skillWorkflow.observe.output.en}</strong> >{skillWorkflow.observe.output.en}</strong
>
</div><div> </div><div>
<span>{labels.workflow.proof.en}</span><strong <span>{labels.workflow.proof.en}</span><strong
>{skillWorkflow.observe.proof.en}</strong> >{skillWorkflow.observe.proof.en}</strong
>
</div> </div>
</footer> </footer>
</article> </article>
@@ -469,7 +825,44 @@ const base = import.meta.env.BASE_URL;
<section class="skill-catalog" id="field-kit"> <section class="skill-catalog" id="field-kit">
<div class="section-label"> <div class="section-label">
<span>Common skills</span><span>choose behavior before model</span> <span
><span data-language-content="en">Common skills</span><span
data-language-content="pt"
hidden>Skills comuns</span
></span
><span
><span data-language-content="en">choose behavior before model</span><span
data-language-content="pt"
hidden>escolha o comportamento antes do modelo</span
></span
>
</div><div class="catalog-intro">
<div>
<p class="eyebrow">
<span data-language-content="en">The field kit</span><span
data-language-content="pt"
hidden>O kit de campo</span
>
</p>
<h2>
<span data-language-content="en"
>Different jobs.<br />Different <em>instincts.</em></span
><span data-language-content="pt" hidden
>Trabalhos diferentes.<br />Instintos <em>diferentes.</em></span
>
</h2>
</div>
<p>
<span data-language-content="en"
>A skill changes how an agent approaches work. Some shape communication. Others enforce
research, debugging, review, or completion discipline. Select one to inspect its
operating rule and verified source.</span
><span data-language-content="pt" hidden
>Uma skill muda como o agente aborda o trabalho. Algumas moldam a comunicação. Outras
impõem pesquisa, diagnóstico, revisão ou disciplina de conclusão. Selecione uma para
inspecionar sua regra operacional.</span
>
</p>
</div><div class="skill-deck"> </div><div class="skill-deck">
<div class="skill-index" role="tablist" aria-label="Common agent skills"> <div class="skill-index" role="tablist" aria-label="Common agent skills">
{ {
@@ -481,17 +874,27 @@ const base = import.meta.env.BASE_URL;
aria-selected={skill.id === 'ponytail'} aria-selected={skill.id === 'ponytail'}
> >
<> <>
<span>{skill.kind.en}</span> <span>
<span data-language-content="en">{skill.kind.en}</span>
<span data-language-content="pt" hidden>
{skill.kind.pt}
</span>
</span>
<strong>{skill.title}</strong> <strong>{skill.title}</strong>
<small>{skill.use.en}</small> <small>
<span data-language-content="en">{skill.use.en}</span>
<span data-language-content="pt" hidden>
{skill.use.pt}
</span>
</small>
</> </>
</button> </button>
)) ))
} }
</div><article class="common-skill-detail" id="common-skill-detail" aria-live="polite"> </div><article class="common-skill-detail" id="common-skill-detail" aria-live="polite">
<header> <header>
<span>{commonSkills.ponytail.number}</span><small <span>{commonSkills.ponytail.number}</span><small>{commonSkills.ponytail.kind.en}</small
>{commonSkills.ponytail.kind.en}</small> >
</header><h3>{commonSkills.ponytail.title}</h3><blockquote> </header><h3>{commonSkills.ponytail.title}</h3><blockquote>
{commonSkills.ponytail.rule.en} {commonSkills.ponytail.rule.en}
</blockquote><div class="common-skill-notes"> </blockquote><div class="common-skill-notes">
@@ -506,13 +909,32 @@ const base = import.meta.env.BASE_URL;
class="skill-source" class="skill-source"
href={commonSkills.ponytail.source} href={commonSkills.ponytail.source}
target="_blank" target="_blank"
rel="noopener">{labels.commonSkill.source.en}</a> rel="noopener">{labels.commonSkill.source.en}</a
>
</article> </article>
</div><div class="skill-loadout">
<span data-language-content="en">ONE PRACTICAL LOADOUT</span><span
data-language-content="pt"
hidden>UM LOADOUT PRÁTICO</span
>
<div data-language-content="en">
<b>PLAN</b> unlazy <i></i>
<b>BUILD</b> ponytail-lite <i></i>
<b>DEBUG</b> diagnosing-bugs <i></i>
<b>REPORT</b> caveman
</div>
<div data-language-content="pt" hidden>
<b>PLANEJAR</b> unlazy <i></i>
<b>CONSTRUIR</b> ponytail-lite <i></i>
<b>DIAGNOSTICAR</b> diagnosing-bugs <i></i>
<b>REPORTAR</b> caveman
</div>
</div><article class="install-skills"> </div><article class="install-skills">
<header> <header>
<div> <div>
<span>INSTALL PACK</span><strong <span>INSTALL PACK</span><strong
>Ask your coding agent to verify, install, and validate the skills.</strong> >Ask your coding agent to verify, install, and validate the skills.</strong
>
</div><CopyPrompt target="prompt-install-skills" /> </div><CopyPrompt target="prompt-install-skills" />
</header><pre><code id="prompt-install-skills">{install.en}</code></pre><footer> </header><pre><code id="prompt-install-skills">{install.en}</code></pre><footer>
Review every source before installation. Existing local skills must be preserved. Review every source before installation. Existing local skills must be preserved.
@@ -535,7 +957,8 @@ const base = import.meta.env.BASE_URL;
</p><div class="starter-links"> </p><div class="starter-links">
<a href={`${base}hands-on/starter/`} class="starter-link">Open the starter </a><a <a href={`${base}hands-on/starter/`} class="starter-link">Open the starter </a><a
href={`${base}hands-on/rules/`} href={`${base}hands-on/rules/`}
class="starter-link">Open the rules lab </a> class="starter-link">Open the rules lab </a
>
</div> </div>
</div> </div>
</div><div class="prompt-compare"> </div><div class="prompt-compare">
@@ -560,8 +983,34 @@ const base = import.meta.env.BASE_URL;
</section> </section>
<aside class="rule"> <aside class="rule">
<span>THE HUMAN JOB</span><strong <span
>The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</strong> ><span data-language-content="en">THE HUMAN JOB</span><span
data-language-content="pt"
hidden>O PAPEL HUMANO</span
></span
><strong
><span data-language-content="en"
>The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</span
><span data-language-content="pt" hidden
>O agente pode ser autônomo na execução. Intenção, limites e evidências continuam sendo
seus.</span
></strong
>
</aside>
<aside class="callout">
<span
><span data-language-content="en">START HERE</span><span data-language-content="pt" hidden
>COMECE AQUI</span
></span
><strong
><span data-language-content="en"
>Begin with one agent and one skill. Add parallelism only when the tasks are truly
independent.</span
><span data-language-content="pt" hidden
>Comece com um agente e uma skill. Adicione paralelismo apenas quando as tarefas forem
realmente independentes.</span
></strong
>
</aside> </aside>
<section class="verification" id="verification"> <section class="verification" id="verification">
<div class="section-label"> <div class="section-label">
@@ -584,12 +1033,33 @@ const base = import.meta.env.BASE_URL;
</section> </section>
<section class="sources"> <section class="sources">
<div class="section-label"> <div class="section-label">
<span>Keep learning</span><span>12 new readings + primary docs</span> <span
><span data-language-content="en">Keep learning</span><span
data-language-content="pt"
hidden>Continue aprendendo</span
></span
><span
><span data-language-content="en">12 new readings + primary docs</span><span
data-language-content="pt"
hidden>12 novas leituras + documentação primária</span
></span
>
</div><p> </div><p>
Go deeper with official documentation, production case studies, Medium, and practitioner <span data-language-content="en"
workflows. <a href={`${base}rules/`}>Rules and enforcement case study </a> >Go deeper with official documentation, production case studies, Medium, and practitioner
<a href={`${base}skills-review/`}>Skills review desk </a> workflows. <a href={`${base}rules/`}>Rules and enforcement case study </a>
<a href={`${base}docs/references/additional-reading.md`}>12-part reading path </a> <a href={`${base}skills-review/`}>Skills review desk </a>
<a href={`${base}docs/references/README.md`}>Primary references </a>
<a href={`${base}docs/references/additional-reading.md`}>12-part reading path </a></span
>
<span data-language-content="pt" hidden
>Aprofunde com documentação oficial, casos de produção, Medium e fluxos de praticantes. <a
href={`${base}rules/`}>Estudo de caso sobre regras e enforcement </a
>
<a href={`${base}docs/references/README.md`}>Referências primárias </a>
<a href={`${base}docs/references/additional-reading.md`}>Trilha com 12 leituras </a
></span
>
</p> </p>
</section> </section>
</main> </main>
+70 -1
View File
@@ -1 +1,70 @@
<!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="../full-guide/">← 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-guide/">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> <!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="../full-guide/">← 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-guide/">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>