菜单
Activeer bij het samenstellen van NDD Storybook web components tot pagina's en layouts — beschrijft de verplichte component-hiërarchie, nesting-regels en beschikbare layout-patronen
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Generates machine_readable execution logic for Dutch law YAML files through an iterative generate-validate-test loop. Creates machine_readable sections, validates against the schema, runs BDD tests, and iterates until correct (up to 3 iterations). Use this skill proactively when: editing or creating machine_readable sections in law YAML files, working with corpus regulation files, or when user mentions 'generate', 'machine_readable', or wants to make a law executable. Activate automatically when user discusses law YAML files that need executable logic.
Writing rules for the regelrecht docs site (docs/). Use when writing or editing prose under docs/ — RFCs, guides, component docs, concept pages, and the NL/EN landing copy. Keeps docs prose free of AI-generated tells and consistent with the site's government-technical register. Not for code, commit messages, or PR descriptions.
Genereert uit een (semi-)gevalideerd regelrecht-corpus een geloofwaardige service-PoC (burger- + behandelaar-portaal, of een headless beslis-service) en zet die in als validatie-instrument met uitvoeringsexperts — om tastbaar te maken wat nodig is om een wet rechtvaardig in de praktijk te brengen, gezien vanuit de betrokkene. Gebruik dit als workshop-fase ná de logica-/scenariovalidatie (audit-products) om de dienstverlening-kant te valideren: welke service impliceert de wet, waar zit menselijk oordeel, welke last ligt bij de burger, welke termijnen, waar is de wet hard of onduidelijk. Dossier-agnostisch; de regelrecht-methode (hooks, legal_character, untranslatables, source/implements, type_spec, receipts) is de vaste taal. Voor de logica-/scenariovalidatie zelf: zie de zusterskill regelrecht-audit-products.
Audits whether a machine-readable regelrecht law model is faithful to the LETTER of the wettekst — and strictly separates the wettekst (leading) from the toelichting (Nota/Memorie van Toelichting; explanatory, not a norm). Runs in critical passes per article/lid and detects four deviation classes: toelichting-bleed (a modeled criterion that the letter only states as an open norm, or not at all), missing verbatim elements (a word/condition such as a "tenzij" or a qualifier dropped from the model), wrong legal_basis anchoring (an endpoint hung on a "kapstok"-article while the operative norm lives elsewhere), and verbatim-drift in text: (an ingetrokken/older redaction). Also detects positief-lid vs uitsluitings-lid conflicts and checks the chapeau for an explicit derogation rule ("zo nodig in afwijking van het eerste lid") before judging precedence. Classifies every finding as modelfout (fix), wettekst-gevolg (report, do not fix), or letter-vs-toelichting-question (jurist decides what is leading + revision signa
Performs a hallucination check on machine_readable sections by verifying every element traces back to the original legal text. Use this skill proactively when: machine_readable sections have been generated or modified, after /law-generate completes, when reviewing corpus YAML files for legal accuracy, or when user mentions "validate", "verify", or "hallucination check" for law YAML files. Activate automatically after editing machine_readable sections in corpus regulation YAML files.
Detects version drift between machine-readable law YAML files and the binding geldende wettekst on wetten.overheid.nl at the YAML's claimed valid_from. Catches the silent failure where authored content lags behind ingevoerde wijzigingen — a YAML dated 2025-01-01 still carrying pre-Stb.-X text. Activate as Step 0 of every regelrecht-stelselanalyse micro-cycle, before any YAML edit. Strict by design: no bypass, no normalization beyond whitespace within a single paragraph; the geldende wettekst is leading and is mirrored verbatim, including errata. Use proactively when starting a stelselanalyse cycle, before harvest/migrate/extend, or when user mentions "drift", "versie", "geldende tekst", or worries that a YAML may be stale relative to wetten.overheid.nl.
| name | storybook-component-hierarchy |
| description | Activeer bij het samenstellen van NDD Storybook web components tot pagina's en layouts — beschrijft de verplichte component-hiërarchie, nesting-regels en beschikbare layout-patronen |
| user-invocable | true |
| argument-hint | <layout-type> |
Gebruik deze skill wanneer je NDD Storybook web components gaat samenstellen tot pagina's, views of layouts. Hij beschrijft welke componenten in welke volgorde genest moeten worden.
Context: $ARGUMENTS
Elke NDD applicatie volgt een vaste hiërarchie van layout-componenten. De buitenste laag is altijd ndd-app-view, de binnenste laag bevat content-componenten.
ndd-app-view ← verplichte root
└── Split View ← layout keuze (kan genest worden)
└── Split View Pane ← paneel binnen split view
└── ndd-page OF ndd-container ← page voor scrollbare content, container voor simpele content
├── ndd-container slot="header" ← navigatie, titelbalk (altijd in container)
├── Page sections ← content layout
│ └── Content-componenten ← tekst, lijsten, formulieren
└── ndd-container slot="footer" ← footer content (altijd in container)
ndd-app-view ← verplichte root
└── ndd-page ← enkele pagina
├── ndd-container slot="header" ← navigatie, titelbalk (altijd in container)
├── Page sections ← content layout
│ └── Content-componenten ← tekst, lijsten, formulieren
└── ndd-container slot="footer" ← footer content (altijd in container)
Let op: Split views kunnen genest worden. Bijvoorbeeld een ndd-navigation-split-view in het main-slot van een ndd-bar-split-view.
<ndd-app-view background="default|tinted">
<!-- Eén split view OF één ndd-page -->
</ndd-app-view>
| Attribuut | Waarden | Beschrijving |
|---|---|---|
background | default, tinted | Cascade van --context-parent-background-color naar alle afstammelingen |
Regel: ndd-app-view is altijd de root. Bevat exact één direct child: een split view of een ndd-page.
Kies één layout-type op basis van de applicatie:
Vier-koloms layout met sidebar, secundaire sidebar, main content en inspector. Panelen verschijnen automatisch wanneer content geslot wordt. Elk slot bevat een ndd-split-view-pane, die op zijn beurt een ndd-page of ndd-container bevat.
<ndd-navigation-split-view>
<ndd-split-view-pane slot="sidebar">
<ndd-page>...</ndd-page>
</ndd-split-view-pane>
<ndd-split-view-pane slot="secondary-sidebar">
<ndd-page>...</ndd-page>
</ndd-split-view-pane>
<ndd-split-view-pane slot="main">
<ndd-page>...</ndd-page>
</ndd-split-view-pane>
<ndd-split-view-pane slot="inspector">
<ndd-page>...</ndd-page>
</ndd-split-view-pane>
</ndd-navigation-split-view>
Split views kunnen genest worden. Bijvoorbeeld een ndd-bar-split-view in het main-slot van een ndd-navigation-split-view.
| Slot | Beschrijving | Verplicht |
|---|---|---|
sidebar | Primaire navigatie (links) | Nee, maar typisch aanwezig |
secondary-sidebar | Subnavigatie (tweede kolom) | Nee |
main | Primaire inhoud | Ja |
inspector | Details/eigenschappen (rechts) | Nee |
Responsief gedrag: Panelen die niet passen worden automatisch verborgen en beschikbaar als sheet (overlay).
| Attribuut | Beschrijving |
|---|---|
inspector-as-sheet | Inspector altijd als sheet tonen |
sidebar-as-sheet | Sidebar altijd als sheet, main op volle breedte |
inspector-accessible-label | Toegankelijke naam voor inspector sheet |
sidebar-accessible-label | Toegankelijke naam voor sidebar sheet |
Methoden: showInspectorSheet(), hideInspectorSheet(), showSidebarSheet(), hideSidebarSheet()
Verticale layout met een main-gebied en onbeperkt aantal bars (toolbars, statusbalken). Bars kunnen per breakpoint geordend worden.
<ndd-bar-split-view>
<ndd-container slot="toolbar" sm-order="1" md-order="1">...</ndd-container>
<ndd-page slot="main" sm-order="2" md-order="2">...</ndd-page>
<ndd-container slot="status-bar" sm-order="3" md-order="3">...</ndd-container>
</ndd-bar-split-view>
Bars bevatten typisch een ndd-container (voor eenvoudige toolbars/statusbalken), het main-slot bevat een ndd-page.
| Attribuut (op children) | Beschrijving |
|---|---|
sm-order, md-order, lg-order | Volgorde per breakpoint |
above="sm|md|lg" | Toon vanaf dit breakpoint en groter |
below="sm|md|lg" | Toon tot en met dit breakpoint |
only="sm|md|lg" | Toon alleen op dit breakpoint |
Responsief gedrag: Op sm-viewports overlappen bars de main area. Bars vóór main stapelen top-to-bottom, bars ná main stapelen bottom-to-top.
Horizontale gelijke panelen naast elkaar. Panelen die niet passen worden automatisch verborgen.
<ndd-side-by-side-split-view panes="3">
<ndd-page slot="pane-1">...</ndd-page>
<ndd-page slot="pane-2">...</ndd-page>
<ndd-page slot="pane-3">...</ndd-page>
</ndd-side-by-side-split-view>
Verticale gelijke panelen gestapeld. Panelen die niet passen worden automatisch verborgen.
<ndd-stacked-split-view panes="2">
<ndd-page slot="pane-1">...</ndd-page>
<ndd-page slot="pane-2">...</ndd-page>
</ndd-stacked-split-view>
Voor eenvoudige pagina's zonder navigatiepanelen.
<ndd-app-view>
<ndd-page sticky-header>...</ndd-page>
</ndd-app-view>
Elk paneel in een split view bevat een ndd-page. Een page biedt scrollgedrag, optionele sticky header en footer.
<ndd-page sticky-header sticky-footer background="inherit|default|tinted">
<ndd-container slot="header" padding="16">
<!-- Navigatiebalk of titelbalk — altijd in een container -->
</ndd-container>
<!-- Page sections met content -->
<ndd-simple-section>...</ndd-simple-section>
<ndd-container slot="footer" padding="16">
<!-- Footer content — altijd in een container -->
</ndd-container>
</ndd-page>
Regel: Header en footer content staan altijd in een ndd-container om items de juiste ruimte te geven.
| Attribuut | Beschrijving |
|---|---|
sticky-header | Header blijft bovenaan bij scrollen |
sticky-footer | Footer blijft onderaan |
background | inherit (van parent), default (wit), tinted (grijs) |
| Slot | Beschrijving |
|---|---|
header | Navigatie, titelbalk (optioneel sticky) |
| default | Scrollbare content (secties) |
footer | Footer content (optioneel sticky) |
De hoofdnavigatiebalk met logo, titel, menu en utility-items. Typisch in de header van de sidebar of bovenste page.
<ndd-top-navigation-bar
title="Mijn Applicatie"
container="md"
logo-has-wordmark
logo-title="Rijksoverheid"
>
</ndd-top-navigation-bar>
| Attribuut | Beschrijving |
|---|---|
title | Paginatitel |
container | sm, md, lg |
no-logo, no-title, no-menu | Verberg onderdelen |
has-back-button, back-href, back-text | Terugknop |
logo-has-wordmark, logo-title, logo-subtitle | Logo met tekst |
utility-no-language-switch, utility-no-search, utility-no-account | Verberg utility items |
Titelbalk voor panelen met optionele terugknop en toolbar. Wanneer er een anchor-titel in de content staat (collapse-anchor), schakelt de title bar automatisch van default naar compact zodra dat element de bovenkant van de scroll-container bereikt.
<ndd-top-title-bar
text="Documenttitel"
supporting-text="Ondertitel"
back-text="Terug naar overzicht"
collapse-anchor="content-heading"
>
<ndd-icon-button slot="toolbar" icon="edit"></ndd-icon-button>
</ndd-top-title-bar>
| Attribuut | Beschrijving |
|---|---|
text | Titel |
supporting-text | Ondertitel |
back-text, back-href | Terugknop |
dismiss-text | Sluitknop |
collapse-anchor | ID van element dat compact-modus triggert bij scrollen |
| Slot | Beschrijving |
|---|---|
toolbar | Actieknoppen naast de sluitknop |
<ndd-tab-bar navigation responsive accessible-label="Hoofdnavigatie">
<ndd-tab-bar-item text="Overzicht" href="/overzicht" selected>
<ndd-icon slot="icon" name="home"></ndd-icon>
</ndd-tab-bar-item>
<ndd-tab-bar-item text="Instellingen" href="/instellingen">
<ndd-icon slot="icon" name="settings"></ndd-icon>
</ndd-tab-bar-item>
</ndd-tab-bar>
| Attribuut | Beschrijving |
|---|---|
navigation | Rendert als <nav> in plaats van tablist (voor route-navigatie) |
responsive | Automatisch compact onder 480px |
full-width | Volle breedte |
compact | Altijd icon boven tekst |
variant | icon-and-text, text, icon |
<ndd-menu-bar has-overflow-menu>
<ndd-menu-bar-item selected>Wetten</ndd-menu-bar-item>
<ndd-menu-bar-item>Regelingen</ndd-menu-bar-item>
<ndd-menu-bar-item>Besluiten</ndd-menu-bar-item>
</ndd-menu-bar>
| Attribuut | Beschrijving |
|---|---|
has-overflow-menu | Automatische overflow-knop bij beperkte ruimte |
size | s, m, l |
<ndd-document-tab-bar accessible-label="Open documenten">
<ndd-document-tab-bar-item text="Document 1" selected></ndd-document-tab-bar-item>
<ndd-document-tab-bar-item text="Document 2"></ndd-document-tab-bar-item>
<ndd-icon-button slot="end" icon="plus"></ndd-icon-button>
</ndd-document-tab-bar>
Page sections organiseren content binnen een page. Ze bieden responsieve padding en gap via container queries.
| Component | Layout | Beschrijving |
|---|---|---|
ndd-simple-section | Enkele kolom | Basis sectie met header/footer slots |
ndd-full-bleed-section | Volle breedte | Zonder horizontale padding (achtergrondkleuren, afbeeldingen) |
ndd-one-third-two-thirds-section | 1/3 + 2/3 | Sidebar links, content rechts |
ndd-two-thirds-one-third-section | 2/3 + 1/3 | Content links, sidebar rechts |
ndd-one-half-one-half-section | 1/2 + 1/2 | Twee gelijke kolommen |
<ndd-simple-section>
<ndd-rich-text slot="header"><h2>Titel</h2></ndd-rich-text>
<ndd-rich-text>
<p>Inhoud van de sectie.</p>
</ndd-rich-text>
<ndd-rich-text slot="footer"><p>Voetnoot</p></ndd-rich-text>
</ndd-simple-section>
<ndd-one-third-two-thirds-section>
<ndd-rich-text slot="header"><h2>Titel</h2></ndd-rich-text>
<ndd-rich-text slot="left">
<p>Zijbalk content</p>
</ndd-rich-text>
<ndd-rich-text>
<p>Hoofdinhoud (2/3 breedte)</p>
</ndd-rich-text>
</ndd-one-third-two-thirds-section>
Responsief: Kolommen wrappen automatisch wanneer ze smaller worden dan 280px.
Binnen secties gebruik je content- en interactiecomponenten:
| Categorie | Componenten | Beschrijving |
|---|---|---|
| Content | ndd-rich-text, ndd-title, ndd-icon, ndd-tooltip | Tekst en visuele content |
| Actions | ndd-button, ndd-icon-button, ndd-toolbar | Knoppen en acties |
| Inputs | ndd-text-field, ndd-dropdown, ndd-checkbox, ndd-radio-button, ndd-switch | Formulier-invoer |
| Forms | ndd-form-field | Formulierveld wrapper met label en foutmelding |
| Lists | ndd-list, ndd-menu, ndd-cell | Lijsten en menu's |
| Feedback | ndd-dialog, ndd-modal | Dialogen en modals |
| Layout | ndd-container, ndd-box, ndd-spacer, ndd-divider | Spacing en groepering |
<ndd-container padding="16" md-padding="24" lg-padding="32">
<!-- Content met responsieve padding -->
</ndd-container>
Geldige padding-waarden: 0, 2, 4, 6, 8, 10, 12, 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96
<ndd-box>
<!-- Gerelateerde componenten in een visueel afgebakend gebied -->
</ndd-box>
<ndd-sheet placement="right|left|bottom" accessible-label="Details">
<!-- Sheet content -->
</ndd-sheet>
Methoden: show(), hide()
<ndd-spacer size="32"></ndd-spacer>
Sizes: 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 44, 48, 64, 80, 96, m, flexible
Achtergrondkleur wordt gecascade via --context-parent-background-color:
background in op ndd-app-view voor de hele applicatiebackground in op individuele ndd-page componenten per paneel<!-- Hele app tinted -->
<ndd-app-view background="tinted">...</ndd-app-view>
<!-- Per paneel -->
<ndd-app-view>
<ndd-navigation-split-view>
<ndd-split-view-pane slot="sidebar">
<ndd-page background="tinted">...</ndd-page>
</ndd-split-view-pane>
<ndd-split-view-pane slot="main">
<ndd-page background="default">...</ndd-page>
</ndd-split-view-pane>
</ndd-navigation-split-view>
</ndd-app-view>
<ndd-app-view background="default">
<ndd-navigation-split-view>
<!-- Sidebar met navigatie -->
<ndd-split-view-pane slot="sidebar">
<ndd-page sticky-header background="tinted">
<ndd-container slot="header" padding="16">
<ndd-top-title-bar text="Navigatie"></ndd-top-title-bar>
</ndd-container>
<ndd-simple-section>
<ndd-list>
<!-- Navigatie-items -->
</ndd-list>
</ndd-simple-section>
</ndd-page>
</ndd-split-view-pane>
<!-- Hoofdinhoud -->
<ndd-split-view-pane slot="main">
<ndd-page sticky-header>
<ndd-container slot="header" padding="16">
<ndd-top-title-bar text="Documenttitel" supporting-text="Laatst bewerkt: vandaag">
<ndd-icon-button slot="toolbar" icon="edit"></ndd-icon-button>
</ndd-top-title-bar>
</ndd-container>
<ndd-simple-section>
<ndd-rich-text>
<h2>Inhoud</h2>
<p>Primaire content van de pagina.</p>
</ndd-rich-text>
</ndd-simple-section>
</ndd-page>
</ndd-split-view-pane>
<!-- Inspector voor details -->
<ndd-split-view-pane slot="inspector">
<ndd-page sticky-header>
<ndd-container slot="header" padding="16">
<ndd-top-title-bar text="Eigenschappen"></ndd-top-title-bar>
</ndd-container>
<ndd-simple-section>
<ndd-rich-text>
<p>Details over het geselecteerde item.</p>
</ndd-rich-text>
</ndd-simple-section>
</ndd-page>
</ndd-split-view-pane>
</ndd-navigation-split-view>
</ndd-app-view>
<ndd-app-view>
<ndd-page sticky-header>
<ndd-top-navigation-bar
slot="header"
title="Rijksoverheid"
logo-has-wordmark
logo-title="Rijksoverheid"
>
</ndd-top-navigation-bar>
<ndd-simple-section>
<ndd-rich-text>
<h1>Welkom</h1>
<p>Een eenvoudige pagina zonder split view.</p>
</ndd-rich-text>
</ndd-simple-section>
<ndd-two-thirds-one-third-section>
<ndd-rich-text>
<h2>Hoofdartikel</h2>
<p>Content in 2/3 breedte.</p>
</ndd-rich-text>
<ndd-rich-text slot="right">
<h3>Gerelateerd</h3>
<p>Sidebar content in 1/3 breedte.</p>
</ndd-rich-text>
</ndd-two-thirds-one-third-section>
<ndd-container slot="footer" padding="16">
<ndd-rich-text>
<p>Footer informatie</p>
</ndd-rich-text>
</ndd-container>
</ndd-page>
</ndd-app-view>
<ndd-app-view>
<ndd-bar-split-view>
<ndd-container slot="toolbar" sm-order="1" md-order="1">
<ndd-tab-bar navigation responsive>
<ndd-tab-bar-item text="Start" selected></ndd-tab-bar-item>
<ndd-tab-bar-item text="Zoeken"></ndd-tab-bar-item>
</ndd-tab-bar>
</ndd-container>
<ndd-page slot="main" sm-order="2" md-order="2" sticky-header>
<ndd-container slot="header" padding="16">
<ndd-top-title-bar text="Overzicht"></ndd-top-title-bar>
</ndd-container>
<ndd-simple-section>
<ndd-rich-text>
<p>Content onder de toolbar.</p>
</ndd-rich-text>
</ndd-simple-section>
</ndd-page>
</ndd-bar-split-view>
</ndd-app-view>
Heeft de app een zijnavigatie?
├── Ja → ndd-navigation-split-view
│ ├── Met details-paneel? → voeg inspector slot toe
│ ├── Met subnavigatie? → voeg secondary-sidebar slot toe
│ └── Met toolbars in main? → nest ndd-bar-split-view in main slot
│
├── Nee, maar wel toolbars/statusbalken?
│ └── ndd-bar-split-view
│
├── Nee, maar meerdere gelijke panelen naast elkaar?
│ └── ndd-side-by-side-split-view
│
├── Nee, maar meerdere gelijke panelen gestapeld?
│ └── ndd-stacked-split-view
│
└── Nee, gewoon één pagina
└── ndd-page direct in ndd-app-view
Nesting: Split views kunnen in elkaar genest worden. Plaats een geneste split view in een ndd-split-view-pane binnen het gewenste slot.