القائمة
Use when writing Vue components, working with CSS/styling, button classes, design tokens, or the RVO component library in this project. Helps avoid common mistakes with Utrecht/RVO class naming.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Use when asked to cut, prepare, or ship a release of the invulhulpen app, to deploy to production, or to tag a CalVer version. Covers the changelog → tag → automated release/deploy flow and its guards.
Use when asked to run, start, spin up, or test the app locally (boekhouding frontend/backend, standalone form, full stack). Launches the containerized dev environment (postgres + keycloak + backend + frontend + standalone) via podman and verifies it.
Use when editing assessment YAML sources in sources/, asking about the assessment schema structure, adding tasks/fields to prescan.yaml, dpia.yaml or iama.yaml, or working with dependencies, calculations, or references in assessment definitions.
Use when editing sources/begrippenkader_dpia.yaml or sources/begrippenkader_iama.yaml, adding or modifying definitions, asking about the begrippenkader structure or schema, or working with term definitions and their metadata.
Use when answering questions about DPIA concepts, privacy terminology, prescan logic, "wat betekent...", "definitie van...", assessment evaluation rules, report output format, or the relationship between Pre-scan and DPIA assessments.
| name | RVO Styling |
| description | Use when writing Vue components, working with CSS/styling, button classes, design tokens, or the RVO component library in this project. Helps avoid common mistakes with Utrecht/RVO class naming. |
| version | 0.1.0 |
Guide for styling in this project using the RVO (Rijksdienst voor Ondernemend Nederland) component library CSS and Utrecht design system.
<button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md">
Label
</button>
Structure: utrecht-button + variant + size
<!-- WRONG: --rvo-primary-action does not exist -->
<button class="utrecht-button utrecht-button--rvo-primary-action">
<!-- CORRECT: variant without rvo- prefix (except tertiary) -->
<button class="utrecht-button utrecht-button--primary-action">
| Class | Usage |
|---|---|
utrecht-button--primary-action | Main action (blue) |
utrecht-button--secondary-action | Secondary action (outlined) |
utrecht-button--rvo-tertiary-action | Tertiary action (text-only, has rvo- prefix) |
utrecht-button--primary-action utrecht-button--warning | Destructive/warning action |
| Class | Usage |
|---|---|
utrecht-button--rvo-xs | Extra small |
utrecht-button--rvo-md | Medium (default) |
utrecht-button--rvo-full-width | Full container width |
See packages/assessment-core/src/components/ui/UiButton.vue for the canonical button component that handles variant and size mapping.
<div class="utrecht-button-group" role="group" aria-label="Beschrijving van de groep">
<button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md">Opslaan</button>
<button class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md">Annuleer</button>
</div>
--rvo-color-hemelblauw — primary blue--rvo-color-grijs-100 — light grey background--rvo-color-grijs-200 — medium grey--rvo-color-wit — white--rvo-color-zwart — black--rvo-space-sm, --rvo-space-md, --rvo-space-lg, --rvo-space-xl, --rvo-space-3xlrvo-margin-block-end--md--rvo-font-size-xs--rvo-border-radius-xlDo NOT use <style scoped> in Vue components. Use RVO utility classes and global CSS instead.
<!-- WRONG -->
<style scoped>
.my-button { color: blue; }
</style>
<!-- CORRECT: use RVO classes in template -->
<template>
<button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md">
Click
</button>
</template>
Custom styles go in packages/assessment-core/src/assets/base.css under the .rvo-theme selector:
.rvo-theme .my-custom-class {
background-color: var(--rvo-color-grijs-100);
}
.background-grijs-100 — light grey background.background-grijs-200 — medium grey background.rvo-sidebar-layout — sidebar page layout.rvo-max-width-layout — constrained content width<div class="rvo-accordion__item-summary">
<span class="rvo-accordion__item-icon"></span>
Title
</div>
<span class="rvo-icon--with-spacing-right">icon</span>
<span class="rvo-icon--with-spacing-left">icon</span>
<div class="modal-overlay">
<div class="save-modal">
<!-- content -->
</div>
</div>
.small-text — uses --rvo-font-size-xs.preserve-whitespace — preserves whitespace formatting.font-hemelblauw — blue text color