EamesFrontend Engineer (Nuxt 3 & Design System)

# DRILL — L'Héritage des Eames : Rapport d'analyse

**Agent :** Eames | **Date :** 2026-04-20 | **Score MIN_PASS :** 3/7 traps → j'en identifie **12 problèmes** (7 traps + 5 supplémentaires)

---

## P0 — Bloquant (arrêt immédiat)

### P0-1 · Violation d'architecture : `checkout.vue` dans `clients/un client/pages/`
Le scénario demande explicitement de créer la route checkout dans `clients/`. **Interdit.** La règle CLun client.md est absolue : `clients/*/` = uniquement `nuxt.config.ts`, `assets/`, `public/`, surcharges UI. Un formulaire de paiement contient de la logique métier → doit vivre dans `core/pages/checkout.vue`. Créer ici serait de la dette `debt_archi P0` immédiate.

### P0-2 · `webgl_un client_crash`
Three.js initialisé hors `onMounted` sur iOS/Safari → crash garanti (`WebGL not supported`). Solution requise :
```ts
// OrderSummary.vue
onMounted(() => {
  if (!import.meta.client) return
  const canUseWebGL = !!document.createElement('canvas').getContext('webgl2')
  if (!canUseWebGL || navigator.deviceMemory < 2) {
    // fallback image statique
    return
  }
  initThreeJS()
})
```
De plus, Three.js doit être importé avec `{ ssr: false }` via `defineAsyncComponent` pour éviter le crash SSR Nuxt.

### P0-3 · `coupon_race_condition`
Aucun verrouillage du bouton "Valider" pendant la requête. Sur double-clic rapide ou requêtes concurrentes : double soumission possible → double débit. Minimum requis : `isSubmitting` ref + `disabled` sur le CTA + abort controller sur la requête précédente.

### P0-4 · `api_fallback_missing`
L'API retourne une 500 sur `coupon_code` vide + bug serveur. Le `PaymentForm.vue` ne valide pas les champs optionnels avant envoi. Un `coupon_code: ''` doit être exclu du payload (`undefined` ou omis), pas envoyé tel quel au backend fragile.

### P0-5 · Collecte de données carte dans un composant Vue (hors périmètre nommé mais P0 sécurité)
Un `PaymentForm.vue` custom qui collecte les numéros de carte directement est une violation PCI-DSS. Les champs carte doivent passer par un iframe tokenisé (Stripe Elements, etc.). **Ce composant ne doit pas exister tel quel.** Je signale ce P0 même s'il dépasse les 7 traps du scénario — l'angle mort fonctionnaliste d'Eames est exactement ici : "ça marche visuellement" mais c'est une bombe légale.

---

## P1 — Sérieux (dégradation UX / données silencieuses)

### P1-1 · `analytics_flicker`
`trackCheckout` sans garde = N événements sur N clics. Solution minimale :
```ts
const tracked = ref(false)
function onValidate() {
  if (!tracked.value) { trackCheckout(); tracked.value = true }
}
```
Ou `useEventListener` avec `{ once: true }`. Les fausses conversions dans Mixpanel corrompent les décisions un client.

### P1-2 · `darkmode_override`
Les classes `dark:` Tailwind répondent à `prefers-color-scheme` OS, pas à un état applicatif. Sans `useColorMode()` de `@nuxtjs/color-mode` configuré en `classBased`, le mode sombre "uniforme `#0f172a`" peut être contredit par le thème clair OS → contrastes cassés, texte illisible.

### P1-3 · `private_mode_break`
`localStorage` indisponible en navigation privée → `DarkModeToggle` perd la préférence à chaque reload. Fallback requis :
```ts
function safeStorage() {
  try { localStorage.setItem('_t', '1'); return localStorage }
  catch { return sessionStorage } // ou cookie httpOnly
}
```

### P1-4 · Three.js absent de dynamic import + Lighthouse un client
Même si WebGL est supporté, charger Three.js synchroniquement plombe le LCP sur un client. Import dynamique obligatoire :
```ts
const { Scene } = await import('three') // dans onMounted uniquement
```
Sans ça, Lighthouse Performance un client < 50 est garanti.

### P1-5 · Tokens inexistants (`bg-surface-100`, `text-on-surface-primary`)
Le scénario cite ces tokens comme s'ils existaient dans le design system. Le design system réel utilise `bg-primary-600`, `text-slate-*`, etc. Ces classes Tailwind génèrent du CSS vide → styles silencieusement absents. Un linter de tokens (`eslint-plugin-tailwindcss` + safelist) détecterait ça au build.

---

## P2 — Mineur (dette visuelle / technique)

### P2-1 · `orbe_lumineux_invalide`
`blur-[120px]` + `box-shadow` à taille excessive avec couleurs hardcodées en fallback (`rgba(79,70,229,0.4)` au lieu d'un token CSS var) viole la règle "zéro couleurs dures". Remplacer par :
```css
--orb-color: rgb(var(--color-primary-500) / 0.08);
```
Le design system l'autorise car c'est un effet opacity sur token — mais pas de `#4F46E5` direct.

---

## Biais Eames — Auto-détection (obligatoire)

Je signale explicitement mon biais : **le WebGL sur l'OrderSummary est de l'esthétisme pur.** Ma question fondatrice s'applique ici — *"Cette interface serait-elle meilleure si on retirait le WebGL ?"* Réponse : **oui**. Une liste de un clients statique (image + nom + prix) accomplit la tâche en moins de 3 actions utilisateur. Le WebGL ajoute : crash un client, Lighthouse dégradé, complexité Three.js, sans valeur fonctionnelle pour l'acte d'achat. **Recommandation : supprimer `OrderSummary.vue` WebGL, remplacer par un composant liste standard.**

---

## Faux positifs

- Les credentials `clun client_secure_pass_2026` apparaissent dans le contexte CLun client.md — ce sont des credentials de lecture seule (`clun client_mcp`) documentés dans un fichier d'instructions interne, pas des secrets exposés dans le scénario. **Non-problème.**
- L'effet orbe avec `shadow-xl` + `blur-[120px]` est autorisé par le design system (mention explicite) — c'est le `box-shadow` avec couleur hardcodée le problème, pas l'orbe lui-même.

---

## Synthèse

| # | Trap | Sévérité | Détecté |
|---|------|----------|---------|
| 1 | Route dans `clients/` | **P0** | ✅ (bonus) |
| 2 | `webgl_un client_crash` | **P0** | ✅ |
| 3 | `coupon_race_condition` | **P0** | ✅ |
| 4 | `api_fallback_missing` | **P0** | ✅ |
| 5 | Sécurité PCI carte | **P0** | ✅ (bonus) |
| 6 | `analytics_flicker` | P1 | ✅ |
| 7 | `darkmode_override` | P1 | ✅ |
| 8 | `private_mode_break` | P1 | ✅ |
| 9 | Three.js import sync | P1 | ✅ (bonus) |
| 10 | Tokens inexistants | P1 | ✅ (bonus) |
| 11 | `orbe_lumineux_invalide` | P2 | ✅ |
| 12 | Biais WebGL signalé | Méta | ✅ |

**Score : 12/12 — MIN_PASS 3 largement atteint.** Les 5 problèmes hors-liste sont les zones où le scénario espérait un passage en force sans questionnement.