Agent writing spec — static-asset-fingerprinting.com (expansion phase)

You are writing/upgrading deep-technical reference pages for an engineering site about static asset fingerprinting, content hashing, CDN cache invalidation, and deployment workflows. Audience: frontend engineers, DevOps, release engineers who land to copy configs and debug live incidents.

Read this whole file before writing. Match it exactly — output is validated by automated QA.

1. How the build works (so you author correctly)

2. Hard rules (QA-enforced — violations fail the build)

  1. No internal IA/SEO vocabulary in visible prose. Never write the words pillar, cluster, long-tail, hub and spoke, supporting page, pillar content, content silo, internal linking strategy. (A literal Kafka/DB/server “cluster” is fine; the IA sense is banned.) Refer to pages by their topic (“the Vite configuration guide”, “the cache-key reference”), never their IA role.
  2. No links to external sites. Only internal links (paths starting with /). No https:// links in prose.
  3. All code must be complete and runnable — no ... / ellipsis placeholders. Prefer Webpack 5, Vite 5, Rollup 4, esbuild 0.20+, Next 14, Astro 4 syntax. CDN examples cover Cloudflare + Nginx; note AWS CloudFront where relevant.
  4. Hash length defaults to 8 hex chars in examples, with a note that 12–16 is for monorepos/thousands of chunks.
  5. Every page ends with a ## Related block — 3–5 internal links labelled by the destination’s key concept (not raw title), plus an explicit up-link to the parent page.
  6. Interlinking: weave 3–5 inline contextual links into the prose at the first mention of a named concept that has its own page (see URL map §5). E.g. embeds a [content hash](/static-asset-fingerprinting-fundamentals/content-hashing-vs-semantic-versioning/) into the filename.
  7. One custom inline SVG diagram per page (see §4).

3. Tone & format

4. Custom SVG diagram (one per page)

Author ONE original inline SVG that explains the hardest concept on the page (data-flow, sequence, state machine, comparison matrix, pipeline stages, timeline). Wrap it exactly like this:

<figure class="diagram">
<svg viewBox="0 0 760 320" role="img" aria-label="Short description of the diagram" xmlns="http://www.w3.org/2000/svg">
  <title>Short title</title>
  <desc>Longer description of what the diagram shows.</desc>
  ... shapes ...
</svg>
<figcaption>One-line caption explaining the diagram.</figcaption>
</figure>

SVG rules (QA renders these headless with the real stylesheet — they must not break):

Design palette (hex)

Reference SVG (a pipeline diagram — adapt colours/labels per page, don’t copy verbatim)

<figure class="diagram">
<svg viewBox="0 0 760 220" role="img" aria-label="Build to edge asset fingerprinting pipeline" xmlns="http://www.w3.org/2000/svg">
  <title>Fingerprint pipeline</title>
  <desc>Source files are hashed at build time, written to a manifest, deployed to the CDN, and served immutably from the edge.</desc>
  <defs>
    <marker id="arrowHead" markerWidth="9" markerHeight="9" refX="7" refY="4.5" orient="auto">
      <path d="M0,0 L9,4.5 L0,9 Z" fill="#94a3b8"/>
    </marker>
  </defs>
  <rect x="16" y="70" width="150" height="80" rx="8" fill="#f1f5f9" stroke="#6366f1" stroke-width="1.5"/>
  <text x="91" y="104" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="600" fill="#0f172a">Build</text>
  <text x="91" y="124" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">hash + rename</text>
  <line x1="166" y1="110" x2="210" y2="110" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowHead)"/>
  <rect x="212" y="70" width="150" height="80" rx="8" fill="#f1f5f9" stroke="#8b5cf6" stroke-width="1.5"/>
  <text x="287" y="104" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="600" fill="#0f172a">Manifest</text>
  <text x="287" y="124" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">map → hashed URL</text>
  <line x1="362" y1="110" x2="406" y2="110" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowHead)"/>
  <rect x="408" y="70" width="150" height="80" rx="8" fill="#f1f5f9" stroke="#06b6d4" stroke-width="1.5"/>
  <text x="483" y="104" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="600" fill="#0f172a">Deploy</text>
  <text x="483" y="124" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">atomic sync</text>
  <line x1="558" y1="110" x2="602" y2="110" stroke="#94a3b8" stroke-width="2" marker-end="url(#arrowHead)"/>
  <rect x="604" y="70" width="150" height="80" rx="8" fill="#f1f5f9" stroke="#10b981" stroke-width="1.5"/>
  <text x="679" y="104" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="14" font-weight="600" fill="#0f172a">Edge</text>
  <text x="679" y="124" text-anchor="middle" font-family="Inter, system-ui, sans-serif" font-size="11" fill="#64748b">immutable cache</text>
</svg>
<figcaption>The fingerprint lifecycle: hash at build, record in a manifest, deploy atomically, serve immutably from the edge.</figcaption>
</figure>

5. Page anatomy by type

Pillar (~4500 words)

H1 + 2-sentence scope → concept overview → SVG overview diagram + comparison table → 2–3 annotated config code blocks → build-pipeline/CI integration → CDN & edge behavior (TTL, immutable) → verification workflow (sha256sum diffs, curl header inspection) → failure modes & gotchas → pre-deploy checklist (- [ ]) → FAQ accordion (4–6 Qs) → ## Related (3–5 links incl. sibling pillars).

Cluster (~3500 words)

H1 + 1-sentence problem statement → “When to use” decision matrix/bullets vs nearest alternative → prerequisites (exact versions/flags) → config reference table (key, type, default, effect) → step-by-step numbered implementation with full runnable code → SVG diagram → verification shell commands → edge cases & known issues → performance impact → FAQ (3–4 Qs) → ## Related (up-link to parent pillar + 2–4 siblings).

Long-tail (~2000 words)

H1 + symptom/decision framing → diagnosis/concept clarification (exact header values/flags/outputs) → side-by-side comparison table or decision matrix → SVG diagram → 1–2 focused runnable code blocks → one targeted verification command (shell or DevTools) → “When to reconsider” (when the opposite choice wins) → ## Related (up-link to parent cluster + 2–3 adjacent pages).

6. Complete URL map (use these exact paths for interlinking)

Parent up-links: long-tail → its cluster; cluster → its pillar; pillars cross-link where topics overlap.

Fundamentals pillar — /static-asset-fingerprinting-fundamentals/

Build tools pillar — /build-tool-framework-asset-pipeline-integration/

CDN purge strategies pillar — /cdn-purge-strategies/ [NEW pillar]