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
+439
-84
@@ -95,24 +95,45 @@ const selectorData = {
|
||||
labels,
|
||||
};
|
||||
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: 'docs', label: 'DOCS', strong: 'Guide and examples', code: 'agent/docs' },
|
||||
];
|
||||
const treeBranches = [
|
||||
{ id: 'ui', label: 'UI AGENT', strong: 'agent/ui', small: '3 files · working', tone: 'ui' },
|
||||
{
|
||||
id: 'ui',
|
||||
label: 'UI',
|
||||
strong: { en: 'Component and visual states', pt: 'Componentes e estados visuais' },
|
||||
code: 'agent/ui',
|
||||
},
|
||||
{
|
||||
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',
|
||||
small: '8 checks · ready',
|
||||
small: { en: '8 checks · ready', pt: '8 verificações · pronto' },
|
||||
tone: 'tests',
|
||||
},
|
||||
{
|
||||
id: 'docs',
|
||||
label: 'DOCS AGENT',
|
||||
label: { en: 'DOCS AGENT', pt: 'AGENTE DE DOCS' },
|
||||
strong: 'agent/docs',
|
||||
small: '2 pages · review',
|
||||
small: { en: '2 pages · review', pt: '2 páginas · revisão' },
|
||||
tone: 'docs',
|
||||
},
|
||||
];
|
||||
@@ -128,29 +149,86 @@ const base = import.meta.env.BASE_URL;
|
||||
<header class="topbar">
|
||||
<a class="brand" href="#top"><span class="mark">A</span> field guide</a>
|
||||
<nav class="chapter-links" aria-label="Chapter sections">
|
||||
<a href="#fleet">01 fleet</a><a href="#worktrees">02 worktrees</a><a href="#models"
|
||||
>03 models</a
|
||||
><a href="#skills">04 skills</a><a href="#create-skill">05 create</a><a href="#field-kit"
|
||||
>06 field kit</a
|
||||
><a href="#hands-on">07 hands-on</a><a href="#verification">08 verify</a>
|
||||
<a href="#fleet"
|
||||
><span data-language-content="en">01 fleet</span><span data-language-content="pt" hidden
|
||||
>01 frota</span
|
||||
></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>
|
||||
<div class="topbar-tools">
|
||||
<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>
|
||||
</header>
|
||||
|
||||
<section class="hero" id="top" data-language-content="en">
|
||||
<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>
|
||||
</h1><p class="lede">
|
||||
You do not need an army of models. You need a system: one mind to frame the work, several
|
||||
hands to execute it, and a clean boundary between every task.
|
||||
<span data-language-content="en"
|
||||
>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>
|
||||
</div><aside class="hero-index">
|
||||
<span>FIELD NOTE / 001</span><strong>Ship the<br /><em>system.</em></strong><small
|
||||
>Skills · agents · worktrees · proof</small>
|
||||
<span
|
||||
><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>
|
||||
</section>
|
||||
<section class="hero" id="top-pt" data-language-content="pt" hidden>
|
||||
@@ -163,15 +241,36 @@ const base = import.meta.env.BASE_URL;
|
||||
</p>
|
||||
</div><aside class="hero-index">
|
||||
<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>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<strong>03</strong><span>bounded workers<br />in parallel</span>
|
||||
</div><div><strong>∞</strong><span>iterations<br />with evidence</span></div><p>
|
||||
Read this as a route map, not a prompt recipe.
|
||||
<div>
|
||||
<strong>01</strong><span
|
||||
><span data-language-content="en">strong model<br />for ambiguity</span><span
|
||||
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>
|
||||
</section>
|
||||
<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">
|
||||
<div>
|
||||
<span>RULE ZERO</span><strong
|
||||
>Strong model for ambiguity.<br />Light model for bounded work.</strong>
|
||||
<span
|
||||
><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">
|
||||
<b>THINK</b><i></i><i></i><i></i><b>MAKE</b>
|
||||
</div>
|
||||
@@ -193,7 +301,8 @@ const base = import.meta.env.BASE_URL;
|
||||
<section class="thesis" data-language-content="pt" hidden>
|
||||
<div>
|
||||
<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">
|
||||
<b>PENSE</b><i></i><i></i><i></i><b>FAÇA</b>
|
||||
</div>
|
||||
@@ -201,17 +310,31 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="fleet" id="fleet">
|
||||
<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
|
||||
orchestrator={{
|
||||
eyebrow: 'ORCHESTRATOR',
|
||||
title: 'Decides what<br />needs to happen.',
|
||||
eyebrow: { en: 'ORCHESTRATOR', pt: 'ORQUESTRADOR' },
|
||||
title: {
|
||||
en: 'Decides what<br />needs to happen.',
|
||||
pt: 'Decide o que<br />precisa acontecer.',
|
||||
},
|
||||
code: 'Opus / reasoning',
|
||||
}}
|
||||
workers={workerCards}
|
||||
/><div class="worker-detail" id="worker-detail" aria-live="polite">
|
||||
<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">
|
||||
The orchestrator preserves intent, writes small contracts, and gathers results that can be
|
||||
verified. It does not need to type every line.
|
||||
@@ -219,20 +342,57 @@ const base = import.meta.env.BASE_URL;
|
||||
</section>
|
||||
<section class="failure-map">
|
||||
<div class="section-label">
|
||||
<span>Why the boundary matters</span><span
|
||||
>one vague task / three predictable failures</span>
|
||||
<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">
|
||||
<article>
|
||||
<span>01</span><strong>Context soup</strong><p>
|
||||
Every worker reads everything. Nobody knows which facts are load-bearing.
|
||||
<span>01</span><strong
|
||||
><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 lê tudo. Ninguém sabe quais fatos são essenciais.</span
|
||||
>
|
||||
</p>
|
||||
</article><article>
|
||||
<span>02</span><strong>Branch collision</strong><p>
|
||||
Two agents touch the same checkout. The fastest path becomes conflict resolution.
|
||||
<span>02</span><strong
|
||||
><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>
|
||||
</article><article>
|
||||
<span>03</span><strong>Confident drift</strong><p>
|
||||
The diff is polished, but no one checks whether it solved the original problem.
|
||||
<span>03</span><strong
|
||||
><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>
|
||||
</article>
|
||||
</div>
|
||||
@@ -240,8 +400,15 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="workflow" aria-labelledby="workflow-title">
|
||||
<div class="copy">
|
||||
<p class="eyebrow">The subagent loop</p><h2 id="workflow-title">
|
||||
Click a phase.<br /><em>See the handoff.</em>
|
||||
<p class="eyebrow">
|
||||
<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>
|
||||
Delegation means moving one bounded task into a smaller context—not giving away
|
||||
responsibility.
|
||||
@@ -280,9 +447,23 @@ const base = import.meta.env.BASE_URL;
|
||||
</section>
|
||||
<section class="handoff">
|
||||
<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
|
||||
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={[
|
||||
{
|
||||
package: 'Brief',
|
||||
@@ -310,15 +491,37 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="worktrees" id="worktrees">
|
||||
<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
|
||||
checkout and index; history remains shared.
|
||||
</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 nó para inspecionar checkout, responsável e próxima ação.</span
|
||||
>
|
||||
</p>
|
||||
</div><div class="tree-lab">
|
||||
<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
|
||||
class="tree-detail"
|
||||
id="tree-detail"
|
||||
@@ -333,33 +536,45 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="routing">
|
||||
<div>
|
||||
<p class="eyebrow">Model routing</p><h2>
|
||||
Do not pay for<br />reasoning where<br />you need <em>rhythm.</em>
|
||||
</h2><p class="interaction-hint">Choose a job to see why the model profile changes.</p>
|
||||
<p class="eyebrow">
|
||||
<span data-language-content="en">Model routing</span><span
|
||||
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">
|
||||
<RouteTable
|
||||
routes={[
|
||||
{
|
||||
id: 'plan',
|
||||
strong: 'Plan',
|
||||
strong: { en: 'Plan', pt: 'Planejar' },
|
||||
profile: 'strong / broad',
|
||||
prompt: 'What changes? What can break?',
|
||||
},
|
||||
{
|
||||
id: 'build',
|
||||
strong: 'Build',
|
||||
strong: { en: 'Build', pt: 'Construir' },
|
||||
profile: 'fast / focused',
|
||||
prompt: 'Implement this slice. Run these checks.',
|
||||
},
|
||||
{
|
||||
id: 'explore',
|
||||
strong: 'Explore',
|
||||
strong: { en: 'Explore', pt: 'Explorar' },
|
||||
profile: 'read-only / light',
|
||||
prompt: 'Find where this contract is used.',
|
||||
},
|
||||
{
|
||||
id: 'review',
|
||||
strong: 'Review',
|
||||
strong: { en: 'Review', pt: 'Revisar' },
|
||||
profile: 'independent',
|
||||
prompt: 'Does the diff satisfy the brief?',
|
||||
},
|
||||
@@ -376,8 +591,44 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="model-gearbox" id="models">
|
||||
<div class="section-label">
|
||||
<span>Model gearbox</span><span>capability tier × thinking effort</span>
|
||||
</div><div class="gearbox">
|
||||
<span
|
||||
><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 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.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="gearbox">
|
||||
<div class="provider-tabs" role="tablist" aria-label="Model providers">
|
||||
<button class="active" data-model-provider="openai" role="tab" aria-selected="true"
|
||||
>OPENAI</button
|
||||
@@ -388,27 +639,84 @@ const base = import.meta.env.BASE_URL;
|
||||
<span>{providers.openai.label}</span><a
|
||||
href={providers.openai.source}
|
||||
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>
|
||||
</article><div class="effort-rail" role="tablist" aria-label="Reasoning effort">
|
||||
<button data-effort="low" role="tab" aria-selected="false">LOW</button><button
|
||||
class="active"
|
||||
data-effort="medium"
|
||||
role="tab"
|
||||
aria-selected="true">MEDIUM</button
|
||||
><button data-effort="high" role="tab" aria-selected="false">HIGH</button>
|
||||
<span
|
||||
><span data-language-content="en">REASONING / THINKING</span><span
|
||||
data-language-content="pt"
|
||||
hidden>RACIOCÍNIO / PENSAMENTO</span
|
||||
></span
|
||||
>
|
||||
<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">
|
||||
<span>{efforts.medium.en[0]}</span><p>{efforts.medium.en[1]}</p><code
|
||||
>{providers.openai.config}</code>
|
||||
>{providers.openai.config}</code
|
||||
>
|
||||
</article>
|
||||
</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 class="skills" id="skills">
|
||||
<div>
|
||||
<p class="eyebrow">Skills</p><h2>Write the right way<br /><em>once.</em></h2><p>
|
||||
A skill is a reusable procedure. It can carry instructions, references, scripts, and
|
||||
assets. It is not magical memory, and it does not replace acceptance criteria.
|
||||
<p class="eyebrow">
|
||||
<span data-language-content="en">Skills</span><span data-language-content="pt" hidden
|
||||
>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>
|
||||
</div><div class="skill-explorer">
|
||||
<SkillPackage
|
||||
@@ -421,7 +729,8 @@ const base = import.meta.env.BASE_URL;
|
||||
/><article class="skill-detail" id="skill-detail" aria-live="polite">
|
||||
<span>{skillFiles.skill.icon}</span><div>
|
||||
<strong>{skillFiles.skill.title}</strong><p>{skillFiles.skill.en}</p><small
|
||||
>{labels.skillFileHint.en}</small>
|
||||
>{labels.skillFileHint.en}</small
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
@@ -457,10 +766,12 @@ const base = import.meta.env.BASE_URL;
|
||||
</div><footer>
|
||||
<div>
|
||||
<span>{labels.workflow.artifact.en}</span><strong
|
||||
>{skillWorkflow.observe.output.en}</strong>
|
||||
>{skillWorkflow.observe.output.en}</strong
|
||||
>
|
||||
</div><div>
|
||||
<span>{labels.workflow.proof.en}</span><strong
|
||||
>{skillWorkflow.observe.proof.en}</strong>
|
||||
>{skillWorkflow.observe.proof.en}</strong
|
||||
>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
@@ -469,7 +780,17 @@ const base = import.meta.env.BASE_URL;
|
||||
|
||||
<section class="skill-catalog" id="field-kit">
|
||||
<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 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">
|
||||
<header>
|
||||
<span>{commonSkills.ponytail.number}</span><small
|
||||
>{commonSkills.ponytail.kind.en}</small>
|
||||
<span>{commonSkills.ponytail.number}</span><small>{commonSkills.ponytail.kind.en}</small
|
||||
>
|
||||
</header><h3>{commonSkills.ponytail.title}</h3><blockquote>
|
||||
{commonSkills.ponytail.rule.en}
|
||||
</blockquote><div class="common-skill-notes">
|
||||
@@ -506,13 +827,15 @@ const base = import.meta.env.BASE_URL;
|
||||
class="skill-source"
|
||||
href={commonSkills.ponytail.source}
|
||||
target="_blank"
|
||||
rel="noopener">{labels.commonSkill.source.en}</a>
|
||||
rel="noopener">{labels.commonSkill.source.en}</a
|
||||
>
|
||||
</article>
|
||||
</div><article class="install-skills">
|
||||
<header>
|
||||
<div>
|
||||
<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" />
|
||||
</header><pre><code id="prompt-install-skills">{install.en}</code></pre><footer>
|
||||
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">
|
||||
<a href={`${base}hands-on/starter/`} class="starter-link">Open the starter →</a><a
|
||||
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 class="prompt-compare">
|
||||
@@ -560,8 +884,19 @@ const base = import.meta.env.BASE_URL;
|
||||
</section>
|
||||
|
||||
<aside class="rule">
|
||||
<span>THE HUMAN JOB</span><strong
|
||||
>The agent may be autonomous in execution. Intent, boundaries, and evidence remain yours.</strong>
|
||||
<span
|
||||
><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>
|
||||
<section class="verification" id="verification">
|
||||
<div class="section-label">
|
||||
@@ -584,12 +919,32 @@ const base = import.meta.env.BASE_URL;
|
||||
</section>
|
||||
<section class="sources">
|
||||
<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>
|
||||
Go deeper with official documentation, production case studies, Medium, and practitioner
|
||||
workflows. <a href={`${base}rules/`}>Rules and enforcement case study →</a>
|
||||
<a href={`${base}skills-review/`}>Skills review desk →</a>
|
||||
<a href={`${base}docs/references/additional-reading.md`}>12-part reading path →</a>
|
||||
<span data-language-content="en"
|
||||
>Go deeper with official documentation, production case studies, Medium, and practitioner
|
||||
workflows. <a href={`${base}rules/`}>Rules and enforcement case study →</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>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user