diff --git a/index.html b/index.html index f6a8ef1..958bdb3 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@
-
A field guide
/
AI ENGINEERING 01 / 2026
+
A field guide
/
AI ENGINEERING 01 / 2026

A presentation for humans who ship

AI for
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.

01strong model
for ambiguity
03bounded workers
in parallel
iterations
with evidence

Read this as a route map, not a prompt recipe.

RULE ZEROStrong model for ambiguity.
Light model for bounded work.
@@ -27,6 +27,10 @@

The field kit

Different jobs.
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.

ONE PRACTICAL LOADOUT
PLAN unlazy BUILD ponytail-lite DEBUG diagnosing-bugs REPORT caveman
INSTALL PACKAsk your coding agent to verify, install, and validate the skills.
Review every source before installation. Existing local skills must be preserved.

Tiny Tasks lab

Same task.
Better 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.

THE MISSING FEATUREAdd All / Open / Done filters that survive reload and browser navigation.
STACK HTML · CSS · JavaScript DEPENDENCIES none FILES 3
RUN AGood prompt
Clear context · constraints · acceptance · evidence
RUN BGood prompt + skills
Same contract · explicit working methods · stronger proof
COMPARE THE RUNS
01 Files changed
02 New dependencies
03 Checks actually run
04 Evidence returned

+

From confident drift to decisive proof

Three layers.
Run each separately.

Every gate needs its own line, its own exit code, and its own evidence. The matrix below is the deliverable — not opinion, not prose, not "looks done".

01 · STATIC

Shape and types

Format, lint, type-check. Fast and scope-bounded. Run on every save.

pnpm lint; echo "lint=$?" +pnpm typecheck; echo "typecheck=$?"
02 · BEHAVIOR

Deterministic proof

Unit and contract tests. Repeatable. Run before claiming done.

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

Real surface, real load

Drive the actual UI, API, browser. Slow, fragile, decisive. Only this catches mobile overflow and missing 404.

pnpm check:ui; echo "ui=$?" +TURBO_FORCE=true pnpm e2e
FOUR WAYS GREEN 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

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

Static + unit can both be green while the page breaks on mobile or the API never returns 404.

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

diff --git a/responsive.css b/responsive.css index 856aa2c..8906e89 100644 --- a/responsive.css +++ b/responsive.css @@ -53,7 +53,7 @@ button{font-family:inherit} .builder-artifact{display:grid;grid-template-rows:auto 1fr auto;color:var(--paper);background:#0b1b27}.artifact-head{display:flex;justify-content:space-between;padding:17px;border-bottom:1px solid #344c5d;font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-head i{width:8px;height:8px;border-radius:50%;background:#80c69a;box-shadow:0 0 0 4px #80c69a20}.builder-artifact pre{display:grid;align-items:center;margin:0;padding:28px;overflow:auto;color:#bed0dc;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:22px 22px}.builder-artifact pre code{font:12px/1.9 'DM Mono',monospace}.artifact-command{display:grid;gap:9px;padding:18px;border-top:1px solid #344c5d}.artifact-command span{color:var(--gold);font:500 8px 'DM Mono',monospace;letter-spacing:.09em}.artifact-command code{font:10px 'DM Mono',monospace} .builder-loop{display:grid;grid-template-columns:200px 1fr;gap:25px;padding:23px 28px;color:var(--ink);background:var(--gold)}.builder-loop>span{font:700 9px 'DM Mono',monospace;letter-spacing:.09em}.builder-loop>div{font:600 11px 'DM Mono',monospace}.builder-loop i{margin:0 12px;color:var(--accent);font-style:normal}.builder-steps button:focus-visible{position:relative;z-index:2;outline:3px solid var(--gold);outline-offset:-3px} -.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)} +.skill-catalog{margin-bottom:130px;padding-top:80px;border-top:1px solid var(--line)}.verification{padding-top:80px;border-top:1px solid var(--line);margin-bottom:130px}.verify-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.verify-intro h2{margin-bottom:0}.verify-intro>p{max-width:650px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}.verify-layers{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1px;background:var(--line);border:1px solid var(--line)}.verify-layers article{background:var(--paper);padding:24px 22px;display:grid;gap:12px;grid-template-rows:auto auto 1fr auto}.verify-layers article>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--accent)}.verify-layers article h3{margin:0;font-size:18px;letter-spacing:-.02em}.verify-layers article p{margin:0;color:var(--muted);font-size:13px;line-height:1.55}.verify-layers article code{font:10.5px ui-monospace,monospace;color:var(--ink);background:var(--paper);border:1px solid var(--line);padding:10px 12px;white-space:pre-wrap;word-break:break-word;line-height:1.55}.verify-antipatterns{margin-top:55px}.verify-antipatterns>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--muted)}.ap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:14px;background:var(--line);border:1px solid var(--line)}.ap-grid article{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;align-items:start;background:var(--paper);padding:18px 20px}.ap-grid article b{font:500 22px 'DM Mono',monospace;color:var(--accent);line-height:1;align-self:center}.ap-grid article strong{font-size:15px;letter-spacing:-.01em}.ap-grid article p{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.5}.ap-grid article code{font:11px ui-monospace,monospace;color:var(--ink);background:var(--paper);padding:1px 4px;border:1px solid var(--line)}.verify-cta{margin-top:55px;padding:26px 28px;color:var(--paper);background:var(--ink)}.verify-cta>span{font:500 9px 'DM Mono',monospace;letter-spacing:.09em;color:var(--gold)}.verify-cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:18px;background:#ffffff1f}.verify-card{display:grid;gap:6px;background:var(--ink);padding:20px 22px;color:var(--paper);text-decoration:none;border-bottom:2px solid var(--gold)}.verify-card strong{font-size:17px;letter-spacing:-.01em}.verify-card p{margin:0;color:#bfccd4;font-size:13px;line-height:1.55}.verify-card p code{font:11px ui-monospace,monospace;color:var(--gold);background:#0f2230;padding:1px 5px;border:1px solid #2a4150}.verify-card small{font:500 10px 'DM Mono',monospace;color:var(--gold);letter-spacing:.09em}@media(max-width:880px){.verify-layers,.verify-cta-grid{grid-template-columns:1fr}.verify-intro{grid-template-columns:1fr}}@media(max-width:560px){.verify-intro{display:block}.verify-intro>p{margin-top:18px}.ap-grid{grid-template-columns:1fr}.verify-cta{padding:22px 20px}} .catalog-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin:45px 0}.catalog-intro h2{margin-bottom:0}.catalog-intro>p{max-width:620px;margin:0;color:var(--muted);font-size:14px;line-height:1.75} .skill-deck{display:grid;grid-template-columns:minmax(270px,.8fr) minmax(0,1.7fr);min-height:620px;border:1px solid var(--line);background:var(--line)} .skill-index{display:grid;grid-template-rows:repeat(7,1fr);gap:1px;background:var(--line)}