Kies het uiterlijk van je website

# Werkafspraken voor de website

Dit project volgt de websitebrief en acceptatiecriteria die met de eigenaar zijn afgesproken. Gebruik de bestaande technische keuzes, tenzij een concrete eis om een wijziging vraagt.

## Werkwijze

- Leg bij een grote functie vóór de bouw de voorgestelde wijzigingen en het controleplan uit. Rond toegestaan lokaal werk af in kleine stappen die de eigenaar kan beoordelen.
- Lees de bestanden die bij de taak horen. Houd andere pagina’s en instellingen intact.
- Leg nieuwe technische termen in gewone taal uit wanneer je aan de eigenaar rapporteert.
- Gebruik de skills website-design, clean-code, website-testing en website-security uit de repository wanneer hun werkwijzen van toepassing zijn.
- Leg belangrijke beslissingen en ontbrekende inhoud vast in de projectnotities. Verzin geen bedrijfsfeiten, aanbevelingen of publicatierechten.

## Controle

- Bekijk package.json om de echte commando’s voor bouwen, typecontrole en tests te vinden. Verzin geen geslaagde controle en maak geen betekenisloze test alleen om een commando te laten slagen.
- Voer controles uit die bij de wijziging passen. Lokale tests gebruiken tijdelijke testgegevens en hebben geen toegang tot productie; voer ze uit en herstel fouten door de gevraagde wijziging zonder bij elke stap toestemming te vragen.
- Controleer bezoekersinteracties in een browser wanneer browserhulpmiddelen beschikbaar zijn. Meld controles die onbeschikbaar of onvolledig blijven.
- Toon de eigenaar een werkende lokale preview en vat veranderd gedrag, bewijs en resterende beperkingen samen.

## Toegangsgegevens en publicatie

- Houd API-sleutels en andere geheimen buiten browsercode, prompts, logboeken en Git. Bewaar lokale geheimen in genegeerde bestanden of de gekozen beveiligde opslag.
- Lokaal bouwen en testen is toegestaan. De site publiceren, een echt bericht versturen, een betaling verwerken of productiegegevens wijzigen vereist toestemming van de eigenaar voor die handeling.
- Bewaar vóór publicatie een herstelbare werkende versie. Beschrijf hoe je die terugzet.

Dit zijn basisafspraken voor een nieuw oefenproject. Pas ze aan de echte eisen en al gegeven toestemming van de eigenaar aan.

---
name: website-design
description: Ontwikkel of verfijn de visuele richting en responsive interface van een website vanuit de brief, inhoud en het bestaande ontwerp. Gebruik voor paginaontwerp of visuele bouw.
---

Lees de websitebrief en bestaande ontwerpnotities voor de gevraagde pagina. Werk binnen de merkkeuzes, inhoud en technische keuzes van de gebruiker.

Stel bij een nieuwe richting letterkeuzes, een klein kleurenpalet, vaste afstanden en een voorbeeldpagina voor. Leg uit hoe deze keuzes de doelgroep en de hoofdactie van bezoekers ondersteunen. Gebruik echte inhoud om de volgorde van aandacht en regellengtes te beoordelen.

Maak herbruikbare onderdelen voor navigatie, koppen, knoppen en herhaalde inhoud. Geef hoofdacties een duidelijke visuele nadruk. Behoud zichtbare toetsenbordfocus, leesbaar contrast en bruikbare labels. Ontwerp smalle schermen naast desktopschermen; controleer lange koppen, navigatie en aanraakvlakken in een browser.

Gebruik betekenisvolle HTML voordat je aangepaste interactie toevoegt. Maak beweging optioneel en respecteer de voorkeur voor minder beweging. Gebruik materiaal waarvoor publicatierechten bekend zijn en noteer de bronnen. Verzin geen klantbeoordelingen, prestaties of bedrijfsfeiten.

Toon vóór uitbreiding naar alle pagina’s de eerste complete pagina op desktop- en telefoonbreedte. Beschrijf de belangrijkste ontwerpkeuzes en ontbrekende inhoud. Is een browserhulpmiddel onbeschikbaar? Meld dan dat visuele controle nog moet gebeuren.

---
name: clean-code
description: Bouw of herstructureer websitecode tot begrijpelijke onderdelen met de bestaande techniek en afspraken van het project. Gebruik voor websitebouw of onderhoudbaarheid.
---

Lees de relevante bestanden en pakketscripts voordat je een aanpak kiest. Behoud werkend gedrag buiten de gevraagde wijziging. Gebruik bij voorkeur de bestaande techniek en pakketten als die aan de behoefte voldoen.

Houd pagina-inhoud apart van herhaalde opmaak wanneer dat bewerken makkelijker maakt. Geef onderdelen, variabelen en functies namen die hun doel beschrijven. Gebruik gedeelde onderdelen voor herhaalde navigatie en pagina-elementen; maak geen abstractie voor één eenvoudig gebruik.

Verwerk lege, ongeldige, ladende en fouttoestanden bij interacties die dat nodig hebben. Gebruik standaard browserbediening en betekenisvolle HTML wanneer die de interactie ondersteunen. Vermijd nep-formulierverzending, nagebootste succesmeldingen en dode links.

Gebruik typecontrole en de opmaak- of lintregels van het project waar die zijn ingesteld. Leg bij een nieuw pakket het doel en nieuwe onderhouds- of gebruikseisen uit. Houd gegenereerde bouwbestanden, geïnstalleerde pakketten en lokale omgevingsbestanden buiten versiebeheer.

Voer bestaande controles uit die bij de wijziging passen, inclusief een productiebuild wanneer het resultaat kan veranderen. Vat veranderd gedrag, controleresultaten en resterende beperkingen samen. Leg de belangrijkste bestanden in gewone taal uit, zodat een beginner de inhoud kan vinden en aanpassen.

---
name: website-testing
description: Controleer websitewijzigingen met bezoekersroutes, passende automatische tests en browsercontroles. Gebruik bij websitetests, onderzoek naar fouten of voorbereiding op publicatie.
---

Begin met de brief en zichtbare acceptatiecriteria. Bekijk bestaande test- en bouwcommando’s; neem niet aan dat een script bestaat. Kies controles op basis van veranderd gedrag en de gevolgen van een fout.

Doorloop de hoofdroute voor bezoekers en betrokken links, navigatie en formulieren. Neem ongeldige invoer en relevante fouttoestanden mee. Controleer bij een contactformulier echte bezorging op de afgesproken testbestemming voordat je meldt dat het werkt. Leg bij een e-maillink uit dat die het ingestelde mailprogramma van de bezoeker opent en niet automatisch een bericht verstuurt.

Controleer smalle en brede schermen in een browser. Neem toetsenbordnavigatie, zichtbare focus, toegankelijke namen, zoom en horizontaal overlopen mee. Automatische toegankelijkheidsresultaten vullen deze handmatige controles aan en bewijzen geen volledige toegankelijkheidsnaleving.

Voeg automatische tests toe voor belangrijk gedrag of aangetoonde terugkerende fouten. Test zichtbare resultaten en betekenisvolle foutgevallen; vermijd tests die alleen de geschreven code herhalen of toevallige formuleringen vergelijken. Gebruik tijdelijke testgegevens en lokale testbestanden. Verstuur nooit echte berichten, voer geen betalingen uit en wijzig geen productiegegevens zonder toestemming van de gebruiker.

Reproduceer een fout, herstel de oorzaak en voer betrokken controles opnieuw uit. Meld uitgevoerde commando’s, resultaten, browsercontroles en alles wat niet is gecontroleerd. Een geslaagde build toont dat de site kan worden gemaakt; controleer bezoekersgedrag apart. Meld nooit dat een controle geslaagd is als die is overgeslagen of onbeschikbaar was.

---
name: website-security
description: Controleer geheimen, pakketten, invoer, toegang en publicatie-instellingen van een website en herstel bevindingen binnen de afgesproken taak. Gebruik voor gevraagde beveiligingscontrole of voorbereiding op publicatie.
---

Breng de relevante onderdelen van de site in kaart: statische pagina’s, formulieren, backend-routes, aanmelding, scripts van derden en opgeslagen gegevens. Beperk de controle tot de echte technische opzet en de toegestane omgeving.

Houd toegangsgegevens buiten browsercode, logboeken, prompts en Git. Maak onderscheid tussen openbare instellingen tijdens de build en servergeheimen. Is een sleutel als commit opgeslagen of blootgesteld? Gebruik hem niet meer, leg uit dat het bestand verwijderen de sleutel niet intrekt en laat de eigenaar hem vóór verder gebruik intrekken of vervangen. Toon de toegangsgegevens niet in je verslag.

Bekijk relevante beveiligingswaarschuwingen voor pakketten en beoordeel of het betrokken pakket en het kwetsbare gedrag worden gebruikt. Herstel binnen compatibele versies en voer de betrokken controles opnieuw uit. Vermijd automatische geforceerde upgrades die de website kunnen breken.

Controleer bij backend-interacties de invoer op de server, geef uitvoer passend gecodeerd weer en controleer aanmelding en toegangsrechten afzonderlijk. Overweeg misbruikbeperking voor openbare formulieren of AI-toegangspunten. Een OpenAI API-sleutel hoort op de server; een statische site publiceren biedt geen geheime serveromgeving.

Controleer HTTPS en relevante beveiligingsheaders bij de echte hosting. Verzamel alleen gegevens die de functie nodig heeft en leg hun bestemming en bewaartermijn uit. Claim geen wettelijke naleving op basis van een codescan.

Meld elke bevinding met locatie, aannemelijke impact, herstel en controle. Beschrijf de reikwijdte, gebruikte hulpmiddelen, openstaande bevindingen en ontoegankelijke onderdelen. Een schone scan is bewijs binnen het bereik van die scan, geen garantie dat de website geen kwetsbaarheden heeft. Scan geen systemen van derden en publiceer geen wijzigingen buiten de toegestane taak.