mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-04-05 12:41:27 +00:00

Files

Luc SORIGNET cb76a23d02 docs(design-system): add design system documentation and AI agent instructions

- 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

2026-04-04 11:56:19 +02:00

3.3 KiB

Raw Blame History

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. À 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.

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/

3.3 KiB Raw Blame History