Pluvo Cursus Vormgeving

Deze skill beschrijft hoe je consistente, professioneel ogende content maakt binnen Pluvo's cursusomgeving. Hij dekt twee dingen:

1. Technische opmaakregels die altijd gelden (Pluvo HTML-quirks, ruimte, typografie, afbeeldingen, callouts, structuur).
2. Esthetische richting — een gekozen stijl die de hele cursus visueel bindt (warm minimalistisch, redactioneel, typografisch grid, etc.).

Volg deze richtlijnen wanneer je HTML schrijft voor edit_content_text of edit_content_embed blokken, of wanneer een gebruiker vraagt om een redesign.

1. Werkwijze — Hoe deze skill toegepast wordt

Stap 1: Bepaal de scope

Voordat er ook maar één regel HTML geschreven wordt, helder krijgen:

Hoeveel ga je vormgeven?

• Een enkel content-blok? → vraag om het content_id of een beschrijving van waar het zit
• Een heel chapter? → loop alle content-blokken in dat chapter af
• Een hele cursus? → breng eerst de cursusstructuur in kaart, werk dan chapter voor chapter

Wat staat er nu?

• Lees bestaande content met get_content of get_course_contents_summary
• Inventariseer wat er is: tabellen, callouts, accordions, afbeeldingen, platte tekst
• Identificeer wat werkt en wat de meeste aandacht nodig heeft

Stap 2: Bepaal de kleurbron

Vraag expliciet welke route gevolgd wordt voor kleuren. Drie opties:

Optie A — Huisstijl van de academy

Haal de themakleuren van de Pluvo-cursus op via get_course_theme_colors. Gebruik die als basis (primair, secundair, accent). Vraag of er aanvullende kleuren bekend zijn uit de organisatie-huisstijl (logo-kleuren, brandbook).

Optie B — Eigen kleuren in gedachten

De gebruiker heeft een specifiek palet voor ogen of wil afwijken van de academy-huisstijl. Vraag naar concrete kleuren (hex-codes, een merk waar ze van houden, of een sfeerbeschrijving zoals "warm en aards" of "fris en blauw").

Optie C — Default-palet kiezen

Geen voorkeur of geen huisstijl bekend. Bied dan een keuze uit voorgedefinieerde paletten (zie references/aesthetiek-stijlen.md, sectie Default kleurpaletten).

Stap 3: Kies een esthetische richting

Lees de details: references/aesthetiek-stijlen.md

Presenteer de gebruiker een keuze uit de stijlen. Niet alleen namen — beschrijf hoe het voelt in een leeromgeving:

Als de gebruiker een vibe beschrijft in plaats van een stijl te kiezen ("ik wil het warm maar toch professioneel"), vertaal dat naar de dichtstbijzijnde stijl of een hybride. Leg je interpretatie uit zodat ze kunnen bijsturen.

Stap 4: Definieer de design tokens

Vóór je HTML schrijft, vertaal de gekozen stijl naar concrete waarden. Deze tokens zorgen voor consistentie over alle blokken:

RADIUS         border-radius (uit de stijl)
SHADOW         box-shadow (uit de stijl)
PRIMARY        primaire accentkleur (uit huisstijl of palet)
SECONDARY      secundaire kleur (indien gebruikt)
BG_SUBTLE      lichte achtergrondtint
BG_CARD        achtergrond voor cards/callouts
TEXT_COLOR     primaire tekstkleur
TEXT_MUTED     secundaire tekstkleur
BORDER_COLOR   lijnen en dividers
HEADING_STYLE  font-family, letter-spacing, text-transform voor koppen
BODY_STYLE     font-family, line-height voor body
HR_STYLE       dikte, kleur, marge van horizontale lijnen
TRANSITION     standaard transition-timing (uit de stijl)

Deel deze tokens met de gebruiker vóór je verder gaat: "Dit is de richting die ik aanhoud — voelt dat goed?" Voorkomt herwerk.

Stap 5: Bouw de content op

Werk elk content-blok systematisch door:

1. Lees de huidige content met get_content
2. Bewaar tekst en betekenis — je verandert de visuele opmaak, niet de inhoud (tenzij de gebruiker daar ook om vraagt)
3. Pas de design tokens consistent toe op elk element
4. Verbeter componenten waar de stijl daarom vraagt:

• Platte tekst → gestructureerd met koppen, callouts, citaten
• Eenvoudige lijsten → opgemaakt volgens de stijl
• Basis-tabellen → volledig opgemaakte tabellen met duidelijke kop
• Vlakke secties → interactieve elementen (accordions, flip cards) waar passend

5. Schrijf de HTML volgens alle Pluvo-regels (zie hieronder)
6. Pas toe met edit_content_text

Stap 6: Review en herhaal

Na toepassing: nodig de gebruiker uit voor review.

• "Bekijk [chapter-naam] — voelt de visuele richting goed?"
• "Ik kan de intensiteit aanpassen (meer/minder witruimte, fellere/zachtere kleuren, etc.)"
• "Wil je dat ik dezelfde stijl doorzet naar het volgende chapter?"

2. Pluvo HTML-regels (niet-onderhandelbaar)

Deze regels gelden ongeacht de gekozen stijl. Ze komen voort uit Pluvo's platformlimieten:

1. Alle HTML moet op één regel. Pluvo zet elke \n om in een <br>. Geen newlines, niet in <style>, niet in <script>, nergens.

2. Afbeeldingen moeten gewrapped zijn. Altijd: <section><figure class="figure-image"><img src="URL" style="..."></figure></section>

3. Inline styles worden gewist door de WYSIWYG editor. Waarschuw de gebruiker: "Open dit blok niet in de visuele editor van Pluvo — die strips de custom styling."

4. Scope alle CSS met een uniek ID. Gebruik #redesign-{block-id} .class-name om style-lekkage tussen content-blokken te voorkomen. Elk blok krijgt zijn eigen namespace.

5. Geen custom web fonts. Pluvo ondersteunt geen @import of <link> voor font-loading. Gebruik system font stacks:

• Sans-serif: 'Segoe UI',system-ui,-apple-system,sans-serif
• Serif: Georgia,'Times New Roman',serif
• Monospace: 'Courier New',Consolas,monospace

6. Mobiel-responsief by default. max-width:100% op afbeeldingen, flex-wrap:wrap met min-width:280px op flex-children, overflow-x:auto op tabellen.

7. Touch-friendly. Klikbare elementen minimaal 44px hoog.

8. Accordion animation fix. Bij accordions: gebruik een wrapper-div patroon — buitenste div doet max-height + overflow:hidden transition, binnenste div heeft constante padding. Voorkomt dat tekst springt tijdens animatie. In open-toestand krijgt de header vierkante onderhoeken (border-radius:8px 8px 0 0) zodat hij naadloos overgaat in het content-body.

9. nth-child werkt NIET in Pluvo. Pluvo's DOM voegt <style>, <h2>, <p> en andere elementen als siblings toe, dus nth-child telt die mee en je selectors raken niet wat je bedoelt. Gebruik altijd expliciete classes (bijv. .ac-1, .ac-2, .fc-1, .fc-2) in plaats van nth-child voor gradient- of alternerende styles.

10. Accent-kleuren voor nadruk. Eén primair palet voelt monotoon over een hele cursus. Definieer 2–3 accentkleuren (bijv. rose, amber) naast de primaire voor waarschuwingen, juridische callouts, stap-progressies, en variatie in herhaalde componenten (flip cards, cards). Gebruik accenten met intentie — alleen waar nadruk nodig is.

3. Ruimte en ademruimte

Goede Pluvo-content voelt luchtig. Vuistregels:

HR-dividers

Gebruik HR-dividers consequent als visuele scheidslijn. Standaardformaat:

Bij stillere stijlen mag de marge groter (40px 0 of meer); bij rauwere stijlen mag de lijn dikker en harder zijn. De stijl bepaalt de invulling — de aanwezigheid is de regel.

Wanneer een HR plaatsen:

• Aan het begin én het einde van elk blok dat afbeeldingen bevat
• Tussen twee image+tekst paren
• Tussen een tekstsectie en een vraag
• Tussen twee inhoudelijk verschillende secties
• Vóór een kop die een nieuw onderdeel introduceert (als de kop niet het allereerste element is)

Marges op losse elementen

4. Typografie en koppen

Hiërarchie

Pluvo ondersteunt <h2> t/m <h4> in HTML-blokken. Gebruik consequent en niet te zwaar:

De gekozen stijl bepaalt het lettertype, de letter-spacing en het gewicht — zie references/aesthetiek-stijlen.md.

Kop boven een vraag

Plaats altijd een duidelijke kop boven een vraag- of quizblok. Dit geeft de leerder context en maakt de structuur scanbaar. De kop bevat twee dingen:

1. Het onderwerp van de vraag — waarover gaat het?
2. Het soort vraag — kennischeck, zelftest, sorteervraag, reflectievraag

Gebruik <h3> of <h4> afhankelijk van het gewicht in de cursus. De kop staat in een apart content_text blok direct boven het vraagblok:

Kennischeck — Wanneer is een RI&E verplicht?

Reflectievraag: Hoe ga jij om met weerstand?

Zet nooit een vraag neer zonder introductie of kop. Een enkele zin introductietekst mag ook:

Lees de situatie hieronder en beantwoord de vraag.

Bij een bundeling van vragen (meerdere vragen over hetzelfde onderwerp): zet één overkoepelende kop boven de hele reeks.

5. Afbeeldingen en groottes

Wrapper (verplicht)

Groottes per contenttype

Alt-tekst bijschrift (voor losse afbeeldingen)

Voeg altijd een beschrijvend bijschrift toe onder een standalone afbeelding:

Alt: Beschrijving van wat er op de afbeelding te zien is.

Layoutpatronen voor afbeeldingen

Afbeelding links, tekst rechts:

TitelBeschrijvende tekst hier.

Tekst links, afbeelding rechts:

TitelBeschrijvende tekst hier.

Full-width afbeelding (diagram/infographic):

TitelBeschrijving van wat de afbeelding toont.

Wissel bij meerdere paren de richting af (links/rechts/links) voor visueel ritme.

6. Callouts en highlights

Gebruik callouts om belangrijke informatie te benadrukken zonder een grote afbeelding. Altijd inline styles, single line.

Info / tip:

💡 TipTekst van de tip hier.

Waarschuwing / let op:

⚠️ Let opTekst van de waarschuwing hier.

Belangrijk / kritisch:

🔴 BelangrijkTekst hier.

Deze patronen zijn de default — kleur, radius, en schaduw worden aangepast op basis van de gekozen stijl. Zie references/aesthetiek-stijlen.md voor stijl-specifieke variaties.

Geen paginabrede quote-blokken in cursuscontent. Gebruik in plaats daarvan callouts (zoals hierboven) of stijl-specifieke citaat-componenten uit de aesthetiek-reference.

7. Structuur van een volledig inhoudsblok

Een goed opgebouwd Pluvo-inhoudsblok volgt deze volgorde:

1. HR (aan het begin als er afbeeldingen of callouts volgen)
2. H3 of H4 kop (geeft context voor wat volgt)
3. Introductietekst (1–2 zinnen, optioneel)
4. Inhoud (afbeelding+tekst paren, callouts, of gewone alinea's)
5. HR tussen secties of paren
6. HR aan het einde (als het blok afbeeldingen of callouts bevatte)

Voorbeeld skelet (conceptueel):

[HR] [H3: Sectietitel] [introductietekst] [afbeelding+tekst paar] [HR] [tweede paar] [HR]

8. Anti-patronen

Geen stijl die botst met het leerdoel. Rauw structureel voor compliance training leidt af. Speels grafisch voor medische training ondermijnt geloofwaardigheid. Stuur bij richting passende keuzes.

Niet over-designen. Zelfs de uitbundigste stijl moet leesbaarheid dienen. Maakt een keuze de content moeilijker te lezen of navigeren? Dan is hij fout — hoe esthetisch "correct" ook.

Geen generieke AI-look. Geen paarse gradients op wit, geen voorspelbare card-grids, geen cookie-cutter componentlayouts. Elk resultaat moet aanvoelen alsof het voor díe specifieke context is ontworpen.

Vergeet mobiel niet. Elke designkeuze moet werken op een 375px scherm. Stort je drie-kolomslayout in op mobiel? Dan is het geen goed ontwerp.

9. Checklist vóór opslaan

• [ ] Volledige HTML is één aaneengesloten regel (geen \n)
• [ ] Elke <img> zit in <section><figure class="figure-image">...</figure></section>
• [ ] Afbeeldingen hebben juiste max-height of max-width
• [ ] Flexbox-paren hebben min-width:280px voor mobiel
• [ ] HR-dividers gebruiken juiste marge (default 30px 0)
• [ ] Blokken met afbeeldingen starten en eindigen met een HR
• [ ] Vragen hebben een kop of introductiezin
• [ ] Losse afbeeldingen hebben een alt-tekst bijschrift
• [ ] CSS gescoped met uniek block-id (geen lekkage)
• [ ] Geen nth-child selectors gebruikt
• [ ] Niets ziet er krap uit — genoeg ademruimte
• [ ] Touch-doelen minimaal 44px hoog
• [ ] Gebruiker gewaarschuwd dat WYSIWYG editor de custom HTML kapotmaakt

10. Aanvullende referenties

Changelog

1.0.0 — Eerste publieke versie. Samenvoeging van technische opmaakregels en esthetische richting in één skill. Acht stijlen (warm minimalistisch, functioneel, typografisch grid, stille ruimte, redactioneel, decoratief geometrisch, speels grafisch, rauw structureel) inclusief tokens en visuele voorbeelden. Defaultpaletten voor wanneer geen huisstijl beschikbaar is.Opus 4.7

Bijgewerkt op: 06/05/2026