feat(haude): skill voor HTML-presentaties in Npuls-huisstijl

[aslamht]

Type of Change

• New feature

Description of Changes

Nieuwe skill haude (HTML + Claude): maakt een presentatie als één zelfstandig HTML-bestand in Npuls/CEDA-huisstijl, als alternatief voor Slidev (clidev) wanneer een deck moet opvallen, Mentimeter nodig heeft of als één bestand gemaild moet worden.

De vormgeving komt uit een vaste frame, afgeleid van het deck "Welk open-source model kan mijn LLM-wiki het beste onderhouden?" van Janna Berkhout (KIS). Claude schrijft alleen de slides.

• assets/frame.html: slide-engine (toetsen, swipe, fullscreen, deeplinks), 11 slide-varianten in toegestane kleurcombinaties, componenten, Mentimeter, print-CSS
• references/components.md: snippet per slidetype + vormtaal
• references/assets.md: de 72 Npuls-illustraties per thema, logo, fonts
• scripts/check.mjs: statische huisstijlcheck (geen hex, geen zwarte achtergrond, logo alleen op roze, ≥3 primaire kleuren, paden, placeholders)
• scripts/qa.mjs: screenshots op 1920×1080 en 1366×768; detecteert overflow, niet-geladen fonts (via het écht gerenderde font), kapotte afbeeldingen en tekst over decoratie; --pdf voor export
• scripts/bundle.mjs: bakt fonts en afbeeldingen in → één deelbaar bestand (~200–400 kB)

haude laadt vormgever-npuls-huisstijl en past die niet aan. Drie bewuste afwijkingen staan expliciet in SKILL.md: echte General Sans/Cooper Light i.p.v. Plus Jakarta Sans, fa-solid i.p.v. sharp (Pro), en HTML-decks via haude i.p.v. clidev.

Related Issues

Closes cedanl/clidev-presentaties#3

Comparison: Before and After

Before:

Een HTML-deck maken betekende _template.html + html-track.md lezen of zelf iets bouwen. In een baselinetest zonder skill bouwde een agent een eigen ontwerp met een zwarte achtergrondslide (tegen de vormgever-regel), het roze logovlak op witte/donkere slides en grijze kaarten.

After:

Met de skill bouwde een verse agent hetzelfde deck (9 slides) op de frame, met echte fonts, logo en drie Npuls-illustraties; check.mjs en qa.mjs slagen. Op het originele LLM-wiki-deck vindt qa.mjs precies de ene echte botsing (ring door de titel op slide 16 bij 1366×768).

Testing Instructions

Vanuit de root van clidev-presentaties (daar staan public/npuls/ en playwright-chromium):

S=<pad naar>/.claude/skills/haude
cp $S/assets/frame.html 261001_test.html   # vul de {{…}}-placeholders in
node $S/scripts/check.mjs 261001_test.html
node $S/scripts/qa.mjs 261001_test.html --pdf
node $S/scripts/bundle.mjs 261001_test.html

Of in Claude Code: /haude met een onderwerp en bronbestand.

Dependencies

Geen nieuwe. qa.mjs gebruikt playwright-chromium uit clidev-presentaties. Font Awesome via cdnjs.

Checklist

• I have tested these changes locally (baseline- en skilltest met subagents, scripts op drie decks)
• I have updated the documentation accordingly
• I have linked this PR to relevant issues

🤖 Generated with Claude Code