# Agent Instructions

Sokko G est une webapp React + Vite + Sass centrée sur des toolboxes locales et des pages de jeu.

## Références projet

Avant de modifier un outil toolbox, le stockage IndexedDB, l'import/export ou les formats de données, lire :

- `docs/STORAGE_SCHEMA.md`
- `docs/FEATURE_CHECKLIST.md`

Avant de modifier le style, les composants UI, les layouts, les boutons, cards, panels, hovers, scrollbars ou notifications, lire :

- `DESIGN_SYSTEM.md`

Après ce type de modification, mettre à jour ces documents si le format ou le workflow change.

## Contenu éditable

Le contenu éditorial du site doit rester dans :

- `website/public/data/site.json`
- `website/public/data/<gameId>/...`

Ne pas réintroduire de fallback massif type `DEFAULT_SITE_CONTENT` dans le code React. `site.json` est la source de vérité et `npm run check` doit échouer si le contenu requis est invalide.

## En-têtes de fichiers

Chaque nouveau fichier source ou test doit commencer par un commentaire court `Rôle : ...` décrivant ce qu'il gère.

- mettre cet en-tête à jour si la responsabilité du fichier change ;
- garder l'intro concise, une à trois lignes maximum selon la complexité du fichier ;
- quand un fichier existant est modifié, vérifier si son en-tête mérite d'être précisé au-delà de la ligne générique initiale ;
- enrichir l'en-tête quand le fichier porte une logique transverse, un hook partagé, un format de données ou un comportement réutilisable ;
- ne pas allonger mécaniquement les en-têtes des fichiers simples : la précision doit aider à comprendre la responsabilité réelle du fichier ;
- utiliser `// Rôle : ...` dans les fichiers JS, JSX, MJS et SCSS.

## Hooks et comportements partagés

Quand un comportement est déjà couvert par un hook ou un helper partagé, privilégier son utilisation plutôt qu'une réimplémentation locale afin de garder une expérience homogène.

- pour la réorganisation par drag & drop, utiliser `useGroupedReorder` dès qu'il s'agit d'items, groupes, catégories, boundaries, parent/enfant ou listes horizontales/verticales ;
- réserver `usePointerReorder` au moteur bas niveau ou aux cas DOM très spécifiques qui ne correspondent pas au modèle applicatif de `useGroupedReorder` ;
- si une variation est nécessaire, vérifier d'abord si elle doit devenir une option du hook partagé ;
- demander ou expliciter le choix uniquement quand la variation est réellement métier et pourrait alourdir le hook ;
- éviter de dupliquer dans un outil une règle de reorder générique déjà prise en charge par le hook.

## Outils toolbox

Chaque outil toolbox doit rester dans son propre fichier dans :

```text
website/src/features/toolboxes/modules/
```

Quand un outil est ajouté ou modifié :

- déclarer l'outil dans `website/src/features/toolboxes/modules/index.jsx` ;
- ajouter les textes dans `website/public/data/site.json` ;
- mettre à jour la validation dans `tests/helpers/data-validation.mjs` ;
- mettre à jour la structure IndexedDB dans `docs/STORAGE_SCHEMA.md` si nécessaire ;
- vérifier l'affichage page toolbox et panneau latéral.

Quand la structure de données d'un outil change, ne pas prévoir de compatibilité legacy, de migration ou de tolérance d'anciens formats, sauf demande explicite. Le format documenté dans `docs/STORAGE_SCHEMA.md` doit rester le format cible strict.

## Style

Le style est en Sass dans `website/src/styles/`.

`DESIGN_SYSTEM.md` est la référence visuelle du projet et doit rester synchronisé avec les patterns réellement utilisés.

Privilégier :

- les tokens existants ;
- les classes de boutons existantes ;
- les patterns visuels déjà présents pour les cards, panels, badges, scrollbars et hovers.

Éviter les styles isolés qui ne réutilisent pas le thème.

## Validation

Avant de terminer une modification significative, lancer :

```bash
npm run check
```

Le check couvre la génération des index de listes, les tests et le build de production.

## Pré-push check

Quand l'utilisateur indique qu'il va push, faire une passe globale avant de conclure.

Vérifier et corriger si nécessaire :

- code mort, imports inutilisés, fonctions inutilisées, styles devenus obsolètes ;
- duplication de code ou de style pouvant être factorisée sans complexifier le projet ;
- composants qui utilisent des classes trop spécifiques alors qu'un pattern général existe déjà ;
- incohérences entre boutons, badges, cards, panels, hovers, focus states et scrollbars ;
- cohérence entre `website/public/data/site.json`, les validations et les textes utilisés ;
- cohérence entre `docs/STORAGE_SCHEMA.md` et les normalisations IndexedDB réelles ;
- import/export des toolboxes quand la structure de données a changé ;
- champs inutiles persistés dans IndexedDB ou dans les exports ;
- fichiers générés attendus, notamment les index de listes ;
- optimisations simples de performance : recalculs au render, listeners non nettoyés, observers, effets CSS lourds appliqués en masse.

Utiliser en priorité :

```bash
rg
git status --short
git diff --stat
npm run check
```

Après lecture du diff pré-push, proposer un exemple de message de commit en anglais, concis et représentatif des changements réellement présents.

Ne pas faire de refactor large sans bénéfice clair. Garder les corrections pré-push ciblées, vérifiables et faciles à relire.