delta-html-documents

name	delta-html-documents
description	Genereer gebrandede HTML-documenten in de huisstijl van Delta Instituut. Gebruik deze skill altijd wanneer de gebruiker vraagt om een HTML-bestand, rapport, analyse, notitie of ander document te genereren dat bedoeld is voor Delta Instituut, het NADI-dossier, of wanneer het duidelijk is dat de output een professioneel gebranded HTML-document moet zijn. Triggers: "geef me dit in html", "maak er een html van", "genereer html", "branded document", "Delta Instituut html", "rapport html", of wanneer markdown/tekst wordt aangeleverd die omgezet moet worden naar een gebranded HTML-document. Gebruik deze skill ook wanneer er eerder in het gesprek een Delta Instituut HTML-document is gegenereerd en de gebruiker aanpassingen vraagt.
model	haiku

Delta Instituut — HTML Document Generator

Genereer professionele, mobiel-geoptimaliseerde HTML-documenten in Delta Instituut huisstijl.

Generatieproces

Gebruik altijd references/generate.js — schrijf nooit zelf de hele HTML uit. Het script combineert skeleton + base-styles + progress-toc + logo, vult placeholders en valideert de delivery-checklist. Generatie duurt ~20ms.

Stappen

1. Schrijf body.md — alleen de article body in markdown: paragrafen, ## Sectie, ### Subkop, - lijst, tabellen met | ... |, inline `code` en [link](url). Geen # h1 (dat komt uit meta.title). Voor callouts of sidenotes: schrijf raw HTML inline (<div class="callout">…</div>). Body kan ook .html zijn als je liever direct HTML schrijft.

2. Schrijf meta.json — minimaal:

   {
     "title": "…",
     "subtitle": "Samenvatting van 2-4 zinnen die de kern van het artikel pakt. Dit is de tekst tussen titel en de meta-streep en fungeert als enige samenvatting — herhaal hem niet in de body.",
     "description": "max 200 tekens",
     "category": "NADI",
     "date": "3 mei 2026",
     "slug": "kebab-case-slug"
   }
   

   subtitle is de samenvatting (2-4 zinnen, geen losse strapline). De body start direct met de eerste ## Sectie of een gewone broodtekst-paragraaf — geen aparte lead-alinea die de samenvatting opnieuw vertelt.

   Optioneel: toc (array van {id, label} — anders auto-afgeleid uit <h2 id="…">), dossierkleur (hex override), sidenotes (array, zie sectie Bronnen), sidenote_col (raw HTML override van de hele rechterkolom).

3. Run het script:

   node skills/delta-html-documents/references/generate.js meta.json body.md --out output.html
   

   In een cowork-sandbox staan plugin-skills onder /sessions/<naam>/mnt/.remote-plugins/plugin_<id>/skills/. Detecteer het pad dynamisch:

   GEN=$(find /sessions/*/mnt/.remote-plugins -path '*delta-html-documents/references/generate.js' 2>/dev/null | head -1)
   node "$GEN" meta.json body.md --out output.html
   

   Het script leidt automatisch af:

   • dossierkleur uit category (NADI → #51724a, Digitale Overheid → #1f4886, AI Deltaplan → #a35378, Inkoop → #965d95, Innovatieve Economie → #5398a3)
   • og:url uit slug (slug zelf wordt afgeleid uit title als hij ontbreekt)
   • <h2 id="..."> voor elke ## Sectie (slug uit kop-tekst)
   • meta.toc uit alle <h2 id="..."> als meta.toc ontbreekt
   • LAYOUT_CLASS="has-sidenotes" als body een <sup class="fn-ref"> bevat (rechterkolom verschijnt automatisch)

4. Validatie: het script controleert automatisch alle 11 delivery-checklist items en faalt met exit-code 2 bij een afwijking. Skip met --no-validate (zelden nodig).

Fonts en gedeelde resources

Skeleton refereert naar /fonts.css (gedeelde site-resource met Merriweather + Lora base64). Niet inline plakken — dat zou elk artikel ~170KB groter maken. De /deploy skill zorgt dat /fonts.css op de site staat.

Voor architecturale achtergrond (kleurtokens, typografie-tabel, componentspecs): references/design-spec.md. Voor een werkend voorbeeld: references/template-example.html.

Wanneer

• Tekst/markdown/rapport omzetten naar gebranded HTML
• Deelbaar document voor WhatsApp, e-mail of web
• Bestaand document in Delta Instituut-stijl opmaken

Kernstructuur

1. Header bar — zwarte balk met gecentreerd woordmerk-SVG (uit references/logo.svg)
2. Drie-kolom layout (desktop >1024px): TOC sidebar + content + sidenote-kolom. Mobiel/tablet: één kolom
3. Artikelkop — h1 + samenvatting (<p class="subtitle">, 2-4 zinnen, primary kleur, 1.18rem) + meta-regel (category tag + auteur + datum, met border-bottom = "de streep"). Body daarna gaat direct over in lopende tekst of de eerste ## Sectie — geen tweede grotere lead-alinea die de samenvatting nogmaals vertelt
4. TOC — desktop: sticky sidebar met progress-track. Mobiel: collapsible drawer met dynamische sectienaam
5. Callouts — linkerborder in dossierkleur, transparante achtergrond
6. Grafieken — HTML-div based (geen SVG), blenden met achtergrond
7. Bronverwijzingen — desktop: sidenote-kolom rechts. Mobiel: bottom-sheet popups
8. Tabellen — desktop: normaal. Mobiel: gestapelde kaarten met data-label attributen
9. Footer — donkere balk met logo + contactgegevens

Grafieken

HTML-div based, geen SVG. Classes uit base-styles.css blenden met de pagina-achtergrond en pakken automatisch var(--c-dossier) op. Schrijf grafieken als raw HTML in body.md (passthrough) — niet als markdown.

Conventies (verplicht)

Alle grafieken volgen het IFP/FT/Upshot redactionele patroon:

1. Titel = bevinding, niet onderwerp. Niet "Onderuitputting Defensie 2015 – 2024" maar "In 2024 bleef 3,3 miljard liggen — bijna een derde van het materieelfonds". De lezer leest één regel en weet de conclusie.
2. Subtitel = methode in 1-2 zinnen. Bron, eenheid, periode, eventueel definitie-keuze. Bijvoorbeeld: "Onderuitputting per jaar, 2015 – 2024, in miljoen euro. Vanaf 2021 betreft het Defensiematerieelbegrotingsfonds."
3. Annotaties zitten in de grafiek. Geen tekst onder de chart die uitlegt wat de balken betekenen — gebruik in-grafiek labels (bar-callout-row voor bars, line-band + line-target voor lijnen).
4. € prefix bij euro-bedragen — in tooltips én bar-values: € 1.200 mln, € 3.303 mln. Geen kale 1.200. Voor approximate waarden: ≈ € 0 of ± € 450 mln (geen tilde).
5. Bron + watermark onderin elke chart-frame. <div class="chart-source"> + <div class="chart-watermark">{{LOGO_SVG}}</div>. De {{LOGO_SVG}}-placeholder wordt door generate.js automatisch ingevuld.
6. Tooltips bevatten alleen data, geen uitleg. Bv. <strong>2024</strong><br>€ 3.303 mln — niet <strong>2024</strong><br>3.303 mln (verviervoudiging tov 2023).

Het chart-frame skeleton

Elke chart zit in een chart-frame — wit kaartje met border + watermark — dat het redactionele anker is:

<div class="chart-frame">
  <div class="chart-title">[Findings-titel — de conclusie in één regel]</div>
  <div class="chart-subtitle">[Methode + eenheid + periode in 1-2 zinnen]</div>
  <!-- chart content (bar-chart / line-chart / heatmap / multiples) -->
  <div class="chart-source">Bron: [Bronvermelding].</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

Backwards-compat: oude <div class="chart"> markup wordt door generate.js automatisch gepromoot naar chart-frame met watermark. Nieuwe artikelen schrijven chart-frame direct.

1. Staafgrafiek (bar-chart)

<div class="chart-frame">
  <div class="chart-title">In 2024 bleef 3,3 miljard liggen — bijna een derde van het materieelfonds</div>
  <div class="chart-subtitle">Onderuitputting Defensie-investeringsbudget, 2015 – 2024, in miljoen euro.</div>
  <div class="bar-chart">
    <div class="bar-row" data-tooltip="<strong>2015</strong><br>€ 207 mln">
      <div class="bar-label">2015</div>
      <div class="bar-track"><div class="bar-fill bar-muted" style="width: 6.3%"></div></div>
      <div class="bar-value">€ 207</div>
    </div>
    <div class="bar-row" data-tooltip="<strong>2024</strong><br>€ 3.303 mln">
      <div class="bar-label">2024</div>
      <div class="bar-track"><div class="bar-fill" style="width: 100%"></div></div>
      <div class="bar-value">€ 3.303</div>
    </div>
    <div class="bar-callout-row">2024 onderuitputting verviervoudigt — bijna 30 % onbesteed.</div>
  </div>
  <div class="chart-source">Bron: Algemene Rekenkamer, Verantwoordingsonderzoek 2024 Defensie+DMF (mei 2026).</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

• bar-fill zonder modifier = dossierkleur (default voor de balk waar het om gaat — vaak de laatste of de uitschieter).
• bar-muted = charcoal + 45 % opacity. Voor context-balken die niet de hoofdfocus zijn (bv. eerdere jaren naast de uitschietende balk).
• bar-callout-row = inline annotatie ónder de bars met gebogen indicator, italic — geen losse uitleg-paragraaf eronder.

2. Gestapelde bar (gerealiseerd vs onbesteed)

<div class="chart-frame">
  <div class="chart-title">Materieel kreeg het grootste budget — en bleef het meeste op de plank liggen</div>
  <div class="chart-subtitle">DMF 2024 per portefeuille: gerealiseerd + onbesteed, in miljoen euro.</div>
  <div class="chart-legend">
    <span class="chart-legend-item" data-series="gerealiseerd"><span class="chart-legend-swatch swatch-primary"></span> Gerealiseerd</span>
    <span class="chart-legend-item" data-series="onbesteed"><span class="chart-legend-swatch swatch-displaced"></span> Onbesteed</span>
  </div>
  <div class="bar-chart">
    <div class="bar-row">
      <div class="bar-label">Materieel</div>
      <div class="bar-track bar-track-stacked">
        <div class="bar-seg bar-fill" data-series="gerealiseerd" data-tooltip="<strong>Materieel · Gerealiseerd</strong><br>€ 3.000 mln" style="width: 66.7%"></div>
        <div class="bar-seg bar-fill bar-displaced" data-series="onbesteed" data-tooltip="<strong>Materieel · Onbesteed</strong><br>€ 1.500 mln" style="width: 33.3%"></div>
      </div>
      <div class="bar-value">€ 3.000 / 1.500</div>
    </div>
  </div>
  <div class="chart-source">Bron: jaarverslag DMF 2024.</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

• bar-track-stacked + meerdere bar-seg.bar-fill = segmenten op één balk. Breedtes percenteren samen tot ≤ 100 %.
• bar-displaced = lichte grijstint voor "verdrongen / niet besteed".
• chart-legend met data-series waarden: hover op legend → alle bijbehorende segmenten worden gehighlight (en omgekeerd). Werkt automatisch via chart-interact.js.
• Tooltip op elke bar-seg = per-segment data ipv hele rij.

3. Heatmap-tabel (matrix-vergelijking)

Voor X categorieën × Y jaren waar je intensiteit wilt tonen — beter dan een saaie tabel met cijfers:

<div class="chart-frame">
  <div class="chart-title">Vier oorzaken keren elk jaar terug — twee versterken elkaar sinds 2022</div>
  <div class="chart-subtitle">Prominentie van vier hoofdverklaringen in DMF-jaarverslagen 2020 – 2024, schaal 1 (zijdelings) tot 5 (kern).</div>
  <table class="heatmap-table">
    <thead>
      <tr><th>Oorzaak</th><th>2020</th><th>2021</th><th>2022</th><th>2023</th><th>2024</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Personeelstekort projectorganisatie</td>
        <td class="heat-1" data-tooltip="<strong>Personeelstekort · 2020</strong><br>1 / 5">1</td>
        <td class="heat-2" data-tooltip="<strong>Personeelstekort · 2021</strong><br>2 / 5">2</td>
        <td class="heat-3" data-tooltip="<strong>Personeelstekort · 2022</strong><br>3 / 5">3</td>
        <td class="heat-4" data-tooltip="<strong>Personeelstekort · 2023</strong><br>4 / 5">4</td>
        <td class="heat-5" data-tooltip="<strong>Personeelstekort · 2024</strong><br>5 / 5">5</td>
      </tr>
    </tbody>
  </table>
  <div class="heatmap-legend">
    <span>minder prominent</span>
    <span class="heatmap-legend-scale">
      <span class="heat-1"></span><span class="heat-2"></span><span class="heat-3"></span>
      <span class="heat-4"></span><span class="heat-5"></span>
    </span>
    <span>dominant</span>
  </div>
  <div class="chart-source">Bron: handmatige tekstanalyse jaarverslagen DMF 2020 – 2024.</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

• heat-1 t/m heat-5 = vijf intensiteits-tinten van de dossierkleur (lichtste → volle).
• data-tooltip op elke cell = kolom + categorie + waarde.
• heatmap-legend onderaan = visuele schaal-uitleg.
• Heatmap-tabellen zijn vrijgesteld van data-label per cell (gestapelde mobiel-presentatie wordt niet gebruikt — de tabel scrollt horizontaal).

4. Small multiples (4 panelen, gedeelde schaal)

Voor categorieën met dezelfde tijdreeks waar je het patroon naast elkaar wilt zien:

<div class="chart-frame">
  <div class="chart-title">Vier portefeuilles, vier patronen</div>
  <div class="chart-subtitle">Onderuitputting per portefeuille, 2020 – 2024, in miljoen euro. Schaal per paneel gelijk.</div>
  <div class="chart-multiples">
    <div class="chart-multiple">
      <div class="chart-multiple-label">Materieel</div>
      <div class="chart-multiple-headline">De grote stapel: groeit elk jaar.</div>
      <div class="bar-chart">
        <div class="bar-row" data-tooltip="<strong>Materieel · 2020</strong><br>€ 100 mln">
          <div class="bar-label">2020</div>
          <div class="bar-track"><div class="bar-fill bar-muted" style="width: 7%"></div></div>
          <div class="bar-value">€ 100</div>
        </div>
        <!-- … 2021 t/m 2024 … -->
      </div>
    </div>
    <!-- … 3 meer chart-multiple panels … -->
  </div>
  <div class="chart-source">Bron: DMF-jaarverslagen 2020 – 2024.</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

• chart-multiples = 4-koloms grid op desktop, 2-koloms op mobiel.
• chart-multiple-label = paneel-titel, chart-multiple-headline = korte één-zin observatie.
• Headlines reserveren altijd 2 regels ruimte zodat alle bars op gelijke hoogte starten, ook als de headline maar 1 regel is.

5. Lijngrafiek met target + band

<div class="chart-frame">
  <div class="chart-title">Met de NAVO-norm in zicht groeide ook het bedrag dat niet werd uitgegeven</div>
  <div class="chart-subtitle">Defensie-uitgaven als % bbp, 2014 – 2025. NAVO-norm 2 % (gestreepte lijn). Gekleurde band = versnellingsperiode 2022 – 2025; 2025 = raming.</div>
  <div class="line-chart">
    <div class="line-axis-y">
      <span>2,2 %</span><span>1,8 %</span><span>1,4 %</span><span>1,0 %</span>
    </div>
    <div class="line-area">
      <div class="line-grid"></div>
      <div class="line-band" style="left: 80%; right: 0;"></div>
      <div class="line-target" style="bottom: 83.3%"><span>NAVO-norm 2 %</span></div>
      <div class="line-points">
        <div class="line-point" style="left: 0%; bottom: 13.3%" data-tooltip="<strong>2014</strong><br>1,16 % bbp"></div>
        <div class="line-point line-point-est" style="left: 100%; bottom: 83.3%" data-tooltip="<strong>2025 (raming)</strong><br>2,00 % bbp"></div>
      </div>
    </div>
    <div class="line-x-axis"><span>2014</span><span>2018</span><span>2022</span><span>2024</span></div>
  </div>
  <div class="chart-source">Bron: Miljoenennota 2025; NAVO Defence Expenditure 2014 – 2024.</div>
  <div class="chart-watermark">{{LOGO_SVG}}</div>
</div>

• line-target met span erin = horizontale gestreepte referentielijn met label boven de lijn (geen overlap met datapunten).
• line-band = zachte verticale tinted band die een deelperiode markeert. Betekenis altijd in subtitel uitleggen, geen in-grafiek band-label (botst op mobiel).
• line-point = realisatie. line-point-est = raming/prognose (gestreepte rand).
• Punten positioneer je met left: NN% (chronologie) en bottom: NN% (waarde, geschaald op de y-as).

Tooltips, hover en series-highlight

Het script chart-interact.js (auto-geïnjecteerd) regelt:

• Hover/tap op [data-tooltip] → tooltip met data verschijnt; mobiel toggle, desktop op-hover, sluit op tap-buiten / scroll / resize. Tooltip-content mag HTML bevatten (<strong>, <br>).
• Hover/click op chart-legend-item[data-series=...] → alle bars met dezelfde data-series worden gehighlight, andere fade naar 10 % opacity. Werkt ook andersom (hover op een bar → bijbehorend legend-item houdt opacity, andere faden).
• Geen JS toevoegen door author — annotaties + interactie werken automatisch zodra je data-tooltip / data-series schrijft.

Bronnen (sidenote-kolom rechts)

Bronnen horen rechts naast de tekst, niet als bronnenlijst onderaan. Het script schakelt automatisch naar de drie-kolom layout (TOC + content + bronnen) zodra de body één of meer <sup class="fn-ref"> bevat. JS positioneert elke bronnoot ter hoogte van zijn referentie en zet ze op mobiel om in een bottom-sheet popup.

Hoe je het schrijft

In body.md, plaats inline een <sup> met klasse fn-ref en een id="ref-N":

Defensie heeft sinds 2022 vijf miljard euro extra per jaar gekregen<sup class="fn-ref" id="ref-1" data-num="1">1</sup>. In 2024 bleef daarvan 3,3 miljard euro liggen<sup class="fn-ref" id="ref-2" data-num="2">2</sup>.

In meta.json, geef de bijbehorende noten als sidenotes-array. Het script bouwt daaruit <aside class="sidenote-col">:

{
  "sidenotes": [
    { "num": 1, "ref": "ref-1", "html": "Voorjaarsnota 2022, p. 14. Vanaf 2022 structureel +5 mld op het Defensiematerieelfonds." },
    { "num": 2, "ref": "ref-2", "html": "Algemene Rekenkamer, <em>Verantwoordingsonderzoek 2024 Defensie</em> (mei 2026), tabel 3.2." }
  ]
}

num matcht data-num op de <sup>. ref matcht het id van de <sup> zodat JS de noot op de juiste hoogte kan plaatsen. html mag inline HTML bevatten (links, em, etc.).

Verboden

• Geen <div class="callout">Bronnen voor dit artikel</div> onderaan het artikel. Bronnen horen in de rechterkolom via fn-ref. De callout-bronnenlijst breekt de drie-kolom layout en duplicate-bronnen ontstaan.
• Geen losse <sup>1</sup> zonder class="fn-ref". Zonder die class triggert de drie-kolom layout niet en blijft de noot in de body hangen.
• Voor chart-attributie gebruik je <div class="chart-source"> binnen de chart-frame (geen fn-ref nodig).

Dossierkleur

Kies de kleur die past bij het onderwerp: NADI #51724a, Digitale Overheid #1f4886, AI Deltaplan #a35378, Inkoop #965d95, Innovatieve Economie #5398a3.

Metadata & OG tags (verplicht)

Auteur: "Onno Eric Blom". Taal: <html lang="nl">.

<meta property="og:title" content="[Titel]">
<meta property="og:description" content="[Max 200 tekens]">
<meta property="og:type" content="article">
<meta property="og:image" content="https://preview.deltainstituut.nl/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://preview.deltainstituut.nl/artikelen/[slug]/">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://preview.deltainstituut.nl/og-image.jpg">

Mobiel-optimalisatie (kritisch — WhatsApp sharing)

• Alle tabellen in <div class="table-wrap"> wrapper
• Viewport meta: width=device-width, initial-scale=1.0
• Body tekst minimaal 0.95rem op mobiel
• Touch targets minimaal 44px
• Breakpoint: 1024px (tablet = mobiele ervaring)

Verboden

• Geen blauwe strepen boven secties
• Geen bold/italic emphasis markers (conform tone of voice)
• Geen progress bar bovenaan scherm op desktop
• Geen cumulatieve TOC-kleuring
• Geen gevulde achtergrond op callouts
• Geen SVG-grafieken
• Geen externe CSS/JS — uitzondering: /fonts.css als gedeelde site-resource (één HTTP-request, browser-cached)
• Geen bronnenlijst onderaan in een callout — bronnen ALTIJD via <sup class="fn-ref"> + meta.sidenotes in de rechterkolom (zie sectie Bronnen)
• Geen tweede grotere lead-alinea bovenaan de body die de subtitle/samenvatting herhaalt — de samenvatting staat één keer, in de subtitle
• Geen euro-bedragen zonder € prefix in tooltips of bar-values (€ 1.200 mln, niet kale 1.200)
• Geen <sup class="fn-ref">…</sup><sup class="fn-ref">…</sup> direct aan elkaar — gebruik één <sup> met komma's (<sup class="fn-ref" id="ref-9" data-num="9">9, 10</sup>) of zet een spatie ertussen
• Geen handmatig <div class="table-wrap"> rond markdown-tabellen — generate.js wrapt automatisch. Dubbele wrap leidt tot orphan </div> in de output
• Geen beschrijvende chart-titels ("Onderuitputting per ministerie") — gebruik findings-titels ("In 2024 lieten EZK, OCW en Defensie samen 2,8 mld liggen")

Delivery-checklist

Loop deze 11 punten door voordat je het document oplevert:

1. <html lang="nl">
2. <meta charset="UTF-8"> aanwezig
3. <meta name="viewport" content="width=device-width, initial-scale=1.0"> aanwezig
4. <meta name="description"> aanwezig en ≤ 200 tekens
5. OG-tags compleet: og:title, og:description, og:type, og:image, og:image:width, og:image:height, og:url
6. <meta name="author" content="Onno Eric Blom"> aanwezig
7. <meta name="robots" content="noindex, nofollow, noarchive, nosnippet"> aanwezig (preview.deltainstituut.nl mag niet geïndexeerd worden)
8. Datum aanwezig in .article-meta regel
9. Logo-SVG inline in zowel header (<header class="site-header">) als footer (<footer class="site-footer">) — geen <img>, geen tekstuele driehoek-fallback
10. Eén externe CSS-link toegestaan: <link rel="stylesheet" href="/fonts.css"> (gedeelde site-resource). references/base-styles.css en references/progress-toc.js zijn inline geplakt; geen andere <link>- of <script src="...">-tags
11. Mobiel breakpoint < 1024px werkt: TOC drawer opent op klik, tabellen worden gestapelde kaarten met data-label-attributen op elke <td>

Na oplevering

Sluit elke generatie af met deze regel aan de gebruiker:

"Wil je dit online zetten op preview.deltainstituut.nl? Roep dan /deploy <bestandsnaam> aan."

Genereer of trigger /deploy niet zelf — laat de gebruiker dat bewust doen. Deploys gaan via een git push naar deltainstituut/preview-content (Netlify deployt automatisch); de gebruiker overschrijft daarmee een artikel met dezelfde slug.