From f1b66d6d272e03f7812ac567563db9d4987e8f99 Mon Sep 17 00:00:00 2001
From: Marlon <marlonbaeten@users.noreply.github.com>
Date: Mon, 16 Sep 2024 16:53:53 +0200
Subject: [PATCH] Vaardigheden (#17)

* Finished "vaardighedenkompas"
---
 index.html            |    3 +
 src/App.tsx           |   25 +-
 src/SkillMarked.tsx   |   39 +
 src/SkillTable.tsx    |  104 +++
 src/Skills.tsx        |  108 +++
 src/Table.tsx         |    4 +-
 src/data.json         | 1618 ++++++++++++++++++++++++++++++++++++++---
 src/index.css         |   56 +-
 src/usePersistence.ts |  155 +++-
 src/util.ts           |  129 +++-
 10 files changed, 2083 insertions(+), 158 deletions(-)
 create mode 100644 src/SkillMarked.tsx
 create mode 100644 src/SkillTable.tsx
 create mode 100644 src/Skills.tsx

diff --git a/index.html b/index.html
index c1ed82c..6dec18b 100644
--- a/index.html
+++ b/index.html
@@ -63,6 +63,9 @@
           <path fill="#fff" d="M8 2h16v4h-16v-4z"></path>
           <path fill="#fff" d="M30 8h-28c-1.1 0-2 0.9-2 2v10c0 1.1 0.9 2 2 2h6v8h16v-8h6c1.1 0 2-0.9 2-2v-10c0-1.1-0.9-2-2-2zM4 14c-1.105 0-2-0.895-2-2s0.895-2 2-2 2 0.895 2 2-0.895 2-2 2zM22 28h-12v-10h12v10z"></path>
         </symbol>
+        <symbol id="icon-marker" viewBox="0 0 512 512">
+          <path d="M451.47 125.404l-70.904-70.902a13.11 13.11 0 00-17.746-.733L164.999 221.372l119.603 119.602 167.6-197.822a13.11 13.11 0 00-.733-17.748zM116.153 267.658l29.002-29.001 122.16 122.16-29.001 29.002zM94.552 363.73l47.69 47.69c18.523-11.008 40.65-15.58 63.161-17.391l-93.46-93.46c-1.811 22.511-6.383 44.638-17.39 63.162zm-35.938 39.898a6.574 6.574 0 00-1.273 7.501l22.375 46.487a6.575 6.575 0 0010.572 1.796l31.411-31.41-43.728-43.73z" />
+        </symbol>
       </defs>
     </svg>
     <div id="root"></div>
diff --git a/src/App.tsx b/src/App.tsx
index 38a48ae..281a652 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,24 @@
 import Results from './Results';
+import Skills from './Skills';
 import Table from './Table';
 import usePersistence from './usePersistence';
 import { copyLink, saveStateLocal } from './util';
 import voha from './voha.jpg';
 
 export default function App() {
-  const { state, select, mark, note } = usePersistence();
+  const { state, select, mark, note, selectSkill, markSkill, noteSkill, navigate } = usePersistence();
+
+  if (state.skillMode) {
+    return (
+      <Skills
+        state={state}
+        navigate={navigate}
+        selectSkill={selectSkill}
+        markSkill={markSkill}
+        noteSkill={noteSkill}
+      />
+    );
+  }
 
   return (
     <>
@@ -35,14 +48,18 @@ export default function App() {
         </ol>
         <p>
           <strong>Markeren</strong> kan door het vakje rechts te selecteren.
-          <br />
           Dit mag je gebruiken als je hier bijvoorbeeld extra aandacht aan wilt
           besteden of een vraag over hebt.
-          <br />
           Onder aan de pagina verschijnt een lijst van gemarkeerde items.
         </p>
       </div>
 
+      <p className="actions">
+        <button onClick={() => navigate(true)}>
+          Vaardighedenkompas
+        </button>
+      </p>
+
       <Table state={state} select={select} mark={mark} />
       <hr />
       <Results state={state} mark={mark} note={note} />
@@ -55,7 +72,7 @@ export default function App() {
           Je kunt ook een link kopiëren en deze ergens veilige bewaren,
           of een bestand downloaden en deze op een veilige plek opslaan.
         </p>
-        <p className="save">
+        <p className="actions">
           <button onClick={() => saveStateLocal(state)}>
             <svg>
               <use xlinkHref="#icon-floppy-disk" />
diff --git a/src/SkillMarked.tsx b/src/SkillMarked.tsx
new file mode 100644
index 0000000..5382b83
--- /dev/null
+++ b/src/SkillMarked.tsx
@@ -0,0 +1,39 @@
+import { SkillCategory, SkillGroup, State } from './usePersistence';
+
+interface SkillMarkedProps {
+  state: State;
+  mark: (index: number, marked: boolean) => void;
+}
+
+export default function SkillMarked({ state, mark }: SkillMarkedProps) {
+  const items = state.skills
+    .map((skillCategory: SkillCategory) => skillCategory.groups
+    .map((skillGroup: SkillGroup) =>
+      skillGroup.items.map((item) => {
+        if (!item.marked) {
+          return null;
+        }
+
+        return (
+          <li key={item.name}>
+            <input
+              type="checkbox"
+              name={`check-${item.index}`}
+              checked={true}
+              onChange={() => mark(item.index, false)}
+              aria-label="Verwijderen"
+            />
+            {item.name}
+          </li>
+        );
+      })
+    ))
+    .flat()
+    .filter((item) => item !== null);
+
+  if (items.length === 0) {
+    return <p>Nog geen gemarkeerde vaardigheden</p>;
+  }
+
+  return <ul>{items}</ul>;
+}
diff --git a/src/SkillTable.tsx b/src/SkillTable.tsx
new file mode 100644
index 0000000..7b6f974
--- /dev/null
+++ b/src/SkillTable.tsx
@@ -0,0 +1,104 @@
+import { Fragment } from 'preact/jsx-runtime';
+import { State } from './usePersistence';
+
+interface SkillTableProps {
+  state: State;
+  select: (index: number, value: boolean|null) => void;
+  mark: (index: number, marked: boolean) => void;
+}
+
+export default function SkillTable({ state, select, mark }: SkillTableProps) {
+  return (
+    <table className="form skills">
+      <thead>
+        <tr>
+          <th colSpan={3} style={{ border: 'none' }}></th>
+          <th>
+            <label data-tooltip="onvoldoende ervaring">O</label>
+          </th>
+          <th>
+            <label data-tooltip="voldoende ervaring">V</label>
+          </th>
+          <th data-tooltip="markeren" role="columnheader">
+            <svg>
+              <use xlinkHref="#icon-marker" />
+            </svg>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {state.skills.map((category) => (
+          <Fragment key={category.name}>
+            <tr>
+              <td colSpan={6} className="white"></td>
+            </tr>
+            <tr>
+              <th
+                colSpan={6}
+                className="skillCategory"
+              >
+                Lijst vaardigheden: {category.name}
+              </th>
+            </tr>
+            {category.groups.map((group) => (
+              <Fragment key={group.name}>
+                <tr>
+                  <th className="skillGroup"
+                  colSpan={6}>{group.name}</th>
+                </tr>
+                {group.items.map((item, index) => (
+                    <tr className="selectable" key={item.name}>
+                      <th scope="row">{index + 1}</th>
+                      <td className="skill-grade">
+                        <label data-tooltip={item.basic === null ? '*' : (item.basic ? 'Basisvaardigheid' : 'Facultatieve vaardigheid')}>
+                          {item.basic === null ? '*' : (item.basic ? 'B' : 'F')}
+                        </label>
+                      </td>
+                      <td className="skill-name">{item.name}</td>
+                      <td>
+                        <label data-tooltip="onvoldoende ervaring">
+                          <input
+                            type="radio"
+                            name={`skill-option-${item.index}`}
+                            id={`skill-option-${item.index}-0`}
+                            checked={item.value === false}
+                            onChange={() => select(item.index, false)}
+                            aria-label={"onvoldoende ervaring"}
+                          />
+                        </label>
+                      </td>
+                      <td>
+                        <label data-tooltip="voldoende ervaring">
+                          <input
+                            type="radio"
+                            name={`skill-option-${item.index}`}
+                            id={`skill-option-${item.index}-1`}
+                            checked={item.value === true}
+                            onChange={() => select(item.index, true)}
+                            aria-label={"voldoende ervaring"}
+                          />
+                        </label>
+                      </td>
+                      <td data-tooltip="markeren" role="columnheader">
+                        <label htmlFor={`check-${item.index}`} data-tooltip="markeren">
+                          <input
+                            type="checkbox"
+                            id={`check-${item.index}`}
+                            name={`check-${item.index}`}
+                            onChange={(e) => mark(item.index, (e.target as HTMLInputElement).checked)}
+                            checked={item.marked}
+                            aria-label="markeren"
+                          />
+                        </label>
+                      </td>
+                    </tr>
+                  )
+                )}
+              </Fragment>
+            ))}
+          </Fragment>
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/src/Skills.tsx b/src/Skills.tsx
new file mode 100644
index 0000000..ec0d243
--- /dev/null
+++ b/src/Skills.tsx
@@ -0,0 +1,108 @@
+import SkillMarked from './SkillMarked';
+import SkillTable from './SkillTable';
+import { State } from './usePersistence';
+import { copyLink, saveStateLocal } from './util';
+import voha from './voha.jpg';
+
+interface SkillsProps {
+  state: State;
+  navigate: (skillMode: boolean) => void;
+  selectSkill: (index: number, value: boolean|null) => void;
+  markSkill: (index: number, marked: boolean) => void;
+  noteSkill: (content: string) => void;
+}
+
+export default function Skills({ state, selectSkill, markSkill, navigate, noteSkill }: SkillsProps) {
+  return (
+    <>
+      <header>
+        <div>
+          <h1>Vaardighedenkompas</h1>
+          <p>
+            Overzicht vaardigheden per ICPC-categorie
+          </p>
+        </div>
+        <div>
+          <img src={voha} alt="Vervolgopleiding tot huisarts" />
+        </div>
+      </header>
+
+      <div className="legenda">
+        <h2>Legenda</h2>
+        <p>
+          <code>O</code> = Onvoldoende ervaring<br />
+          <code>V</code> = Voldoende ervaring
+        </p>
+        <p>
+          <code>B</code> = Basisvaardigheid<br />
+          <code>F</code> = Facultatieve vaardigheid
+        </p>
+        <p>
+          <code>*</code> = Ten tijde van de inventarisatie om het huidige overzicht in te delen,
+          ontbrak het onderdeel 'palliatieve en terminale zorg' in dit overzicht en is dus
+          niet meegenomen in de indeling. In 2024 vindt een herijking van deze lijst plaats,
+          dan zal het onderdeel 'palliatieve en terminale zorg' meegenomen worden. 
+        </p>
+      </div>
+
+      <p className="actions">
+        <button onClick={() => navigate(false)}>
+        Ervaringskompas
+        </button>
+      </p>
+
+      <SkillTable state={state} select={selectSkill} mark={markSkill} />
+
+      <h2>Gemarkeerde vaardigheden</h2>
+
+      <SkillMarked state={state} mark={markSkill} />
+
+      <hr />
+
+      <h2>Notities</h2>
+      <textarea
+        value={state.skillNotes}
+        onChange={(event) => noteSkill((event.target as HTMLTextAreaElement).value)}
+        aria-label="Notities"
+        rows={state.skillNotes.split(/\r\n|\r|\n/).length}
+      />
+      <div className="print-notes">
+        {state.skillNotes.split('\n').map((item, key) => (
+          <p key={key}>
+            {item}
+          </p>
+        ))}
+      </div>
+
+      <div className="save-section">
+        <hr />
+        <h2>Opslaan</h2>
+        <p>
+          Om je ingevulde gegevens te bewaren heb je twee opties.
+          Als je op een persoonlijk apparaat werkt kun je de huidige toestand opslaan in je browser.
+          Je kunt ook een link kopiëren en deze ergens veilige bewaren.
+        </p>
+        <p className="actions">
+          <button onClick={() => saveStateLocal(state)}>
+            <svg>
+              <use xlinkHref="#icon-floppy-disk" />
+            </svg>
+            Opslaan in de browser
+          </button>
+          <button onClick={() => copyLink(state)}>
+            <svg>
+              <use xlinkHref="#icon-link" />
+            </svg>
+            Unieke link kopiëren
+          </button>
+          <button onClick={() => window.print()}>
+            <svg>
+              <use xlinkHref="#icon-printer" />
+            </svg>
+            Printen
+          </button>
+        </p>
+      </div>
+    </>
+  );
+}
diff --git a/src/Table.tsx b/src/Table.tsx
index 5373d1e..923b8c6 100644
--- a/src/Table.tsx
+++ b/src/Table.tsx
@@ -19,8 +19,8 @@ export default function Table({ state, select, mark }: TableProps) {
             </th>
           ))}
           <th data-tooltip="markeren" role="columnheader">
-            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
-              <path d="M451.47 125.404l-70.904-70.902a13.11 13.11 0 00-17.746-.733L164.999 221.372l119.603 119.602 167.6-197.822a13.11 13.11 0 00-.733-17.748zM116.153 267.658l29.002-29.001 122.16 122.16-29.001 29.002zM94.552 363.73l47.69 47.69c18.523-11.008 40.65-15.58 63.161-17.391l-93.46-93.46c-1.811 22.511-6.383 44.638-17.39 63.162zm-35.938 39.898a6.574 6.574 0 00-1.273 7.501l22.375 46.487a6.575 6.575 0 0010.572 1.796l31.411-31.41-43.728-43.73z" />
+            <svg>
+              <use xlinkHref="#icon-marker" />
             </svg>
           </th>
         </tr>
diff --git a/src/data.json b/src/data.json
index e08ab68..0edf2c3 100644
--- a/src/data.json
+++ b/src/data.json
@@ -22,39 +22,111 @@
       "experiences": [
         {
           "name": "Schat de urgentie van de hulpvraag in en bepaalt de soort verrichting die noodzakelijk is (telefonisch consult, consult of visite).",
-          "competences": [1, 1, 0, 1, 0, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Verheldert de hulpvraag, neemt de anamnese af en voert onderzoek uit.",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Voert aanvullende diagnostiek uit.",
-          "competences": [1, 0, 0, 0, 1, 1, 0]
+          "competences": [
+            1,
+            0,
+            0,
+            0,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Stelt de behandeling en het beleid in, informeert en adviseert.",
-          "competences": [1, 1, 0, 0, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Registreert en codeert.",
-          "competences": [0, 0, 0, 1, 0, 1, 0]
+          "competences": [
+            0,
+            0,
+            0,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Sluit de episode af door de behandeling en het beleid te evalueren.",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Neemt de anamnese af aan de telefoon bij een telefonisch consult. ",
-          "competences": [1, 1, 0, 0, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Geeft telefonisch voorlichting en advies.",
-          "competences": [1, 1, 0, 1, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Superviseert (telefonische) consulten van de assistente en geeft feedback.",
-          "competences": [0, 1, 1, 1, 0, 1, 0]
+          "competences": [
+            0,
+            1,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         }
       ]
     },
@@ -64,47 +136,135 @@
       "experiences": [
         {
           "name": "Stelt het toestandsbeeld vast van een patiënt met acute ziektebeelden met behulp van de ABCDE methode en voert daarbij de noodzakelijke handelingen uit.",
-          "competences": [1, 1, 1, 1, 0, 1, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Handelt getrieerde consulten en visites naar urgentie af.",
-          "competences": [1, 1, 0, 1, 1, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Legt bevindingen, diagnose en beleid vast en draagt deze helder over.",
-          "competences": [1, 1, 0, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Superviseert gedelegeerde taken.",
-          "competences": [1, 1, 1, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Rapporteert voorkomende incidenten en analyseert deze op verbeterpunten in de acute zorgverlening.",
-          "competences": [1, 1, 1, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Bewaakt de vlotte afhandeling van de patiëntenstroom met als doel veilige, doelmatige en overbruggende zorg.",
-          "competences": [1, 1, 1, 0, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Organiseert het medisch beleid in samenwerking met andere (para) medische hulpverleners en mantelzorgers.",
-          "competences": [1, 1, 1, 1, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Handelt visites af conform de regelgeving ten aanzien van spoedritten.",
-          "competences": [1, 1, 0, 1, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Trieert telefonisch, stelt de urgentie vast, bepaalt het medisch beleid en geeft instructies in begrijpelijke taal.",
-          "competences": [1, 1, 1, 1, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Autoriseert binnen de tijdsnorm het handelen van de triage assistent.",
-          "competences": [1, 1, 1, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Fungeert als eerste aanspreekpunt voor SEH, ambulance, apotheek, GGZ, thuiszorg en politie.",
-          "competences": [1, 1, 0, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            1
+          ]
         }
       ]
     },
@@ -114,35 +274,99 @@
       "experiences": [
         {
           "name": "Behandelt, controleert en organiseert de zorg voor patiënten met diabetes, HVZ en astma/COPD.",
-          "competences": [1, 0, 1, 1, 0, 1, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Registreert, deelt data met medebehandelaars en stelt beleid bij.",
-          "competences": [1, 0, 0, 1, 0, 1, 0]
+          "competences": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Begeleidt en evalueert de zorg verleend door assistente en Praktijkondersteuner Huisarts.",
-          "competences": [0, 0, 1, 1, 0, 1, 0]
+          "competences": [
+            0,
+            0,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Markeert het moment dat er sprake is van een chronische ziekte, die behandeling en controle behoeft.",
-          "competences": [1, 0, 1, 1, 0, 0, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Verleent en organiseert zorg na ontslag uit het ziekenhuis.",
-          "competences": [1, 0, 0, 1, 0, 0, 0]
+          "competences": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Behandelt en begeleidt patiënten met zeldzame ziekten.",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Kiest - bij conflicterende richtlijnen - samen met de patiënt de meest passende behandeling.",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Maakt gebruik van moderne communicatietechnieken (ICT).",
-          "competences": [0, 1, 0, 1, 1, 0, 0]
+          "competences": [
+            0,
+            1,
+            0,
+            1,
+            1,
+            0,
+            0
+          ]
         }
       ]
     },
@@ -152,35 +376,99 @@
       "experiences": [
         {
           "name": "Stelt vast of er sprake is van complexe problematiek.",
-          "competences": [1, 1, 0, 0, 0, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Stelt in samenspraak met de patiënt een behandelplan vast.",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Behandelt intercurrente ziekten in samenhang met bestaande (complexe) problematiek.",
-          "competences": [1, 0, 0, 1, 0, 1, 0]
+          "competences": [
+            1,
+            0,
+            0,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Bespreekt vroegtijdig de keuzes in aanvullende diagnostiek en/of behandeling rekening houdend met persoonlijke wensen en levensverwachting.",
-          "competences": [1, 1, 0, 0, 1, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Stemt taken bij de zorg voor ouderen af met andere bij de patiënt betrokken hulpverleners.",
-          "competences": [0, 0, 1, 1, 1, 0, 0]
+          "competences": [
+            0,
+            0,
+            1,
+            1,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Bepaalt periodiek de zorgbehoefte van de ouderen in de praktijk (door screening en/of casefinding) en past het zorgaanbod daar waar mogelijk op aan.",
-          "competences": [0, 0, 0, 1, 1, 1, 1]
+          "competences": [
+            0,
+            0,
+            0,
+            1,
+            1,
+            1,
+            1
+          ]
         },
         {
           "name": "Verbetert en bewaakt de veiligheid van de ouderenzorg in de praktijk, door onder meer periodieke medicatiereviews en valpreventieprogramma’s.",
-          "competences": [0, 0, 1, 0, 1, 1, 1]
+          "competences": [
+            0,
+            0,
+            1,
+            0,
+            1,
+            1,
+            1
+          ]
         },
         {
           "name": "Bepaalt welk aandeel de huisartsvoorziening heeft in de zorg voor ouderen en stemt dit af met andere verantwoordelijken in deze zorg zoals de Gemeente (WMO).",
-          "competences": [0, 0, 1, 1, 1, 0, 0]
+          "competences": [
+            0,
+            0,
+            1,
+            1,
+            1,
+            0,
+            0
+          ]
         }
       ]
     },
@@ -190,27 +478,75 @@
       "experiences": [
         {
           "name": "Voert een consult met een acuut ziek kind (leeftijd: 0-2 jaar).",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Voert een consult met een kind met lichamelijke klachten (leeftijd: 3-10 jaar).",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Voert een consult met een puber/adolescent (leeftijd: 11-23 jaar).",
-          "competences": [1, 1, 1, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Maakt overgewicht bespreekbaar en begeleidt hierbij.",
-          "competences": [1, 1, 1, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Signaleert problematische thuissituaties en begeleidt het gezin.",
-          "competences": [1, 1, 1, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Schrijft medicatie voor aan kinderen.",
-          "competences": [1, 1, 0, 0, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            0
+          ]
         }
       ]
     },
@@ -220,35 +556,99 @@
       "experiences": [
         {
           "name": "Begeleidt een patiënt met spanningsklachten, overspanning of burn-out.",
-          "competences": [1, 1, 1, 1, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Zet bij een patiënt met angst- en stemmingsklachten /stoornissen de benodigde behandeling in.",
-          "competences": [1, 1, 1, 0, 0, 1, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Diagnosticeert acute psychiatrische stoornissen en zet de benodigde behandeling in.",
-          "competences": [1, 1, 1, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Schat bij suïcidaliteit het gevaar in voor de patiënt en diens omgeving en zet de benodigde hulp in.",
-          "competences": [1, 1, 0, 1, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Motiveert een patiënt met (een verhoogd risico voor) verslavingsgedrag voor passende zorg.",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Zet bij een patiënt met gevolgen van traumatische gebeurtenissen de benodigde zorg in.",
-          "competences": [1, 1, 1, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Signaleert persoonlijkheidstrekken en -stoornissen, definieert de gevolgen hiervan voor de zorgverlening en adviseert de patiënt om indien nodig passende begeleiding te vinden.",
-          "competences": [1, 1, 0, 0, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Zet bij kinderen met afwijkend gedrag passende diagnostiek en behandeling in.",
-          "competences": [1, 0, 1, 0, 1, 0, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            0,
+            1,
+            0,
+            0
+          ]
         }
       ]
     },
@@ -258,23 +658,63 @@
       "experiences": [
         {
           "name": "Stelt de werkhypothese SOLK, geeft uitleg en behandelt stapsgewijs.",
-          "competences": [1, 1, 0, 0, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Maakt gebruik van klachtenregistratie om patronen in klachten en beïnvloedende factoren te ontdekken.",
-          "competences": [1, 1, 0, 0, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Voert een verwijsgesprek met een patiënt met SOLK.",
-          "competences": [1, 1, 1, 0, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Bespreekt de gevolgen van de klachten voor de arbeidsparticipatie bij (dreigende) langdurige arbeidsongeschiktheid.",
-          "competences": [0, 0, 1, 0, 1, 0, 0]
+          "competences": [
+            0,
+            0,
+            1,
+            0,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Biedt langdurige begeleiding en houdt de regie bij een patiënt met ernstige SOLK.",
-          "competences": [1, 1, 0, 1, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            0
+          ]
         }
       ]
     },
@@ -284,43 +724,123 @@
       "experiences": [
         {
           "name": "Voert een gesprek over het naderend levenseinde.",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Past beleid aan op basis van de fase waarin de patiënt in de palliatieve fase verkeert: in het bijzonder de overgang van curatieve fase naar de palliatieve fase en de stervensfase.",
-          "competences": [1, 1, 1, 1, 1, 0, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Behandelt de specifieke problemen in de palliatieve / terminale fase.",
-          "competences": [1, 1, 1, 0, 1, 1, 0]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Anticipeert op de vaak complexe problemen en klachten tijdens de palliatieve fase / terminale zorg.",
-          "competences": [1, 1, 1, 1, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Organiseert de palliatieve en terminale zorg, stuurt andere zorgverleners aan en is aanspreekpunt voor de patiënt en zijn omgeving.",
-          "competences": [1, 1, 1, 1, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Verleent zorg aan naasten.",
-          "competences": [1, 1, 1, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Begeleidt een patiënt en diens naasten bij het verlies (rouwverwerking).",
-          "competences": [1, 1, 0, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Voert palliatieve sedatie uit.",
-          "competences": [1, 1, 1, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            0,
+            0,
+            1
+          ]
         },
         {
           "name": "Voert de wens tot euthanasie uit of draagt deze over in geval van persoonlijke gewetensbezwaren.",
-          "competences": [1, 1, 1, 1, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            1,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Levert persoonlijke continuïteit van zorgverlening.",
-          "competences": [1, 1, 0, 1, 0, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            1,
+            0,
+            0,
+            1
+          ]
         }
       ]
     },
@@ -330,39 +850,111 @@
       "experiences": [
         {
           "name": "Stelt, samen met een patiënt, een individueel zorgplan op ter preventie van een chronische ziekte.",
-          "competences": [1, 1, 0, 0, 1, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Verkent op indicatie de leefstijl van een patiënt en bespreekt mogelijkheden tot verandering.",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Adviseert over verschillende preventieve activiteiten.",
-          "competences": [1, 1, 0, 0, 1, 1, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Selecteert personen en patiënten met een verhoogd gezondheidsrisico.",
-          "competences": [1, 0, 1, 1, 0, 1, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Voert programmatische preventie uit.",
-          "competences": [0, 0, 1, 1, 1, 0, 0]
+          "competences": [
+            0,
+            0,
+            1,
+            1,
+            1,
+            0,
+            0
+          ]
         },
         {
           "name": "Bepaalt welke rol de huisarts heeft in een nieuw of bestaand preventieproject en voert deze uit.",
-          "competences": [0, 0, 0, 1, 1, 1, 0]
+          "competences": [
+            0,
+            0,
+            0,
+            1,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Is betrokken bij de uitvoering van bevolkingsonderzoek zoals door de beroepsgroep met de overheid is overeengekomen en voert zijn aandeel hierin uit.",
-          "competences": [1, 1, 1, 0, 0, 1, 1]
+          "competences": [
+            1,
+            1,
+            1,
+            0,
+            0,
+            1,
+            1
+          ]
         },
         {
           "name": "Brengt een erfelijke ziekte in de familie van een patiënt in kaart en bespreekt of screening of diagnostiek aan de orde is.",
-          "competences": [1, 1, 0, 0, 0, 0, 0]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Bespreekt bij een bestaande kinderwens preventieve mogelijkheden voorafgaand aan een toekomstige zwangerschap.",
-          "competences": [1, 1, 0, 0, 1, 0, 1]
+          "competences": [
+            1,
+            1,
+            0,
+            0,
+            1,
+            0,
+            1
+          ]
         }
       ]
     },
@@ -372,33 +964,895 @@
       "experiences": [
         {
           "name": "Formuleert een persoonlijke en een praktijkvisie op de huisartsenzorg.",
-          "competences": [0, 0, 0, 1, 1, 0, 1]
+          "competences": [
+            0,
+            0,
+            0,
+            1,
+            1,
+            0,
+            1
+          ]
         },
         {
           "name": "Stelt een verbeterplan op en voert dit uit.",
-          "competences": [1, 0, 1, 1, 0, 0, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Superviseert individuele praktijkmedewerkers bij het uitvoeren van voorbehouden handelingen.",
-          "competences": [1, 0, 1, 1, 0, 1, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            1,
+            0,
+            1,
+            0
+          ]
         },
         {
           "name": "Levert een bijdrage aan de patiëntveiligheid door het melden, analyseren en afhandelen van patiëntveiligheidsproblemen.",
-          "competences": [1, 0, 1, 0, 0, 0, 0]
+          "competences": [
+            1,
+            0,
+            1,
+            0,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Heeft inzicht in de financiering en bedrijfsvoering van de huisartsenpraktijk, declareert eigen verrichtingen en adviseert patiënten over de financiële consequenties van een medische behandeling/diagnostiek.",
-          "competences": [0, 1, 1, 1, 0, 0, 0]
+          "competences": [
+            0,
+            1,
+            1,
+            1,
+            0,
+            0,
+            0
+          ]
         },
         {
           "name": "Vertegenwoordigt de opleidingspraktijk voor een specifiek thema in een multidisciplinair overleg.",
-          "competences": [0, 0, 0, 1, 1, 1, 0]
+          "competences": [
+            0,
+            0,
+            0,
+            1,
+            1,
+            1,
+            0
+          ]
         },
         {
           "name": "Stemt de praktijkvoering en informatievoorziening af op de behoeften van de patiëntenpopulatie.",
-          "competences": [0, 0, 1, 1, 0, 0, 1]
+          "competences": [
+            0,
+            0,
+            1,
+            1,
+            0,
+            0,
+            1
+          ]
+        }
+      ]
+    }
+  ],
+  "skills": [
+    {
+      "name": "diagnostiek",
+      "groups": [
+        {
+          "name": "Algemeen",
+          "items": [
+            {
+              "name": "inspectie habitus en sec. geslachtskenmerken",
+              "basic": true
+            },
+            {
+              "name": "onderzoek pasgeborene ",
+              "basic": true
+            },
+            {
+              "name": "dood vaststellen",
+              "basic": true
+            },
+            {
+              "name": "superviseren vaardigheid (co-ass, PA, POH)",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Ogen",
+          "items": [
+            {
+              "name": "inspectie (conjuntiva, sclerae, cornea, diepte/helderheid VOK, iris, pupil/pupilreacties, oogleden, adnexen, traansysteem)",
+              "basic": true
+            },
+            {
+              "name": "oogstand/volgbewegingen (Corneareflexbeeldjes, afdekproef)",
+              "basic": true
+            },
+            {
+              "name": "onderzoek met loep, strijk/doorvallend licht, anaestheticum, fluoresceïne",
+              "basic": true
+            },
+            {
+              "name": "visusonderzoek kinderen/volwassenen (stenopeïsche opening)",
+              "basic": true
+            },
+            {
+              "name": "gezichtsveldonderzoek (confrontatiemethode, Amslertest)",
+              "basic": true
+            },
+            {
+              "name": "directe fundoscopie (media, papil, retinavaten, gebruik mydriaticum)",
+              "basic": false
+            },
+            {
+              "name": "indirecte fundoscopie",
+              "basic": false
+            },
+            {
+              "name": "diagnostisch refractioneren ±0,5D",
+              "basic": false
+            },
+            {
+              "name": "meting oogboldruk",
+              "basic": false
+            },
+            {
+              "name": "testen stereo en kleurenzien",
+              "basic": false
+            },
+            {
+              "name": "spleetlamponderzoek",
+              "basic": false
+            },
+            {
+              "name": "testen doorgankelijkheid traansysteem",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "KNO",
+          "items": [
+            {
+              "name": "onderzoek mond/keel (bodem, tong, keelholte, speekselklieren inclusief bimanuele palpatie, kaakgewrichten)",
+              "basic": true
+            },
+            {
+              "name": "indirecte laryngoscopie",
+              "basic": false
+            },
+            {
+              "name": "onderzoek neus (inspectie, rhinoscopie, palpatie)",
+              "basic": true
+            },
+            {
+              "name": "inspectie oren uitwendig en omgeving",
+              "basic": true
+            },
+            {
+              "name": "beoordeling gehoorgang en trommelvlies(otoscopie)",
+              "basic": true
+            },
+            {
+              "name": "fluisterspraaktest",
+              "basic": true
+            },
+            {
+              "name": "stemvorkproeven Rinne/Weber",
+              "basic": true
+            },
+            {
+              "name": "(screenings-) audiometrie",
+              "basic": false
+            },
+            {
+              "name": "tympanometrie",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Hals",
+          "items": [
+            {
+              "name": "onderzoek larynx, trachea, schildklier, lymfklieren",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Mammae",
+          "items": [
+            {
+              "name": "inspectie. Palpatie (incl. regionale lymfklieren) ",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Longen",
+          "items": [
+            {
+              "name": "inspectie/percussie/auscultatie",
+              "basic": true
+            },
+            {
+              "name": "percutane zuurstofsaturatiemeting (pulsoximetrie)",
+              "basic": true
+            },
+            {
+              "name": "spirometrie (kwaliteit, ROER systematiek)",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Bloedsomloop",
+          "items": [
+            {
+              "name": "hart(palpatie ictus, percussie hartgrenzen, auscultatie harttonen/souffles)",
+              "basic": true
+            },
+            {
+              "name": "eventrecorder/holter in eigen beheer",
+              "basic": false
+            },
+            {
+              "name": "ECG (laten) maken en beoordelen",
+              "basic": true
+            },
+            {
+              "name": "polskwaliteiten/deficit, capillary refill, bloeddruk, CVD, pulsaties, veneuze circulatie",
+              "basic": true
+            },
+            {
+              "name": "30-minuten bloeddrukmeting",
+              "basic": true
+            },
+            {
+              "name": "24-uurs bloeddrukmeting in eigen beheer",
+              "basic": true
+            },
+            {
+              "name": "Doppler onderzoek (bepalen EAI)",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Zenuwstelsel",
+          "items": [
+            {
+              "name": "onderzoek bewustzijn",
+              "basic": true
+            },
+            {
+              "name": "meningeale prikkeling, HZ, coördinatie",
+              "basic": true
+            },
+            {
+              "name": "Fast-test",
+              "basic": true
+            },
+            {
+              "name": "motoriek, spierkracht, tonus, reflexen, sensibiliteit",
+              "basic": true
+            },
+            {
+              "name": "kiepproef Dix-Hallpike",
+              "basic": true
+            },
+            {
+              "name": "Epley manoeuvre",
+              "basic": false
+            },
+            {
+              "name": "Head Impulse Test (HIT)",
+              "basic": true
+            },
+            {
+              "name": "MMSE afnemen",
+              "basic": true
+            },
+            {
+              "name": "4-DKL afnemen",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Abdomen",
+          "items": [
+            {
+              "name": "inspectie, auscultatie(darmgeruis, souffles), percussie, palpatie (milt, lever, lymfklieren)",
+              "basic": true
+            },
+            {
+              "name": "onderzoek breukpoorten",
+              "basic": true
+            },
+            {
+              "name": "onderzoek uitwendige geslachtsorganen (ook transilluminatie)",
+              "basic": true
+            },
+            {
+              "name": "vaginaal speculum onderzoek",
+              "basic": true
+            },
+            {
+              "name": "vaginaal toucher/ bimanueel onderzoek",
+              "basic": true
+            },
+            {
+              "name": "afnemen cervixuitstrijkje",
+              "basic": true
+            },
+            {
+              "name": "afname materiaal SOA-onderzoek (♀ en ♂)",
+              "basic": true
+            },
+            {
+              "name": "onderzoek fluor vaginalis",
+              "basic": true
+            },
+            {
+              "name": "zwangerschap: uitwendig onderzoek. Uterus (fundushoogte, contracties/tonus, cortonen)",
+              "basic": false
+            },
+            {
+              "name": "onderzoek anogenitale regio/bekkenbodem",
+              "basic": true
+            },
+            {
+              "name": "rectaal toucher",
+              "basic": true
+            },
+            {
+              "name": "onderzoek prostaat (palpatie)",
+              "basic": true
+            },
+            {
+              "name": "proctoscopie",
+              "basic": false
+            },
+            {
+              "name": "onderzoek urine strip",
+              "basic": true
+            },
+            {
+              "name": "maken/beoordelen dipslide",
+              "basic": true
+            },
+            {
+              "name": "maken /beoordelen urinesediment",
+              "basic": false
+            },
+            {
+              "name": "spermaonderzoek",
+              "basic": false
+            },
+            {
+              "name": "postcoïtum test",
+              "basic": false
+            },
+            {
+              "name": "echoscopie",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Bewegingsapparaat",
+          "items": [
+            {
+              "name": "nek (incl. wortelprikkeling)",
+              "basic": true
+            },
+            {
+              "name": "thorax (incl. clavicula, sternum, scapula, costa)",
+              "basic": true
+            },
+            {
+              "name": "rug (wervelkolom, incl. wortelprikkeling/Lasèque)",
+              "basic": true
+            },
+            {
+              "name": "schoudergordel, arm, elleboog, pols, hand",
+              "basic": true
+            },
+            {
+              "name": "bekken/heup (incl. beenlengte/verschil), knie, enkel, voet",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Huid",
+          "items": [
+            {
+              "name": "onderzoek huid, nagels, haren (beschrijving efflorescenties)",
+              "basic": true
+            },
+            {
+              "name": "KOH preparaat huid, haren, nagels",
+              "basic": false
+            },
+            {
+              "name": "stansbiopt",
+              "basic": true
+            },
+            {
+              "name": "shave biopt",
+              "basic": true
+            },
+            {
+              "name": "teledermatologie",
+              "basic": false
+            },
+            {
+              "name": "huidpriktest",
+              "basic": false
+            },
+            {
+              "name": "dermatoscopie",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Endocrien",
+          "items": [
+            {
+              "name": "BMI, MO (middelomtrek) bepalen",
+              "basic": true
+            },
+            {
+              "name": "glucose bepaling bloed",
+              "basic": true
+            },
+            {
+              "name": "onderzoek diabetische voet",
+              "basic": true
+            },
+            {
+              "name": "(de) hydratie toestand bepalen",
+              "basic": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "Therapie",
+      "groups": [
+        {
+          "name": "Algemeen",
+          "items": [
+            {
+              "name": "injectie sc/iv/im",
+              "basic": true
+            },
+            {
+              "name": "sc medicatie depot preparaat inbrengen",
+              "basic": true
+            },
+            {
+              "name": "BLS (met AED), handelingen bij bewusteloze (Rautek, stabiele zijligging)",
+              "basic": true
+            },
+            {
+              "name": "cardiopulmonale resuscitatie (adv life supp)",
+              "basic": true
+            },
+            {
+              "name": "hyposensibilisatie",
+              "basic": false
+            },
+            {
+              "name": "superviseren vaardigheid ",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Ogen",
+          "items": [
+            {
+              "name": "EHBO oogletsel (spoelen, medicatie,verband)",
+              "basic": true
+            },
+            {
+              "name": "behandeling hordeolum",
+              "basic": true
+            },
+            {
+              "name": "behandeling blefaritis ",
+              "basic": true
+            },
+            {
+              "name": "verwijdering corpus alienum ",
+              "basic": true
+            },
+            {
+              "name": "verwijderen roestring",
+              "basic": true
+            },
+            {
+              "name": "behandeling chalazion (curettage/injectie)",
+              "basic": false
+            },
+            {
+              "name": "massage/doorspuiten traankanaal",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Neus",
+          "items": [
+            {
+              "name": "verwijderen corpus alienum",
+              "basic": true
+            },
+            {
+              "name": "tamponeren bloeding",
+              "basic": true
+            },
+            {
+              "name": "cautherisatie locus Kiesselbachi",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Oor",
+          "items": [
+            {
+              "name": "reinigen gehoorgang (lavage, haakje/lus)",
+              "basic": true
+            },
+            {
+              "name": "verwijderen corpus alienum",
+              "basic": true
+            },
+            {
+              "name": "inbrengen tampon (gaas of merocel)",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Bloedsomloop",
+          "items": [
+            {
+              "name": "Handelingen bij tachycardie",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Longen",
+          "items": [
+            {
+              "name": "verwijderen corpus alienum (ook Heimlich)",
+              "basic": true
+            },
+            {
+              "name": "toedienen/instructie medicatie via inhalatie (voorzetkamer.verneveling)",
+              "basic": true
+            },
+            {
+              "name": "toedienen zuurstof",
+              "basic": true
+            },
+            {
+              "name": "intuberen",
+              "basic": false
+            },
+            {
+              "name": "tracheotomie",
+              "basic": false
+            },
+            {
+              "name": "naald spanningspneumothorax",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Abdomen",
+          "items": [
+            {
+              "name": "Incisie perianaal abces",
+              "basic": true
+            },
+            {
+              "name": "incisie getromboseerd hemorroïd",
+              "basic": false
+            },
+            {
+              "name": "ligatuur inwendig hemorroïd (Barron)",
+              "basic": false
+            },
+            {
+              "name": "ascitespunctie",
+              "basic": false
+            },
+            {
+              "name": "verwisselen katheter (supra pubis)",
+              "basic": true
+            },
+            {
+              "name": "verwisselen katheter (urethra ♀ en ♂)",
+              "basic": true
+            },
+            {
+              "name": "behandelen condylomata acuminata ([elektro]coagulatie/cryotherapie)",
+              "basic": true
+            },
+            {
+              "name": "inbrengen IUD (koperhoudend)",
+              "basic": true
+            },
+            {
+              "name": "inbrengen IUD (Mirena)",
+              "basic": true
+            },
+            {
+              "name": "afdraaien cervixpoliep",
+              "basic": false
+            },
+            {
+              "name": "inbrengen/wisselen pessarium",
+              "basic": true
+            },
+            {
+              "name": "aanmeten pessarium occlusivum",
+              "basic": false
+            },
+            {
+              "name": "verloskundige zorg",
+              "basic": false
+            },
+            {
+              "name": "circumcisie",
+              "basic": false
+            },
+            {
+              "name": "sterilisatie man",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Bewegingsapparaat",
+          "items": [
+            {
+              "name": "aanleggen vingerspalk (bij Malletvinger)",
+              "basic": true
+            },
+            {
+              "name": "aanleggen mitella/collar&cuff",
+              "basic": true
+            },
+            {
+              "name": "aanleggen zwachtel, drukverband",
+              "basic": true
+            },
+            {
+              "name": "aanleggen tape verband (enkel)",
+              "basic": true
+            },
+            {
+              "name": "injectie schouder (subacromiaal)",
+              "basic": true
+            },
+            {
+              "name": "Injectie schouder (gewricht)",
+              "basic": true
+            },
+            {
+              "name": "injectie elleboog (epicondyl)",
+              "basic": true
+            },
+            {
+              "name": "injectie elleboog (bursa olecrani)",
+              "basic": true
+            },
+            {
+              "name": "injectie pols (Quervain)",
+              "basic": true
+            },
+            {
+              "name": "injectie pols (CTS)",
+              "basic": true
+            },
+            {
+              "name": "injectie hand (triggerfinger)",
+              "basic": true
+            },
+            {
+              "name": "injectie heup (bursa trochanterica)",
+              "basic": true
+            },
+            {
+              "name": "injectie knie (bursa prepatelellaris)",
+              "basic": true
+            },
+            {
+              "name": "injectie knie (gewricht)",
+              "basic": true
+            },
+            {
+              "name": "punctie/injectie ganglion",
+              "basic": true
+            },
+            {
+              "name": "repositie luxatie (schouder)",
+              "basic": false
+            },
+            {
+              "name": "repositie luxatie (radiuskop/zondagsarmpje)",
+              "basic": true
+            },
+            {
+              "name": "repositie luxatie (vinger/teen)",
+              "basic": true
+            },
+            {
+              "name": "repositie luxatie (patella)",
+              "basic": false
+            },
+            {
+              "name": "behandeling fractuur (clavicula)",
+              "basic": false
+            },
+            {
+              "name": "behandeling fractuur (costa)",
+              "basic": true
+            },
+            {
+              "name": "behandeling fractuur (phalangen)",
+              "basic": false
+            },
+            {
+              "name": "Inbrengen/ verwijderen subcut. anticonceptie",
+              "basic": false
+            },
+            {
+              "name": "sclerosering varices",
+              "basic": false
+            }
+          ]
+        },
+        {
+          "name": "Huid",
+          "items": [
+            {
+              "name": "anesthesie (lokaal, Oberst)",
+              "basic": true
+            },
+            {
+              "name": "wondtoilet (incl. necrotomie)",
+              "basic": true
+            },
+            {
+              "name": "verwijderen verruca (scherpe lepel)",
+              "basic": true
+            },
+            {
+              "name": "verwijderen corpus alienum",
+              "basic": true
+            },
+            {
+              "name": "elektrocoagulatie",
+              "basic": true
+            },
+            {
+              "name": "cryotherapie (vloeibare N2)",
+              "basic": true
+            },
+            {
+              "name": "hechten wond/hechtingen verwijderen",
+              "basic": true
+            },
+            {
+              "name": "wondbehandeling/verbandleer",
+              "basic": true
+            },
+            {
+              "name": "behandeling brandwonden",
+              "basic": true
+            },
+            {
+              "name": "incisie/nabehandeling abces",
+              "basic": true
+            },
+            {
+              "name": "partiële nagelextractie, fenolisatie",
+              "basic": true
+            },
+            {
+              "name": "ontlasten sub-unguaal hematoom",
+              "basic": true
+            },
+            {
+              "name": "wigexcisie",
+              "basic": true
+            },
+            {
+              "name": "behandeling paronychia",
+              "basic": true
+            },
+            {
+              "name": "behandeling panaritium",
+              "basic": false
+            },
+            {
+              "name": "excisie naevus/benigne huidtumoren (+ PA)",
+              "basic": true
+            },
+            {
+              "name": "extirpatie atheroomcyste",
+              "basic": true
+            },
+            {
+              "name": "extirpatie lipoom",
+              "basic": true
+            },
+            {
+              "name": "behandeling ulcus cruris (ambulante compressie)",
+              "basic": true
+            }
+          ]
+        },
+        {
+          "name": "Palliatief",
+          "items": [
+            {
+              "name": "subctane pijnbestrijding",
+              "basic": null
+            },
+            {
+              "name": "epidurale pijnbestrijding",
+              "basic": null
+            },
+            {
+              "name": "inbrengen voedingssonde",
+              "basic": null
+            },
+            {
+              "name": "ascitespunctie",
+              "basic": null
+            },
+            {
+              "name": "palliatieve sedatie",
+              "basic": null
+            },
+            {
+              "name": "euthanasie",
+              "basic": null
+            }
+          ]
         }
       ]
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 071109b..5978c13 100644
--- a/src/index.css
+++ b/src/index.css
@@ -159,6 +159,7 @@ header h1 {
   margin-bottom: 0.5rem;
   border: 1px solid #eaeaea;
   background-color: #fafafa;
+  max-width: 40rem;
 }
 
 .legenda h2 {
@@ -214,7 +215,22 @@ table.form thead th {
   position: relative;
 }
 
+table.form.skills thead th {
+  max-width: 2rem;
+}
+
+table.form.skills thead th label {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  line-height: 2;
+}
+
 table.form thead th svg {
+  width: 1.4rem;
+  height: 1.4rem;
   vertical-align: middle;
 }
 
@@ -223,6 +239,17 @@ table.form tbody td {
   position: relative;
 }
 
+table.form.skills tbody td.skill-grade,
+table.form.skills tbody td.skill-name {
+  width: auto;
+  padding: 0.5rem;
+}
+
+table.form.skills tbody td.skill-grade label {
+  left: 0;
+  padding: 0.5rem;
+}
+
 table.form tbody td label {
   position: absolute;
   display: block;
@@ -270,6 +297,21 @@ table.form tr.selectable:hover {
   background: #fafafa;
 }
 
+table.form.skills .skillCategory {
+  font-size: 2rem;
+  font-weight: bold;
+  padding-left: 0;
+  border: none;
+}
+
+
+table.form.skills .skillGroup {
+  background: #DAECF3;
+  color: #3eacd6;
+  font-weight: bold;
+  border: none;
+}
+
 @media screen and (max-width: 768px) {
   table.form thead th {
     padding: 0.25rem;
@@ -349,8 +391,8 @@ table.form tr.selectable:hover {
   }
 }
 
-.save span,
-.save button {
+.actions span,
+.actions button {
   display: inline-block;
   background: #4472c4;
   color: #fff;
@@ -362,20 +404,20 @@ table.form tr.selectable:hover {
   margin: 0.5rem 0.5rem 0 0;
 }
 
-.save span svg,
-.save button svg {
+.actions span svg,
+.actions button svg {
   width: 1rem;
   height: 1rem;
   margin-right: 0.75rem;
   vertical-align: text-top;
 }
 
-.save span:hover,
-.save button:hover {
+.actions span:hover,
+.actions button:hover {
   background: #2e6ab3;
 }
 
-.save input {
+.actions input {
   display: none;
 }
 
diff --git a/src/usePersistence.ts b/src/usePersistence.ts
index 7f37047..c31ac59 100644
--- a/src/usePersistence.ts
+++ b/src/usePersistence.ts
@@ -2,17 +2,43 @@ import { useReducer } from 'preact/hooks';
 import rawData from './data.json';
 import { decode } from './util';
 
+const SKILLS_PATH = '/vaardigheden';
+
 export interface StorageState {
   levels: number[][];
   marked: boolean[][];
   notes: string;
+  skills: number[];
+  markedSkills: boolean[];
+  skillNotes: string;
 }
 
 export interface State {
+  skillMode: boolean,
   levels: string[];
   competences: string[];
   themes: Theme[];
   notes: string;
+  skillNotes: string;
+  skills: SkillCategory[];
+}
+
+export interface SkillCategory {
+  name: string;
+  groups: SkillGroup[];
+}
+
+export interface SkillGroup {
+  name: string;
+  items: Skill[];
+}
+
+export interface Skill {
+  index: number,
+  name: string;
+  basic: boolean;
+  value: boolean | null;
+  marked: boolean;
 }
 
 export interface Theme {
@@ -37,35 +63,60 @@ export interface PersistenceState {
   select: Select;
   mark: Mark;
   note: (content: string) => void;
+  selectSkill: (index: number, value: boolean | null) => void;
+  markSkill: (index: number, marked: boolean) => void;
+  noteSkill: (content: string) => void;
   setState: (state: State) => void;
+  navigate: (skillMode: boolean) => void;
 }
 
 export type ExperienceAction =
   | {
-      type: 'select';
-      theme: number;
-      experience: number;
-      level: number;
-    }
+    type: 'select';
+    theme: number;
+    experience: number;
+    level: number;
+  }
+  | {
+    type: 'mark';
+    theme: number;
+    experience: number;
+    marked: boolean;
+  };
+
+export type SkillAction =
+  | {
+    type: 'selectSkill';
+    index: number;
+    value: boolean | null;
+  }
   | {
-      type: 'mark';
-      theme: number;
-      experience: number;
-      marked: boolean;
-    };
+    type: 'markSkill';
+    index: number;
+    marked: boolean;
+  };
 
 export type Action =
   | ExperienceAction
+  | SkillAction
   | {
-      type: 'note';
-      content: string;
-    }
+    type: 'navigate';
+    skillMode: boolean;
+  }
   | {
-      type: 'state';
-      state: State;
-    };
+    type: 'note';
+    content: string;
+  }
+  | {
+    type: 'noteSkill';
+    content: string;
+  }
+  | {
+    type: 'state';
+    state: State;
+  };
 
-const data = rawData as State;
+export const data = rawData as State;
 
 export const MAX_LEVEL = data.levels.length - 1;
 
@@ -96,14 +147,45 @@ function updateState(
   };
 }
 
+function updateSkillState(
+  state: State,
+  index: number,
+  object: Record<string, boolean | null>
+): State {
+  return {
+    ...state,
+    skills: state.skills.map((skillCategory: SkillCategory)  => ({
+      ...skillCategory,
+      groups: skillCategory.groups.map((skillGroup: SkillGroup) => ({
+        ...skillGroup,
+        items: skillGroup.items.map((skill: Skill) => {
+          if (index === skill.index) {
+            return { ...skill, ...object };
+          }
+
+          return skill;
+        })
+      })),
+    })),
+  };
+}
+
 function reducer(state: State, action: Action): State {
   switch (action.type) {
+    case 'navigate':
+      return { ...state, skillMode: action.skillMode };
     case 'select':
-      return updateState(state, action, { level: action.level });
+      return updateState(state, action as ExperienceAction, { level: action.level });
     case 'mark':
-      return updateState(state, action, { marked: action.marked });
+      return updateState(state, action as ExperienceAction, { marked: action.marked });
+    case 'selectSkill':
+      return updateSkillState(state, action.index, { value: action.value });
+    case 'markSkill':
+      return updateSkillState(state, action.index, { marked: action.marked });
     case 'note':
       return { ...state, notes: action.content };
+    case 'noteSkill':
+      return { ...state, skillNotes: action.content };
     case 'state':
       return action.state;
     default:
@@ -112,12 +194,19 @@ function reducer(state: State, action: Action): State {
 }
 
 function initialState(): State {
+  const skillMode = window.location.pathname === SKILLS_PATH;
+
   const localState =
-    window.location.hash.slice(1) ||
+    (skillMode ? '' : window.location.hash.slice(1)) ||
     window.localStorage.getItem('persistence') ||
     '';
 
-  return decode(data, localState);
+  const skillLocalState =
+    (skillMode ? window.location.hash.slice(1) : '') ||
+    window.localStorage.getItem('skill-persistence') ||
+    '';
+
+  return decode(data, localState, skillLocalState, skillMode);
 }
 
 export default function usePersistence(): PersistenceState {
@@ -125,27 +214,21 @@ export default function usePersistence(): PersistenceState {
 
   return {
     state,
+    navigate: (skillMode: boolean) => {
+      window.location.pathname = skillMode ? SKILLS_PATH : '/';
+      dispatch({ type: 'navigate', skillMode });
+    },
     select: (theme: number, experience: number, level: number) =>
       dispatch({ type: 'select', theme, experience, level }),
     mark: (theme: number, experience: number, marked: boolean) =>
       dispatch({ type: 'mark', theme, experience, marked }),
     note: (content: string) => dispatch({ type: 'note', content }),
+    selectSkill: (index: number, value: boolean | null) =>
+      dispatch({ type: 'selectSkill', index, value }),
+    markSkill: (index: number, marked: boolean) =>
+      dispatch({ type: 'markSkill', index, marked }),
+    noteSkill: (content: string) => dispatch({ type: 'noteSkill', content }),
     setState: (state: State) => dispatch({ type: 'state', state: state }),
   };
 }
 
-export function upload(
-  input: HTMLInputElement,
-  setState: (state: State) => void
-) {
-  if (!input.files || !input.files[0]) {
-    return;
-  }
-
-  const reader = new FileReader();
-  reader.addEventListener('load', () => {
-    setState(decode(data, reader.result?.toString() || ''));
-    window.alert('Het bestand is succesvol geladen.');
-  });
-  reader.readAsText(input.files[0]);
-}
diff --git a/src/util.ts b/src/util.ts
index c5f0137..864051e 100644
--- a/src/util.ts
+++ b/src/util.ts
@@ -1,8 +1,22 @@
-import { State } from './usePersistence';
+import { data, State } from './usePersistence';
 
 const ENCODE_VERSION = 'e1';
 
-export function encode(state: State): string {
+export function encode(state: State, skillMode: boolean): string {
+  if (skillMode) {
+    const data = state.skills.reduce((acc, skillCategory) => {
+      const groups = skillCategory.groups.reduce((acc, skillGroup) => {
+        const items = skillGroup.items.reduce((acc, item) => {
+            return `${acc}${item.value === null ? '0' : (item.value ? '2' : '1')}${item.marked ? 'm' : ''}`;
+        }, '');
+        return `${acc}${items}`;
+      }, '');
+      return `${acc}${groups}`;
+    }, ENCODE_VERSION);
+  
+    return `${data}n${base64URLencode(state.skillNotes)}`;
+  }
+
   const data = state.themes.reduce((acc, theme) => {
     const exps = theme.experiences.reduce((acc, exp) => {
       return `${acc}${exp.level}${exp.marked ? 'm' : ''}`;
@@ -14,10 +28,14 @@ export function encode(state: State): string {
   return `${data}n${base64URLencode(state.notes)}`;
 }
 
-export function decode(data: State, input: string): State {
-  const populated = {
+export function decode(data: State, input: string, skillInput: string, skillMode: boolean): State {
+  let skillIndex = 0;
+
+  const populated: State = {
     ...data,
+    skillMode,
     notes: '',
+    skillNotes: '',
     themes: data.themes.map((theme) => ({
       ...theme,
       experiences: theme.experiences.map((experience) => ({
@@ -26,37 +44,73 @@ export function decode(data: State, input: string): State {
         marked: false,
       })),
     })),
+    skills: data.skills.map((skillCategory) => ({
+      ...skillCategory,
+      groups: skillCategory.groups.map((skillGroup) => ({
+        ...skillGroup,
+        items: skillGroup.items.map((item) => ({
+          ...item,
+          index: skillIndex++,
+          value: null,
+          marked: false,
+        })),
+      })),
+    })),
   };
 
-  if (input.slice(0, 2) !== ENCODE_VERSION) {
-    return populated;
-  }
-
-  let pos = 2;
+  if (input.slice(0, 2) === ENCODE_VERSION) {
+    let pos = 2;
 
-  for (const theme of populated.themes) {
-    if (input[pos] !== 's') {
-      break;
+    for (const theme of populated.themes) {
+      if (input[pos] !== 's') {
+        break;
+      }
+      pos += 1;
+  
+      for (const experience of theme.experiences) {
+        experience.level = parseInt(input[pos], 10);
+        pos += 1;
+  
+        if (input[pos] === 'm') {
+          experience.marked = true;
+          pos += 1;
+        }
+      }
     }
-    pos += 1;
 
-    for (const experience of theme.experiences) {
-      experience.level = parseInt(input[pos], 10);
+    if (input[pos] === 'n') {
       pos += 1;
+      populated.notes = base64URLdecode(input.slice(pos));
+    }
+  }
 
-      if (input[pos] === 'm') {
-        experience.marked = true;
-        pos += 1;
+  if (skillInput.slice(0, 2) === ENCODE_VERSION) {
+    let pos = 2;
+
+    for (const skillCategory of populated.skills) {
+      for (const skillGroup of skillCategory.groups) {
+        for (const item of skillGroup.items) {
+          let value = parseInt(skillInput[pos], 10);
+          if (value === 1) {
+            item.value = false;
+          } else if (value === 2) {
+            item.value = true;
+          }
+          pos += 1;
+    
+          if (skillInput[pos] === 'm') {
+            item.marked = true;
+            pos += 1;
+          }
+        }
       }
     }
-  }
 
-  if (input[pos] !== 'n') {
-    return populated;
+    if (skillInput[pos] === 'n') {
+      pos += 1;
+      populated.skillNotes = base64URLdecode(skillInput.slice(pos));
+    }
   }
-  pos += 1;
-
-  populated.notes = base64URLdecode(input.slice(pos));
 
   return populated;
 }
@@ -74,13 +128,17 @@ export function base64URLdecode(str: string): string {
 }
 
 export function saveStateLocal(state: State) {
-  window.localStorage.setItem('persistence', encode(state));
+  if (state.skillMode) {
+    window.localStorage.setItem('skill-persistence', encode(state, true));
+  } else {
+    window.localStorage.setItem('persistence', encode(state, false));
+  }
 
   window.alert('De huidige staat is opgeslagen in de browser.');
 }
 
 export async function copyLink(state: State) {
-  window.location.hash = `#${encode(state)}`;
+  window.location.hash = `#${encode(state, state.skillMode)}`;
   await navigator.clipboard.writeText(window.location.href);
 
   window.alert(
@@ -88,10 +146,27 @@ export async function copyLink(state: State) {
   );
 }
 
+export function upload(
+  input: HTMLInputElement,
+  setState: (state: State) => void
+) {
+  if (!input.files || !input.files[0]) {
+    return;
+  }
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    setState(decode(data, reader.result?.toString() || '', '', false));
+    window.alert('Het bestand is succesvol geladen.');
+  });
+  reader.readAsText(input.files[0]);
+}
+
+
 export function downloadFile(state: State) {
   const link = document.createElement('a');
   link.setAttribute('download', 'ervaringskompas.txt');
-  const blob = new Blob([encode(state)], { type: 'text/plain' });
+  const blob = new Blob([encode(state, false)], { type: 'text/plain' });
   link.href = window.URL.createObjectURL(blob);
   document.body.appendChild(link);
   link.click();