docs: make readme user-first with product screenshots

docs/ai/BACKLOG.yaml

@@ -2133,6 +2133,40 @@ tasks:
   - Niet uitvoeren binnen huidige scope.
   primary_paths:
   - docs/product/SCOPE_AND_NON_GOALS.md
+- id: VR-224
+  title: Maak de repository-README functioneel en user-first met actuele screenshots
+  status: done
+  priority: P1
+  requirement_ids:
+  - NFR-008
+  - NFR-009
+  depends_on:
+  - VR-223
+  summary: Herbouw de repository-ingang rond het gebruikersprobleem, de dagelijkse workflow en een veilige quickstart,
+    ondersteund door compacte actuele productbeelden uit de echte server-rendered cockpit.
+  acceptance_criteria:
+  - De README begint bij doel, doelgroep en dagelijkse gebruikersflow; installatie, beheer, architectuur en agentoverdracht
+    volgen in een duidelijke progressieve volgorde zonder bestaande essentiële informatie te verliezen.
+  - Minstens vier actuele screenshots tonen verschillende functionele hoofdschermen, desktop en mobiel en dark/light;
+    ze bevatten geen secrets of persoonlijke gegevens en zijn lokaal, geoptimaliseerd en correct gelinkt.
+  - Quickstarts, poorten, lokale credentials, veiligheidsgrenzen en operationele documentatielinks zijn aantoonbaar
+    correct en maken duidelijk wat demo-, ontwikkel- en productiegebruik betekent.
+  - README-links en repositorydocumentatie valideren, de beelden zijn visueel gecontroleerd zonder overflow of consolefouten
+    en de volledige kwaliteitsgate slaagt.
+  verification:
+  - Browsercontrole van de vastgelegde routes en viewports
+  - python scripts/validate_repository.py
+  - ./scripts/codex_verify.sh
+  primary_paths:
+  - README.md
+  - docs/screenshots/readme/
+  - docs/quality/TRACEABILITY_MATRIX.md
+  - docs/ai/PROJECT_STATE.md
+  result:
+    completed_at: '2026-07-27'
+    note: User-first README met gecontroleerde quickstarts en vier actuele dark/light desktop-/mobielscreenshots;
+      browsermatrix zonder overflow of consolewaarschuwingen, repositoryvalidatie groen en volledige gate met 268
+      tests, 2 skips en 83,48% dekking.
 - id: VR-302
   title: Automatisch sollicitaties invullen of versturen
   status: deferred

docs/ai/PROJECT_STATE.md

@@ -34,6 +34,13 @@ Het volledige scherm- en afwijkingsrapport staat in `docs/design/STITCH_INTEGRAT
 
 ## Laatste onderhoudsaudit
 
+VR-224 op 2026-07-27:
+
+- README volledig herordend rond doelgroep, dagelijkse workflow, concrete productwaarde, veilige quickstart en eerste configuratie; architectuur, beheer en Codex-overdracht volgen pas daarna;
+- vier actuele lokale screenshots toegevoegd voor dagoverzicht, vacatureverkenner, automatisering en mobiel zoekprofiel, samen minder dan 330 kB en zonder secrets of persoonlijke gegevens;
+- browsercontrole op 1600×1000 en 390×844 in dark/light toont geen horizontale overflow of consolewaarschuwingen; repositorylinks en configuratiedocumentatie valideren;
+- volledige gate groen met 268 geslaagde tests, 2 optionele skips en 83,48% branch-aware dekking. Volgende uitvoerbare taak: geen.
+
 VR-223 op 2026-07-27:
 
 - VacatureRadar-logo verfijnd tot een transparante vier-elementenradar zonder donkere tegel, rand of schaduw; login en sidebar delen dezelfde schaalbare SVG;

docs/quality/TRACEABILITY_MATRIX.md

@@ -63,7 +63,7 @@ Legenda: **I** = geïmplementeerd en getest in de huidige MVP; **P** = gedeeltel
 | NFR-005 | I | domeinapps/services/adapters/ADRs | continue review |
 | NFR-006 | I | offline pytest + coveragegate | VR-114 verbreedt e2e |
 | NFR-007 | P | `scripts/benchmark.py`, `tests/benchmark/test_benchmark.py` | VR-116 |
-| NFR-008 | I | volledige negen-schermen-Stitch-cockpit, acht viewports, dark/light, toetsenborddrawer, premium visuele hiërarchie, zelfstandig VacatureRadar-productmerk, lokale ITWorx-ontwikkelaarscredit en toegankelijke interactieve radarillustratie | `tests/e2e/test_vr114_browser_and_accessibility.py`, `tests/integration/test_intelligence_views.py`, `tests/integration/test_views.py`, `artifacts/visual-validation/`, VR-209–213, VR-216–221 |
+| NFR-008 | I | volledige negen-schermen-Stitch-cockpit, acht viewports, dark/light, toetsenborddrawer, premium visuele hiërarchie, zelfstandig VacatureRadar-productmerk, lokale ITWorx-ontwikkelaarscredit, toegankelijke interactieve radarillustratie en actuele user-first productdocumentatie | `tests/e2e/test_vr114_browser_and_accessibility.py`, `tests/integration/test_intelligence_views.py`, `tests/integration/test_views.py`, `artifacts/visual-validation/`, `docs/screenshots/readme/`, VR-209–224 |
 | NFR-009 | I | lokale SQLite, configureerbare eigenaarbranding, Docker/Unraidconfig, gevalideerde SSH-deployalias, release-smoke en restore | `tests/unit/test_deployment_configuration.py`, VR-117, VR-217/218 afgerond |
 | NFR-010 | I | `apps/sources/services/health.py`, `apps/sources/tasks.py`, `apps/core/views.py`, `config/settings.py` | `tests/integration/test_source_health.py` | VR-112 observability |
 
@@ -110,3 +110,4 @@ Iedere backlogtaak die een requirement wijzigt, werkt in dezelfde commit deze ma
 - VR-219 verankert alle hoofdsecties op één ultrawide grid, begrenst paneelverhoudingen voor leesbaarheid en maakt `Personal intelligence by Jens` tot de consistente productlock-up op publieke en ingelogde schermen.
 - VR-220 vervangt die tijdelijke tekstlock-up door de aangeleverde officiële ITWorx.tech-wordmark en een exact daaruit afgeleid cloud-check-appicoon voor browser, shell en Dockerman; VacatureRadar blijft de productnaam.
 - VR-221 corrigeert de merkarchitectuur: VacatureRadar krijgt een zelfstandig radar-/kansbeeldmerk voor alle productcontactpunten en ITWorx.tech blijft uitsluitend zichtbaar als officiële secundaire ontwikkelaarscredit.
+- VR-224 maakt de repository-ingang user-first: de README volgt de dagelijkse productflow, bevat gecontroleerde lokale quickstarts en gebruikt vier actuele dark/light- en desktop/mobielscreenshots zonder secrets of externe assets.