Why This Page Exists
Anyone can prompt a model into one good-looking page. The hard part — the part worth showing — is doing it repeatably, safely, and at scale: dozens of pages held to the same accuracy and accessibility bar, with the rules written down, enforced, and auditable. That's an engineering problem, not a prompting trick.
The interesting artifact isn't any single cheatsheet. It's the pipeline that makes the next one cheap, consistent, and trustworthy.
A repeatable process
Each page runs through the same Generation Protocol — research, outline to three depths, fill to a density floor, then self-verify. The quality comes from the spec, not from a lucky prompt.
Governed, not vibes
The agent has wide latitude to write, but a written acceptance standard and a human reviewer stand between its output and main. Autonomy is bounded by design.
Fully auditable
Every change is a commit. The full history — messages, diffs, per-file revisions — is rendered straight from git on the change-history page. Nothing is hidden.
The Generation Pipeline
A new reference moves through a fixed sequence. The first four steps are the agent's; the last two are the gate. No page reaches main without clearing all six.
main as one commit bundling the page and its preview image.Pages are generated with Claude Code running Claude Opus 4.8 at high reasoning effort. The spec is explicit that comprehensiveness comes from the standard, not from cranking the effort dial — if a draft is thin, the fix is to apply the standard harder, not to spend more tokens.
The Spec: AGENTS.md as Acceptance Criteria
The pipeline's center of gravity is a single checked-in file, AGENTS.md. It's deliberately cross-agent: CLAUDE.md and .github/copilot-instructions.md both point back to it, so Claude Code, Codex, and Cursor build to one standard instead of three divergent house styles. Its rules are treated as binding acceptance criteria — a page that violates them is not done, regardless of polish.
| What the spec enforces | The concrete rule |
|---|---|
| Coverage contract | Every topic covered at three depths — fundamentals, working knowledge, edge/advanced. No section ships hollow. |
| Atomic entry rule | Every entry needs a one-line definition, at least one concrete example with realistic values, and a gotcha where applicable. No foo/bar. |
| Density floor | Typically 20+ substantive entries per page; any section under ~3 entries is folded or expanded. Thinness is a defect. |
| Accuracy gate | Every version, price, limit, or benchmark verified against a primary source — "verify, don't recall." Fabricated specifics fail the gate. |
| Freshness | Volatile facts dated inline; a visible Last verified: YYYY-MM-DD line; JSON-LD dateModified must be the real edit date. |
| Structured-data honesty | JSON-LD must match the visible content — never describe in schema what isn't on the page. |
| Platform baseline | Pinned Bootstrap with SRI, deferred JS, native <details>, light-dark() theming, @layer cascade, WCAG 2.2 AA, Core Web Vitals targets. |
The same file also carries the Build & Verify Workflow — concrete steps from past builds (compute SRI from real CDN bytes, serve and confirm Bootstrap actually loaded, generate the preview at 1200×630) that make a page correct on the first pass instead of after a round of review comments.
The Governance Model
"Governed" means specific, checkable things — not a vibe. The agent writes; four mechanisms bound what it can ship and keep the result accountable after the fact.
A merge gate that isn't the agent
The Testing Checklist (comprehensiveness, accuracy, platform, accessibility) plus a human reviewer sit between generated output and main. The model proposes; a person merges. The gate produces a report, never the final verdict.
A public, immutable audit trail
Every page is shipped as a version-controlled commit with a descriptive message and an authorship trailer. The change-history page renders the entire git log — commits, diffs, and per-file revisions — read-only, straight from the repository.
Supply-chain integrity by default
Every CDN <link>/<script> carries a sha384 Subresource Integrity hash plus crossorigin. Hashes are computed from the real CDN bytes and pinned in a table in CLAUDE.md; a tampered or swapped asset simply won't execute.
The agent in the loop
A GitHub Actions workflow (claude.yml) wires the same agent into the repo: an @claude mention on an issue or pull-request review invokes Claude Code in CI — so the system that authors pages can also participate in their review.
This site is a concrete instance of a broader pattern: turning ad-hoc AI use into a reviewed, versioned capability with declared safety posture. That pattern is written up in detail in Governing Agentic AI: A Field Guide — the substrate-not-the-agent bet, the Golden Rule, four safety invariants, and a reviewed-skill lifecycle.
Deliberate Tech Choices
Every platform decision here is a trade made on purpose. Expand each for the rationale — what it buys, and what it deliberately gives up.
Bootstrap 5.3.8, pinned, with Subresource Integrity
An exact version (5.3.8) is pinned across every page for visual consistency, and Bootstrap 6 is explicitly not targeted until it's stable. Each CDN tag carries an integrity hash and crossorigin; JS loads with defer.
- Why: a known-good, cached framework gives 80+ pages a shared look without a component build. SRI turns the CDN from a trust dependency into a verified one.
- Trade-off: bumping a version means recomputing the hash from the real bytes and updating the pin table — friction that's intentional, because a silent version drift is exactly what SRI is there to catch.
Native light-dark() theming
Light and dark are expressed with the CSS light-dark() function plus color-scheme, honoring prefers-color-scheme automatically, with an optional manual override via [data-theme] and a tiny pre-paint script to avoid a flash.
- Why: one set of design tokens drives both themes — no hand-maintained dual stylesheet to drift out of sync.
- Trade-off: relies on a modern baseline, which is fine for a 2026 audience and removes a whole class of theming bugs.
Native <details> for collapsibles
Accordions and task cards use the native <details>/<summary> element (with name for exclusive groups) instead of a JS collapse component.
- Why: zero JavaScript, accessible by default, and it satisfies the "works without JS" requirement for free — the content is visible and expandable even with scripting off, and expands fully for printing.
- Trade-off: less animation control than a JS widget — an acceptable price for robustness and accessibility.
JSON-LD structured data on every page
Each page ships TechArticle JSON-LD whose fields must match the visible content. No FAQPage/HowTo schema is bolted on to chase deprecated rich results.
- Why: AI answer engines and classic crawlers both read clean structured data; honest schema is the durable lever, not a markup trick.
- Trade-off: the schema has to be maintained alongside the content — enforced by the rule that structured data can't claim what the page doesn't show.
No build step — standalone static HTML
Each cheatsheet is a single self-contained HTML file with embedded CSS and JS. A small amount of PHP (index.php, sitemap.php, history.php) auto-discovers files and renders the gallery, sitemap, and git history at request time.
- Why: nothing to compile, bundle, or babysit; any static host serves it, and a page opened directly in a browser still works. Adding a cheatsheet is dropping in one file (plus one line in the category map).
- Trade-off: some markup repeats across files instead of living in shared components — accepted in exchange for zero build complexity and maximum portability.
CSS @layer, container queries, and reduced-motion gating
Custom CSS is wrapped in @layer so it sits cleanly above Bootstrap without !important wars; the card grid uses CSS Grid; all motion is gated behind @media (prefers-reduced-motion).
- Why: predictable cascade, responsive-by-container layout, and motion that respects user preference — modern platform features doing work that used to need JavaScript or specificity hacks.
- Trade-off: none worth noting at the 2026 baseline; these are strictly-better swaps.
What This Demonstrates
Read as a credential, the relevant skills are visible in the artifact itself, not just claimed.
Scale with consistency
80+ pages spanning AI safety, software, finance, security, and more — all holding the same accuracy, accessibility, and metadata bar because the bar is written down and enforced.
Agentic-AI architecture
Designing the spec, the gate, and the audit trail that let an AI agent do real work safely — the substrate, not just the prompt.
Information design
Turning dense, version-sensitive material into scannable, self-contained references that a practitioner can actually work from.
Get new references & build notes
Occasional email when a new reference ships or the pipeline changes. No spam, no tracking, unsubscribe anytime.