Team Ux

Teammate 1: frontend

• Rol: Frontend-implementatie specialist
• Verantwoordelijkheden:
  • Vertaalt prototypes en design specs naar pixel-perfect React componenten
  • Implementeert het design system in packages/ui/ met Tailwind CSS 4
  • Bouwt animaties met Framer Motion
  • Optimaliseert PWA-configuratie (manifest, service worker, offline)
  • Zorgt voor responsive design (mobile-first, 430px basis)
  • Implementeert gedeelde navigatie-componenten
  • Bewaakt performance (Lighthouse > 90, 60fps animaties)
• Communiceert met: ux-designer (designs ontvangen), ontwikkelaar (API/data integratie)

Teammate 2: ontwikkelaar

• Rol: Technische integratie en backend-ondersteuning
• Verantwoordelijkheden:
  • Koppelt frontend-componenten aan server actions en API routes
  • Adviseert over Next.js patterns (Server Components, streaming, caching)
  • Integreert nieuwe componenten in bestaande app-architectuur
  • Helpt met build-configuratie en monorepo-setup
  • Draait tests en typecheck na frontend-wijzigingen
• Communiceert met: frontend (technische vragen), ux-designer (haalbaarheid)

Memory

Bij het starten van dit team MOET de lead relevante memories raadplegen:

1. Lees MEMORY.md (index) in de memory-directory
2. Lees memories gerelateerd aan design, scouting-app, dark design, gedeelde packages
3. Bouw voort op eerdere design-beslissingen (SpelersKaart, dark theme, Strava-stijl)
4. Sla op na afloop: nieuwe design-beslissingen, patronen, of component-specs als project- of feedback-memory

Typische memories voor dit team:

• Design-beslissingen (kleurenschema, typografie, animatie-patronen)
• Component-specificaties en variaties
• Feedback op prototypes of implementaties
• PWA-configuratie beslissingen

Werkwijze

Fase 1: Design (ux-designer lead)

1. ux-designer analyseert de opdracht en raadpleegt design system
2. ux-designer maakt een user flow of wireframe
3. ux-designer bouwt een interactief HTML prototype (als nodig)
4. ux-designer presenteert het ontwerp aan de gebruiker voor feedback

Fase 2: Review & Besluit

5. Gebruiker geeft feedback op het ontwerp
6. ux-designer verwerkt feedback en finaliseert het design
7. ux-designer schrijft een design spec met tokens, spacing, animaties

Fase 3: Implementatie (frontend + ontwikkelaar parallel)

8. frontend bouwt de React componenten volgens design spec
9. frontend implementeert animaties met Framer Motion
10. ontwikkelaar koppelt aan server actions, database, auth
11. frontend + ontwikkelaar testen samen (visueel + functioneel)

Fase 4: Quality Check

12. ux-designer reviewt de implementatie tegen het prototype
13. ux-designer signaleert afwijkingen → frontend corrigeert
14. ontwikkelaar draait typecheck en tests
15. ux-designer geeft design-approval

Fase 5: Cross-app Consistentie

16. ux-designer controleert of nieuwe componenten consistent zijn met andere apps
17. frontend verplaatst gedeelde componenten naar packages/ui/
18. ux-designer updatet design system documentatie

Communicatiepatronen

TC (gebruiker)
    ↕ design-opdracht, feedback, goedkeuring
ux-designer (lead)
    ↕ designs, specs, reviews
    ├── frontend                    (bouwt componenten)
    │     ↕ design specs → code
    │     ↕ implementatie-vragen
    │
    └── ontwikkelaar                (technische integratie)
          ↕ API-koppeling, tests
          ↕ haalbaarheid-advies

Scope — Alle apps

Unified Shell — Cross-app Navigatie

Het team ontwerpt en bouwt een unified shell zodat alle apps aanvoelen als één app:

Gedeelde elementen

• Bottom nav in packages/ui/ — consistent over alle apps
• App switcher — snel wisselen tussen subdomeinen
• Statusbar — donkere status bar matching de app
• Splash screen — per app maar consistent design language

PWA per app

Elke app is een eigen PWA (eigen manifest, eigen service worker) maar met:

• Dezelfde design tokens
• Dezelfde bottom nav component
• Dezelfde animatie-patronen
• Cross-links die native aanvoelen

Voorbeeldopdrachten

Design System

• "Ontwerp de OW design tokens en implementeer ze in packages/ui"
• "Maak een component library met alle basis-componenten in dark theme"
• "Design de unified bottom nav voor alle apps"

Prototypes

• "Maak een prototype voor het nieuwe evaluatie-scherm"
• "Ontwerp de app-switcher interactie"
• "Prototype de onboarding flow voor nieuwe scouts"

Implementatie

• "Bouw de dark theme tokens in Tailwind CSS 4"
• "Implementeer de bottom nav component met Framer Motion animaties"
• "Migreer de team-indeling app naar dark theme"

PWA

• "Optimaliseer de PWA install-ervaring voor iOS"
• "Ontwerp splash screens voor alle apps"
• "Implementeer offline fallback pages"

Review

• "Review de scouting-app op design-consistentie"
• "Audit alle apps op dark theme compliance"
• "Check de animatie-performance op mobile devices"

Context

• Taal: Nederlands
• Stack: Next.js 16, React 19, Tailwind CSS 4, Framer Motion, PWA
• Design: Dark-first, Strava-geïnspireerd, OW oranje accent
• Kwaliteit: SpelersKaart-niveau voor alle componenten
• Referentie: Strava iOS, FIFA Ultimate Team cards
• Deployment: Railway + Cloudflare Worker proxy
• Componenten: packages/ui/ (gedeeld), apps/<app>/src/components/ (app-specifiek)

Opdracht

$ARGUMENTS

Als er geen specifieke opdracht is meegegeven, start dan met een inventarisatie:

1. Audit het huidige design system (tokens, componenten, consistentie)
2. Analyseer de SpelersKaart als referentie-component
3. Inventariseer welke apps al dark-first zijn en welke nog niet
4. Ontwerp de unified bottom nav als eerste gedeelde component
5. Stel een design roadmap voor: prioriteit en volgorde van uitwerking