> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://helpdesk.pluvo.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Pluvo cursus vormgeven met AI en MCP koppeling

# 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:

| Stijl | Voelt als... |
| ---- |
| **Warm minimalistisch** | Vriendelijk en toegankelijk. Zachte kleuren, ronde hoeken, milde schaduwen. Goede default voor de meeste e-learning. |
| **Functioneel** | Strak en doelgericht. Elk element verdient zijn plek. Geen versiering — alleen helderheid. Goed voor technische of professionele inhoud. |
| **Typografisch grid** | Stevig en gestructureerd. Sterke koppen, strak grid, plat ontwerp. Maakt dichte informatie georganiseerd en autoritair. |
| **Stille ruimte** | Rustig en ademend. Veel witruimte, gedempte kleuren, fijne lijntjes. Elegant — werkt voor reflectieve of contemplatieve inhoud. |
| **Redactioneel** | Typografie-gedreven. Serif-koppen, citaten, dunne lijnen. Maakt tekst-zware inhoud aanvoelt als een goed vormgegeven artikel. |
| **Decoratief geometrisch** | Statement-stuk. Diepe kleuren, geometrische precisie, decoratieve lijsten. Premium-gevoel voor leiderschapscontent. |
| **Speels grafisch** | Levendig en stoer. Felle kleuren, dikke randen, energieke layout. Leuk voor onboarding, teamcultuur of creatieve vaardigheden. |
| **Rauw structureel** | Onbewerkt en eerlijk. Monospace, harde randen, geen polish. Provocatieve keuze — controleer of de gebruiker dit echt voor leerinhoud wil. |

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`&#32;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:

```html
```

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

| Element | Aanbevolen stijl |
| ---- |
| Grote (full-width) afbeelding | `margin:16px 0 24px 0` |
| Paragraaf na kop | standaard (geen extra nodig) |
| Callout / highlight blok | `margin:20px 0` |
| HR | `margin:30px 0` (default), `40px 0` voor stille stijlen |

---

## 4. Typografie en koppen

### Hiërarchie

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

| Niveau | Gebruik | HTML |
| ---- |
| H2 | Hoofdtitel van een module of groot onderdeel | `<h2>Titel</h2>` |
| H3 | Subsectie binnen een blok | `<h3>Subtitel</h3>` |
| H4 | Kleine tussenkop, label | `<h4>Label</h4>` |
| Bold | Opschrift boven één paragraaf | `<p><strong>Opschrift</strong></p>` |

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:

```html
Kennischeck — Wanneer is een RI&E verplicht?
```

```html
Reflectievraag: Hoe ga jij om met weerstand?
```

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

```html
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)

```html
```

### Groottes per contenttype

| Type afbeelding | Style | Waarom |
| ---- |
| Gewone illustratie naast tekst | `max-height:280px` | Proportioneel, overweldigt tekst niet |
| Infographic / diagram met tekst | `max-width:95%` | Tekst in afbeelding blijft leesbaar |
| Standalone herobeeld | `max-height:400px` | Groot, maar begrensd |
| Thumbnail / icoon | `max-height:120px` | Kleine accentafbeelding |

### Alt-tekst bijschrift (voor losse afbeeldingen)

Voeg altijd een beschrijvend bijschrift toe onder een standalone afbeelding:

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

### Layoutpatronen voor afbeeldingen

**Afbeelding links, tekst rechts:**

```html
TitelBeschrijvende tekst hier.
```

**Tekst links, afbeelding rechts:**

```html
TitelBeschrijvende tekst hier.
```

**Full-width afbeelding (diagram/infographic):**

```html
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:**

```html
💡 TipTekst van de tip hier.
```

**Waarschuwing / let op:**

```html
⚠️ Let opTekst van de waarschuwing hier.
```

**Belangrijk / kritisch:**

```html
🔴 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

| Bestand | Wanneer lezen |
| ---- |
| `references/aesthetiek-stijlen.md` | Bij stap 3 (esthetische richting kiezen) en stap 4 (tokens definiëren). Bevat per stijl: voel-beschrijving, kleurpalet, design tokens, en een visueel HTML-voorbeeld. Ook: default kleurpaletten voor wanneer geen huisstijl beschikbaar is. |

---

## 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