Field Notes

Working patterns from building with AI systems, published as they prove themselves in practice.

Short notes on what works when building with AI agents, from the projects as they happen. The first ones are on their way.

/* No script, no button and no pill: the header sits in the page as the plain bar, every room in the row, and the body keeps its own top padding. */ /* grouped: the same idea, and why this block now names two layouts. Its rooms sit behind the More button, so with no script to open it they have to be a plain second line instead. float needs no equivalent — its bar renders every room already, and its rules below hide .site-more outright. */ :root[data-fx-nav-layout="grouped"] .site-more-button { display: none; } :root[data-fx-nav-layout="grouped"] .site-more .site-more-list { display: flex; position: static; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } :root[data-fx-nav-layout="float"] header.site-header { position: static; width: auto; height: auto; margin: 0 0 2.5rem; padding: 0; flex-wrap: wrap; align-items: baseline; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-fx-nav-layout="float"] body.py-8 { padding-top: 2rem; } :root[data-fx-nav-layout="float"] .site-header .site-nav { flex-wrap: wrap; } :root[data-fx-nav-layout="float"] .site-header .site-nav > a { display: inline; } :root[data-fx-nav-layout="float"] .site-more { display: none; } :root[data-fx-nav-layout="float"] .site-header .site-title, :root[data-fx-nav-layout="float"] .site-header .site-title:has(> span) { max-width: none; opacity: 1; margin-right: 0; visibility: visible; }