Fase 3 · Ontwikkelen & personaliseren

Map: het gegenereerde project · Vraag: hoe wordt dit skelet een product?

De scaffolder levert iets dat draait maar niets doet. Deze fase vult het: businesslogica in de seams, schermen uit de user stories, een eigen merk over het design system, en de kwaliteitspoorten die bepalen of het af is.

Deze fase staat niet in SEIFER.md

SEIFER.md kent drie stages en vat dit werk samen als "een mens vult velden/logica in de seams". In de praktijk is het de fase met het meeste werk en de meeste skills. Deze pagina benoemt hem expliciet; de stage-indeling van SEIFER.md verandert er niet door — het werk gebeurt in het artefact van stage 2 (app/).

Het werk plannen

kanban-management

Zet de user stories uit spoor 3 en de user journeys om in één kanban.md in de projectroot — de single source of truth voor de ontwikkelstatus.

• Analyseert dependencies en stelt een numerieke prioriteitsvolgorde voor als die ontbreekt.
• TODO / DOING / DONE, handmatig te bewerken door stories te verplaatsen.
• Bij een herhaalde run reconcilieert het iteratief met de gebruiker: nieuwe stories, verwijderde, statusconflicten, gewijzigde dependencies.
• Stopt bij circulaire dependencies en vraagt je de bron te repareren — het verzint geen volgorde omheen.

Op verzoek rendert het drie projecties: voortgangspercentage, kanban-bord en een dependency-flowchart.

kanban-worker

De autonome variant: pakt het bovenste onblokkeerde TODO-item, kondigt de keuze en de gekozen skill met redenering aan, verplaatst naar DOING, voert uit via de juiste bestaande skill, en zet naar DONE bij succes of rolt terug naar TODO bij falen. Daarna opnieuw.

Stopt wanneer TODO leeg is, een item op geen enkele skill mapt, of werk faalt. Eindigt altijd met het gerenderde bord.

Bouwen

vue-development — de TDD-lus

De kernskill van deze fase. Geen "schrijf een component", maar een vaste volgorde:

1. UNDERSTAND  → user story + Gherkin-acceptatiecriteria parsen
2. TEST FIRST  → falende unit tests schrijven (Vitest + Vue Test Utils)
3. IMPLEMENT   → minimale code om ze te laten slagen
4. REFACTOR    → opschonen met de tests groen
5. QA CHECK    → toetsen aan de Vue-checklist
6. E2E WRITE   → Playwright-tests genereren uít de Gherkin-AC
7. E2E RUN     → draaien en verifiëren dat alle AC slagen
8. REPORT      → JSON-rapport voor de volgende agent

Waarom dit de naad met fase 1 sluit

Stap 6 genereert de E2E-tests uit de acceptatiecriteria die acceptance-criteria-writing in spoor 3 heeft geschreven. De ideation-fase levert daarmee direct de testbasis — de criteria zijn niet decoratief.

Ontbreekt de story, de acceptatiecriteria of de scope, dan gaat de skill in interview-modus en vult het aan vóór er code komt.

build-prototype-by-design-system

Genereert een runnende Vue 3 / Nuxt 3-prototype van een multi-page flow in /app, uit de upstream-artefacten: journeys, stories, personas, business case.

Gebruikt alleen design-system-componenten en tokens. Heeft het een component nodig dat er niet is, dan flagt het dat onder app/components/custom/ in plaats van stilletjes iets te improviseren.

Personaliseren

Hier wordt het merkneutrale design system een specifiek product. De volledige uitleg staat op Design system; dit zijn de skills.

Skill	Doet
rebrand	Nieuwe visuele identiteit via één bestand: tokens/brand.json. Palet, fonts, radius-schaal, schaduwdiepte, gradients.
apply-preset	Een benoemd preset toepassen — warm-dtc, minimalist-saas, serious-fintech
theme-manager	De volledige theme-lifecycle: thema's aanmaken en onderhouden, WCAG-contrast valideren, pariteit auditen (heeft elk thema dezelfde tokenkeys?), en een thema extraheren uit een afbeelding of URL
add-component	Een component toevoegen volgens het canonieke patroon
test-component	Unit-contract, logica, Playwright per-component-spec via de /isolate-route, en axe-matrixdekking

De rebrand-verificatiestap wordt vaak overgeslagen

Na npm run build:tokens hoort er een controle: lees dist/css/tokens.css en grep naar de hexcodes van het vorige primaire ramp. Blijft er iets staan, dan lekt er ergens een brand-vorm door — meestal een directe primitive-referentie in tokens/components/*.json die een semantische ref had moeten zijn.

Kwaliteit bewaken

Skill	Toetst tegen
software-quality-assessment	ISO/IEC 25010:2023 — 9 karakteristieken, ~40 sub-karakteristieken, met ISO/IEC 25023-maten waar afleidbaar. Levert een scorekaart met file:line-bewijs en severity per bevinding.
owasp-security-audit	OWASP Top 10, multi-agent
ncsc-security-audit	NCSC ICT-beveiligingsrichtlijnen — technisch rapport én stakeholder-rapport
accessibility-requirements	WCAG 2.2 AA (default) of AAA, EN 301 549, EAA-verplichtingen
test-strategy-plan · test-automation-strategy · coverage-analysis · non-functional-test-planning	De teststrategie zelf
quality-gate-definition · definition-of-ready-done	Wanneer iets af is

Refactoren

ts-refactor-logic · js-refactor-logic · vue-refactor-logic · vue-reorder — per taal en framework, voor code-splitting, patronen en leesbaarheid.

Vastleggen

Skill	Doet
write-frontend-documentation	Onderzoekt de frontend end-to-end (framework, routing, state, styling, API, build/deploy, tests), stelt een goedkeuringsgated plan voor en genereert dan pas. Bestaande docs worden gearchiveerd, nooit blind overschreven.
write-backend-documentation	Idem voor de backend: taal, framework, API-surface, datalaag, background processing, auth, config, observability, build/deploy, tests.
readme-generator · documentation-generator	README's en projectdocumentatie
adr-writing	Architecture Decision Records met supersession-keten
git-commit	Committen en pushen

Beide documentatie-skills schrijven één README.md in de root die naar een documentation/-boom wijst met UPPERCASE-bestandsnamen, gericht op zowel ontwikkelaars als LLM-agents. Er wordt niets geschreven voordat je het plan goedkeurt — dezelfde gate-logica als de rest van de keten.

Gate 3

Voordat deployment begint:

Voorwaarde	Bewijs
Alle acceptatiecriteria groen	Playwright-run uit vue-development stap 7
Kwaliteitsdrempel gehaald	software-quality-assessment-scorekaart
Geen openstaande security-bevindingen	OWASP- en/of NCSC-rapport
Toegankelijkheid getoetst	axe-matrix + handmatige checks
kanban.md leeg aan de TODO-kant	Het bord zelf

Volgende

→ Naad B · scaffolder → deployment