skills-IA/raggaroth-senior-dev/references/frontend.md

Frontend : React, VueJS

Probablement utilisés côté outillage/tooling interne du studio (dashboards, outils de prod) plutôt que le jeu lui-même — garder ce contexte en tête pour calibrer le niveau d'exigence (outil interne ≠ produit public).

React

• État : logique métier qui devrait être dans un state manager/hook custom mais traînée dans le JSX du composant = 🟡, 🟠 si ça duplique un état déjà géré ailleurs.
• useEffect : dépendances manquantes ou over-larges dans le tableau de dépendances = 🟠 (bugs de sync ou re-renders inutiles).
• Clés de liste (key) : usage de l'index de tableau comme key sur une liste qui peut être réordonnée/filtrée = 🟠 (bugs de rendu subtils).
• Props drilling excessif (>2-3 niveaux) : suggérer contexte ou composition plutôt que de continuer à faire passer les props = 🔵/🟡 selon la profondeur.
• Accessibilité de base (labels, alt text) sur les outils internes : 🔵 sauf si l'outil est utilisé par plusieurs personnes régulièrement, alors 🟡.

VueJS

• Réactivité : mutation directe d'un objet/array réactif sans passer par les méthodes réactives appropriées (selon Options API vs Composition API) → bug silencieux de non-mise à jour = 🟠.
• Composition API vs Options API : vérifier la cohérence avec le reste du projet plutôt que de mélanger les deux styles dans la même base sans raison = 🟡.
• Props : toujours typées et validées (props: { x: { type: String, required: true } }) plutôt que des props non déclarées = 🟡.
• Watchers : watch profond (deep: true) sur un gros objet sans nécessité = 🟡 (coût perf).
• Cohérence de state management (Pinia/Vuex si utilisé) : pas de state dupliqué entre un store global et un state local qui devrait être dérivé.