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.
This commit is contained in:
Marcos Paulo
2026-09-05 22:20:36 +00:00
parent 2b49106b7f
commit aa49218fc8
2 changed files with 679 additions and 242 deletions
+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
.
+439 -84
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,86 @@ 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 +241,36 @@ 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 +283,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 +301,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,17 +310,31 @@ 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 The orchestrator preserves intent, writes small contracts, and gathers results that can be
verified. It does not need to type every line. verified. It does not need to type every line.
@@ -219,20 +342,57 @@ const base = import.meta.env.BASE_URL;
</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,8 +400,15 @@ 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 Delegation means moving one bounded task into a smaller contextnot giving away
responsibility. responsibility.
@@ -280,9 +447,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,15 +491,37 @@ 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">
<span data-language-content="en">Git worktrees</span><span
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>
A worktree is another directory linked to the same repository. Each agent gets its own A worktree is another directory linked to the same repository. Each agent gets its own
checkout and index; history remains shared. checkout and index; history remains shared.
</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
><span data-language-content="en">repository topology</span><span
data-language-content="pt"
hidden>topologia do repositório</span
></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} /><article </div><WorktreeMap branches={treeBranches} /><article
class="tree-detail" class="tree-detail"
id="tree-detail" id="tree-detail"
@@ -333,33 +536,45 @@ 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
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 +591,44 @@ 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,27 +639,84 @@ 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><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> </p>
</div><div class="skill-explorer"> </div><div class="skill-explorer">
<SkillPackage <SkillPackage
@@ -421,7 +729,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 +766,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 +780,17 @@ 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="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">
{ {
@@ -490,8 +811,8 @@ const base = import.meta.env.BASE_URL;
} }
</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 +827,15 @@ 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><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 +858,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 +884,19 @@ 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>
<section class="verification" id="verification"> <section class="verification" id="verification">
<div class="section-label"> <div class="section-label">
@@ -584,12 +919,32 @@ 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/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}skills-review/`}>Skills review desk </a>
<a href={`${base}docs/references/additional-reading.md`}>Trilha com 12 leituras </a
></span
>
</p> </p>
</section> </section>
</main> </main>