# CLAUDE.md — N3WT-SCHOOL Instructions permanentes pour Claude Code sur ce projet. ## Architecture - **Backend** : Python / Django — dossier `Back-End/` - **Frontend** : Next.js 14 (App Router) — dossier `Front-End/` - **Tests frontend** : `Front-End/src/test/` - **CSS** : Tailwind CSS 3 + `@tailwindcss/forms` ## Design System Le design system complet est dans [`docs/design-system.md`](docs/design-system.md). À lire et appliquer systématiquement. ### Tokens de couleur (Tailwind) | Token | Hex | Usage | |-------------|-----------|------------------------------------| | `primary` | `#059669` | Boutons, CTA, éléments actifs | | `secondary` | `#064E3B` | Hover, accents sombres | | `tertiary` | `#10B981` | Badges, icônes d'accent | | `neutral` | `#F8FAFC` | Fonds de page, surfaces | > **Règle absolue** : ne jamais utiliser `emerald-*`, `green-*` pour les éléments interactifs. Utiliser les tokens ci-dessus. ### Typographie - `font-headline` → titres `h1`/`h2`/`h3` (Manrope) - `font-body` → texte courant, défaut sur `` (Inter) - `font-label` → boutons, labels de form (Inter) ### Arrondi & Espacement - Arrondi par défaut : `rounded` (4px) - Espacement : grille 4px/8px — pas de valeurs arbitraires - Mode : **light uniquement**, pas de dark mode ## Conventions de code ### Frontend (Next.js) - **Composants** : React fonctionnels, pas de classes - **Styles** : Tailwind CSS uniquement — pas de CSS inline sauf animations - **Icônes** : `lucide-react` - **i18n** : `next-intl` — toutes les chaînes UI via `useTranslations()` - **Formulaires** : `react-hook-form` - **Imports** : alias `@/` pointe vers `Front-End/src/` ### Qualité - Linting : ESLint (`npm run lint` dans `Front-End/`) - Format : Prettier - Tests : Jest + React Testing Library (`Front-End/src/test/`) ## Gestion des branches - Base : `develop` - Nomenclature : `--` (ex: `feat-ma-feature-1234`) - Types : `feat`, `fix`, `docs`, `style`, `refactor`, `test`, `chore` ## Icônes Utiliser **uniquement `lucide-react`** — jamais d'autre bibliothèque d'icônes. ```jsx import { Home, Plus } from 'lucide-react'; ``` ## Responsive & PWA - **Mobile-first** : styles de base = mobile, breakpoints `sm:`/`md:`/`lg:` pour agrandir. - Touch targets ≥ 44px (`min-h-[44px]`) sur tous les éléments interactifs. - Pas d'interactions uniquement au `:hover` — prévoir l'équivalent tactile. - Les tableaux utilisent la classe `responsive-table` sur mobile. ## Réutilisation des composants Avant de créer un composant, **vérifier `Front-End/src/components/`**. Composants disponibles : `AlertMessage`, `Modal`, `Pagination`, `SectionHeader`, `ProgressStep`, `EventCard`, `Calendar/*`, `Chat/*`, `Evaluation/*`, `Grades/*`, `Form/*`, `Admin/*`, `Charts/*`. ## À éviter - Ne pas ajouter de dépendances inutiles - Ne pas modifier `package-lock.json` / `yarn.lock` manuellement - Ne pas committer sans avoir vérifié ESLint et les tests - Ne pas utiliser de CSS arbitraire (`p-[13px]`) sauf cas justifié - Ne pas ajouter de support dark mode - Ne pas utiliser d'autres bibliothèques d'icônes que `lucide-react` - Ne pas créer un composant qui existe déjà dans `components/`