mirror of
https://git.v0id.ovh/n3wt-innov/n3wt-school.git
synced 2026-04-05 12:41:27 +00:00
cb76a23d02
- Add docs/design-system.md with color tokens, typography, spacing, icons, responsive/PWA rules and component reuse guidelines - Add CLAUDE.md with permanent instructions for Claude Code - Add .github/instructions/design-system.instruction.md for GitHub Copilot - Update .github/copilot-instructions.md to reference the design system - Update Front-End/tailwind.config.js with color tokens (primary, secondary, tertiary, neutral) and font families (Manrope/Inter) - Update Front-End/src/app/layout.js to load Manrope and Inter via next/font/google
92 lines
3.3 KiB
Markdown
92 lines
3.3 KiB
Markdown
# 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 `<body>` (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 : `<type>-<nom_ticket>-<numero>` (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';
|
|
<Home size={20} className="text-primary" />
|
|
```
|
|
|
|
## 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/`
|