Exemple de cursor rules

global.mdc

---
description: Règles de codage et de structuration pour le projet Next.js avec TypeScript, SCSS Modules et Clean Code.
globs: ["**/*.ts", "**/*.tsx", "**/*.scss"]
alwaysApply: true
---

# Règles de Codage et de Structuration

## Structure du Projet

- **Pages** : Toutes les pages sont situées dans le répertoire `src/app`.
- **Composants Réutilisables** : Placés dans `src/components`.
- **Sous-composants Spécifiques à une Page** : Stockés dans un dossier `_components` au sein du répertoire de la page correspondante.

## Conventions de Nommage

- **Fichiers** : Utiliser le `camelCase` pour les noms de fichiers.
- **Variables et Fonctions** : Employer le `camelCase`.
- **Classes** : Adopter le `PascalCase`.
- **Composants** : Adopter le `PascalCase`.

## Imports

- Préférer les imports absolus en utilisant le préfixe `@` pour référencer les modules, par exemple : `import { MonModule } from '@/chemin/vers/module';`.

## Style et SCSS

- Utiliser les **Modules SCSS** pour le style.
- Privilégier l'imbrication permise par SASS pour structurer les styles, tout en évitant une imbrication excessive pour maintenir une clarté et une performance optimales.

## Qualité du Code

- Respecter les principes du **Clean Code** :
  - **Noms Descriptifs** : Les noms de variables, fonctions et classes doivent être explicites et refléter leur rôle.
  - **Fonctions Concises** : Chaque fonction doit remplir une seule responsabilité clairement définie.
  - **Éviter la Duplication** : Réutiliser le code autant que possible pour minimiser les répétitions.
- Assurer l'**Accessibilité** en suivant les meilleures pratiques en matière de développement web.

## Gestion des États et API

- Utiliser **TanStack Query** pour la gestion des requêtes et de l'état côté client.
- L'application communique principalement avec une API fournie par **Strapi**.

## Linting et Formatage

- **ESLint** et **Prettier** sont utilisés pour maintenir une cohérence du code. S'assurer que le code est conforme aux règles définies avant chaque commit.

## Messages de Commit

- Rédiger les messages de commit en anglais, de manière claire et concise, en suivant le format : `type(scope): message`. Les types de commit autorisés sont :
  - `build`
  - `chore`
  - `ci`
  - `docs`
  - `feat`
  - `fix`
  - `perf`
  - `refactor`
  - `revert`
  - `style`
  - `test`

Exemple de message de commit :
feat(auth): add user authentication with JWT

## Tests

- Écrire des tests unitaires pour les composants et les fonctions critiques en utilisant des bibliothèques appropriées, telles que **React Testing Library**.

## Sécurité

- Valider et nettoyer toutes les entrées utilisateur pour prévenir les vulnérabilités telles que l'injection SQL ou les attaques XSS.
- Stocker les informations sensibles, comme les clés API, dans des variables d'environnement et ne pas les inclure dans le contrôle de version.

## Performance

- Optimiser les images et autres ressources statiques pour améliorer les temps de chargement.
- Charger le code de manière asynchrone lorsque c'est possible et utiliser le découpage du code pour réduire la taille des bundles.

## Accessibilité

- Suivre les directives WCAG pour garantir que l'application est utilisable par tous, y compris les personnes en situation de handicap.
- Utiliser des attributs ARIA lorsque cela est nécessaire pour améliorer la navigation et l'interaction.

## Gestion des Dépendances

- Limiter au maximum l'utilisation de dépendances externes
- Examiner et mettre à jour régulièrement les dépendances pour bénéficier des dernières fonctionnalités et correctifs de sécurité.
- Éviter l'utilisation de packages obsolètes ou non maintenus.

## Gestion des Erreurs

- Implémenter une gestion robuste des erreurs, en fournissant des messages d'erreur clairs à l'utilisateur et en enregistrant les erreurs côté serveur pour faciliter le débogage.