fix: Vérifier les dépendances réelles avant d'appliquer un plan

[victorjourne]

Améliorer les skills : vérifier les dépendances réelles avant d'appliquer un plan

Problème identifié

Lors de l'exécution d'un plan de migration (ex: migration DSFR), l'agent a appliqué le code du plan sans :

1. Vérifier les packages réellement installés - le plan mentionnait @gouvfr/dsfr-vue avec des composants FrInput, FrButton... mais ce package n'existe pas sur npm. Le projet utilise @gouvminint/vue-dsfr avec DsfrInput, DsfrButton.

2. Vérifier l'API réelle des composants - le plan donnait du code avec native-validators, elevation, closable... mais l'API réelle est différente (isInvalid, small, closeable).

3. Tester le build avant de commiter - des bugs existants (toast non réactif, compteur figé) n'ont été découverts qu'en testant.

Recommandation pour les skills

1. Vérifier les dépendances avant d'appliquer un plan

Le skill d'exécution de plan devrait inclure une étape de vérification :

- [ ] Vérifier que les packages mentionnés dans le plan existent sur npm
- [ ] Vérifier que les versions correspondent à package.json
- [ ] Vérifier les exports réels (node_modules/*/types/*.d.ts) avant de coder

2. Lire les fichiers de types avant d'implémenter

Avant d'écrire du code utilisant des bibliothèques externes :

- [ ] Lire les fichiers .d.ts de la bibliothèque pour connaître l'API réelle
- [ ] Ne pas supposer que le code du plan correspond à l'API réelle
- [ ] Adapter le code si l'API diffère

3. Build de vérification avant commit

Chaque tâche devrait inclure :

- [ ] Exécuter le build (pnpm build ou vue-tsc)
- [ ] Corriger les erreurs de type avant de commiter
- [ ] Ne pas commiter si le build échoue

4. Tester les fonctionnalités existantes

Avant d'appliquer un plan :

- [ ] Lancer l'application et vérifier le comportement actuel
- [ ] Identifier les bugs existants (toast, compteur, etc.)
- [ ] Les corriger ou les noter dans le plan

Exemple concret

Plan disait :

<FrInput :native-validators="{ required: { errorMessage: '...', enable: true } }" />

API réelle (DsfrInput) :

// types/components/DsfrInput/DsfrInput.types.d.ts
export type DsfrInputProps = {
  isInvalid?: boolean
  // pas de native-validators
}

Impact

Ce problème peut se reproduire avec n'importe quelle bibliothèque externe. L'agent suit aveuglément le plan sans vérifier ce qui est réellement disponible.