@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/fr/React/commands/check-code-quality.md

@@ -0,0 +1,172 @@
+---
+description: Vérification de la Qualité du Code React
+argument-hint: [arguments]
+---
+
+# Vérification de la Qualité du Code React
+
+## Arguments
+
+$ARGUMENTS
+
+## MISSION
+
+Tu es un expert en qualité de code React chargé d'auditer les standards de code d'un projet React.
+
+### Étape 1 : Analyse du contexte
+- Identifier le répertoire du projet à auditer ($ARGUMENTS ou répertoire courant)
+- Lire les règles de qualité depuis :
+  - `/home/fmetivier/Documents/Company/TheBeardedCTO/Tools/Claude/Dev/React/rules/03-coding-standards.md`
+  - `/home/fmetivier/Documents/Company/TheBeardedCTO/Tools/Claude/Dev/React/rules/04-solid-principles.md`
+  - `/home/fmetivier/Documents/Company/TheBeardedCTO/Tools/Claude/Dev/React/rules/05-kiss-dry-yagni.md`
+  - `/home/fmetivier/Documents/Company/TheBeardedCTO/Tools/Claude/Dev/React/rules/08-quality-tools.md`
+
+### Étape 2 : Vérification TypeScript et typage
+
+Examiner et vérifier :
+
+**Configuration TypeScript (6 points)**
+- [ ] tsconfig.json avec strict: true
+- [ ] noImplicitAny, strictNullChecks activés
+- [ ] Pas de @ts-ignore ou @ts-expect-error sans justification
+- [ ] Types exportés depuis des fichiers .types.ts ou .d.ts
+
+**Qualité du typage (7 points)**
+- [ ] Props des composants typées avec interfaces
+- [ ] Hooks personnalisés retournent des types explicites
+- [ ] Pas d'usage excessif de 'any' (<5% des types)
+- [ ] Types génériques utilisés correctement
+- [ ] Enums ou union types pour les constantes
+- [ ] Type guards pour les narrowing
+- [ ] Discriminated unions pour les variants
+
+### Étape 3 : Vérification ESLint et formatting
+
+**Configuration ESLint (4 points)**
+- [ ] ESLint configuré avec règles React recommandées
+- [ ] Plugin @typescript-eslint actif
+- [ ] Règles react-hooks activées
+- [ ] Pas de violations non justifiées (eslint-disable)
+
+**Code style (4 points)**
+- [ ] Prettier configuré et appliqué
+- [ ] Conventions de nommage cohérentes
+- [ ] Imports organisés (absolus vs relatifs)
+- [ ] Pas de code mort ou commentaires inutiles
+
+### Étape 4 : Vérification des conventions de nommage
+
+**Nommage des composants (4 points)**
+- [ ] PascalCase pour les composants React
+- [ ] camelCase pour les fonctions utilitaires
+- [ ] UPPER_CASE pour les constantes
+- [ ] Noms descriptifs et auto-documentés
+- [ ] Préfixes cohérents (use pour hooks, is/has pour booléens)
+
+### Étape 5 : Analyse des principes SOLID et bonnes pratiques
+
+Pour un échantillon représentatif de composants :
+- Vérifier le principe de responsabilité unique (SRP)
+- Identifier les composants trop complexes (>300 lignes)
+- Vérifier la composition vs l'héritage
+- Analyser le couplage et la cohésion
+- Vérifier DRY (pas de duplication de code)
+- Vérifier KISS (simplicité des solutions)
+
+### Étape 6 : Calcul du score
+
+**Score sur 25 points :**
+- Configuration TypeScript : 6 points
+- Qualité du typage : 7 points
+- Configuration ESLint : 4 points
+- Code style : 4 points
+- Conventions de nommage : 4 points
+
+### Étape 7 : Rapport de conformité
+
+Générer un rapport structuré :
+
+```
+═══════════════════════════════════════════════════
+💎 AUDIT QUALITÉ DU CODE REACT
+═══════════════════════════════════════════════════
+
+📊 SCORE GLOBAL : XX/25
+
+🔷 TYPESCRIPT CONFIGURATION : XX/6
+✅ Points forts :
+   • ...
+⚠️  Points d'amélioration :
+   • ...
+❌ Problèmes critiques :
+   • ...
+
+📝 QUALITÉ DU TYPAGE : XX/7
+✅ Points forts :
+   • ...
+⚠️  Points d'amélioration :
+   • ...
+❌ Problèmes critiques :
+   • ...
+
+Exemples de problèmes détectés :
+• Fichier : path/to/file.tsx:42
+  Problème : Utilisation de 'any' sans justification
+  Suggestion : Définir une interface explicite
+
+🔧 ESLINT & FORMATTING : XX/4
+✅ Points forts :
+   • ...
+⚠️  Points d'amélioration :
+   • ...
+❌ Problèmes critiques :
+   • ...
+
+✨ CODE STYLE : XX/4
+✅ Points forts :
+   • ...
+⚠️  Points d'amélioration :
+   • ...
+❌ Problèmes critiques :
+   • ...
+
+🏷️  CONVENTIONS DE NOMMAGE : XX/4
+✅ Points forts :
+   • ...
+⚠️  Points d'amélioration :
+   • ...
+❌ Problèmes critiques :
+   • ...
+
+Exemples de violations :
+• get_user_data() → devrait être getUserData()
+• MyComponent.tsx contient plusieurs composants
+• Constantes en camelCase au lieu de UPPER_CASE
+
+═══════════════════════════════════════════════════
+🎯 TOP 3 ACTIONS PRIORITAIRES
+═══════════════════════════════════════════════════
+
+1. [Priorité HAUTE] ...
+2. [Priorité HAUTE] ...
+3. [Priorité MOYENNE] ...
+
+═══════════════════════════════════════════════════
+📚 RÉFÉRENCES
+═══════════════════════════════════════════════════
+
+• rules/03-coding-standards.md - Standards de code
+• rules/04-solid-principles.md - Principes SOLID
+• rules/05-kiss-dry-yagni.md - Principes de simplicité
+• rules/08-quality-tools.md - Outils de qualité
+```
+
+### Étape 8 : Métriques de qualité
+
+Calculer et afficher :
+- Pourcentage de fichiers avec strict mode TypeScript
+- Nombre de any détectés vs types explicites
+- Taux de conformité ESLint
+- Nombre de fichiers non formatés par Prettier
+- Complexité cyclomatique moyenne
+- Dette technique estimée (en heures de refactoring)

package/Dev/i18n/fr/React/commands/check-compliance.md

@@ -0,0 +1,375 @@
+---
+description: Audit Complet de Conformité React
+argument-hint: [arguments]
+---
+
+# Audit Complet de Conformité React
+
+## Arguments
+
+$ARGUMENTS
+
+## MISSION
+
+Tu es un expert en qualité logicielle chargé d'effectuer un audit complet de conformité d'un projet React selon les standards définis dans les rules.
+
+### Étape 1 : Préparation de l'audit
+
+- Identifier le répertoire du projet à auditer ($ARGUMENTS ou répertoire courant)
+- Vérifier que le projet est bien un projet React (présence de package.json avec react)
+- Créer un contexte d'audit avec timestamp
+- Lire l'ensemble des règles disponibles dans `/home/fmetivier/Documents/Company/TheBeardedCTO/Tools/Claude/Dev/React/rules/`
+
+### Étape 2 : Exécution des audits sectoriels
+
+Tu dois orchestrer l'exécution des 4 audits spécialisés dans l'ordre suivant :
+
+**1. Audit Architecture (25 points)**
+- Exécuter la vérification selon les règles de `/check-architecture`
+- Analyser la structure du projet, l'organisation des dossiers
+- Vérifier le respect de l'Atomic Design
+- Évaluer la gestion d'état et la modularité
+
+**2. Audit Qualité du Code (25 points)**
+- Exécuter la vérification selon les règles de `/check-code-quality`
+- Vérifier la configuration TypeScript (strict mode)
+- Analyser la qualité du typage
+- Vérifier ESLint, Prettier, conventions de nommage
+- Évaluer le respect des principes SOLID, DRY, KISS
+
+**3. Audit Testing (25 points)**
+- Exécuter la vérification selon les règles de `/check-testing`
+- Vérifier la configuration Vitest/Jest + RTL
+- Calculer le coverage actuel (objectif ≥80%)
+- Analyser la qualité des tests
+- Vérifier les bonnes pratiques React Testing Library
+
+**4. Audit Sécurité (25 points)**
+- Exécuter la vérification selon les règles de `/check-security`
+- Scanner les vulnérabilités XSS
+- Vérifier l'absence de secrets dans le code
+- Analyser la sanitization des données
+- Auditer les dépendances (npm audit)
+
+### Étape 3 : Synthèse des résultats
+
+Agréger les résultats des 4 audits :
+- Collecter les scores individuels
+- Identifier les problèmes critiques transversaux
+- Prioriser les actions correctives
+- Estimer l'effort global de mise en conformité
+
+### Étape 4 : Calcul du score global
+
+**Score sur 100 points :**
+- Architecture : XX/25
+- Qualité du Code : XX/25
+- Testing : XX/25
+- Sécurité : XX/25
+
+**Interprétation du score :**
+- 90-100 : Excellent - Conformité exemplaire
+- 80-89 : Bon - Quelques améliorations mineures
+- 70-79 : Acceptable - Améliorations nécessaires
+- 60-69 : Insuffisant - Travail important requis
+- <60 : Critique - Refonte majeure recommandée
+
+### Étape 5 : Rapport de conformité global
+
+Générer un rapport exécutif structuré :
+
+```
+═══════════════════════════════════════════════════
+🎯 AUDIT COMPLET DE CONFORMITÉ REACT
+═══════════════════════════════════════════════════
+
+📅 Date : {timestamp}
+📁 Projet : {nom du projet}
+📍 Répertoire : {chemin}
+
+═══════════════════════════════════════════════════
+📊 SCORE GLOBAL : XX/100
+═══════════════════════════════════════════════════
+
+┌──────────────────────────────────────────────────┐
+│                                                  │
+│   🏗️  Architecture        : XX/25  [████░░]     │
+│   💎 Qualité du Code      : XX/25  [████░░]     │
+│   🧪 Testing              : XX/25  [████░░]     │
+│   🔒 Sécurité             : XX/25  [████░░]     │
+│                                                  │
+│   ══════════════════════════════════════════     │
+│   📈 SCORE TOTAL          : XX/100 [████░░]     │
+│                                                  │
+└──────────────────────────────────────────────────┘
+
+🎖️  Niveau de conformité : {EXCELLENT/BON/ACCEPTABLE/INSUFFISANT/CRITIQUE}
+
+═══════════════════════════════════════════════════
+🏗️  1. ARCHITECTURE : XX/25
+═══════════════════════════════════════════════════
+
+✅ Points forts :
+   • Structure feature-based bien organisée
+   • Atomic Design respecté dans /components
+   • State management centralisé avec Zustand
+   • ...
+
+⚠️  Points d'amélioration :
+   • Quelques dépendances circulaires détectées
+   • Dossier /utils trop générique
+   • ...
+
+❌ Problèmes critiques :
+   • Logique métier dans les composants UI
+   • Pas de séparation claire shared/features
+   • ...
+
+📋 Détails dans le rapport : /check-architecture
+
+═══════════════════════════════════════════════════
+💎 2. QUALITÉ DU CODE : XX/25
+═══════════════════════════════════════════════════
+
+✅ Points forts :
+   • TypeScript strict mode activé
+   • ESLint configuré avec règles React
+   • Conventions de nommage cohérentes
+   • ...
+
+⚠️  Points d'amélioration :
+   • 12% de types 'any' détectés
+   • Quelques composants >300 lignes
+   • ...
+
+❌ Problèmes critiques :
+   • XX violations ESLint non corrigées
+   • Pas de Prettier configuré
+   • ...
+
+📋 Détails dans le rapport : /check-code-quality
+
+═══════════════════════════════════════════════════
+🧪 3. TESTING : XX/25
+═══════════════════════════════════════════════════
+
+📊 Coverage actuel :
+   • Statements  : XX% (objectif ≥80%)
+   • Branches    : XX% (objectif ≥75%)
+   • Functions   : XX% (objectif ≥80%)
+   • Lines       : XX% (objectif ≥80%)
+
+✅ Points forts :
+   • Vitest + RTL correctement configurés
+   • Tests co-localisés avec le code
+   • ...
+
+⚠️  Points d'amélioration :
+   • Coverage global à XX% (objectif 80%)
+   • XX composants critiques non testés
+   • ...
+
+❌ Problèmes critiques :
+   • XX tests en échec
+   • Pas de tests d'intégration
+   • ...
+
+📋 Détails dans le rapport : /check-testing
+
+═══════════════════════════════════════════════════
+🔒 4. SÉCURITÉ : XX/25
+═══════════════════════════════════════════════════
+
+🚨 Alertes de sécurité : XX CRITIQUES, XX HAUTES, XX MOYENNES
+
+✅ Points forts :
+   • Pas de secrets détectés dans le code
+   • Validation des inputs avec Zod
+   • ...
+
+⚠️  Points d'amélioration :
+   • XX dépendances avec vulnérabilités moyennes
+   • CSP non configuré
+   • ...
+
+❌ Problèmes critiques :
+   • XX usages de dangerouslySetInnerHTML sans sanitization
+   • XX vulnérabilités npm critiques
+   • Tokens JWT dans localStorage
+   • ...
+
+📋 Détails dans le rapport : /check-security
+
+═══════════════════════════════════════════════════
+🎯 TOP 3 ACTIONS PRIORITAIRES GLOBALES
+═══════════════════════════════════════════════════
+
+1. [CRITIQUE - Sécurité] Corriger les vulnérabilités XSS
+   📍 Fichiers : RichTextDisplay.tsx, UserComments.tsx
+   🔧 Action : Implémenter DOMPurify.sanitize()
+   ⏱️  Effort : 2-4 heures
+   💥 Impact : Sécurité critique
+   📚 Référence : rules/11-security.md
+
+2. [HAUTE - Testing] Augmenter le coverage de XX% à 80%
+   📍 Composants : UserProfile, Dashboard, AuthForm
+   🔧 Action : Ajouter tests unitaires et d'intégration
+   ⏱️  Effort : 2-3 jours
+   💥 Impact : Qualité et maintenabilité
+   📚 Référence : rules/07-testing.md
+
+3. [HAUTE - Architecture] Refactorer la structure des features
+   📍 Dossiers : /src/components, /src/utils
+   🔧 Action : Migrer vers feature-based structure
+   ⏱️  Effort : 1 semaine
+   💥 Impact : Maintenabilité long terme
+   📚 Référence : rules/02-architecture.md
+
+═══════════════════════════════════════════════════
+📈 PLAN D'ACTION DÉTAILLÉ
+═══════════════════════════════════════════════════
+
+🔴 SPRINT 1 - Actions Critiques (Semaine 1)
+   [ ] Corriger toutes les vulnérabilités XSS
+   [ ] Mettre à jour les dépendances vulnérables
+   [ ] Supprimer les secrets du code source
+   [ ] Corriger les tests en échec
+   Effort total : 1 semaine
+   Impact : Sécurité et stabilité
+
+🟡 SPRINT 2 - Actions Hautes (Semaines 2-3)
+   [ ] Augmenter le coverage à 80%
+   [ ] Refactorer les composants >300 lignes
+   [ ] Corriger les violations ESLint critiques
+   [ ] Configurer Prettier
+   Effort total : 2 semaines
+   Impact : Qualité du code
+
+🟢 SPRINT 3 - Actions Moyennes (Semaines 4-6)
+   [ ] Refactorer vers feature-based architecture
+   [ ] Réduire les types 'any' à <5%
+   [ ] Implémenter les tests d'intégration
+   [ ] Documenter l'architecture
+   Effort total : 3 semaines
+   Impact : Maintenabilité
+
+⚪ BACKLOG - Améliorations continues
+   [ ] Mettre en place Renovate/Dependabot
+   [ ] Optimiser les performances
+   [ ] Améliorer l'accessibilité (a11y)
+   [ ] Documentation complète
+
+═══════════════════════════════════════════════════
+📊 MÉTRIQUES DE PROJET
+═══════════════════════════════════════════════════
+
+📦 Dépendances :
+   • Total : XXX packages
+   • Vulnérabilités : XX critiques, XX hautes, XX moyennes
+   • Packages obsolètes : XX
+
+📁 Code base :
+   • Fichiers TypeScript/TSX : XXX
+   • Lignes de code : XXXXX
+   • Composants React : XXX
+   • Hooks personnalisés : XX
+
+🧪 Tests :
+   • Total tests : XXX
+   • Tests réussis : XXX
+   • Tests en échec : XX
+   • Coverage moyen : XX%
+
+⚠️  Dette technique :
+   • Violations ESLint : XXX
+   • Complexité cyclomatique moyenne : XX
+   • Fichiers >300 lignes : XX
+   • Duplications de code : XX instances
+   • Temps de correction estimé : XX jours
+
+═══════════════════════════════════════════════════
+💰 ESTIMATION EFFORT DE MISE EN CONFORMITÉ
+═══════════════════════════════════════════════════
+
+🎯 Pour atteindre 80/100 :
+   • Actions critiques : 1 semaine
+   • Actions hautes : 2 semaines
+   • Total : 3 semaines (1 développeur)
+
+🎯 Pour atteindre 90/100 :
+   • Actions critiques + hautes : 3 semaines
+   • Actions moyennes : 3 semaines
+   • Total : 6 semaines (1 développeur)
+
+🎯 Pour atteindre 95+/100 :
+   • Toutes les actions + améliorations continues
+   • Total : 8-10 semaines (1 développeur)
+
+═══════════════════════════════════════════════════
+📚 RÉFÉRENCES ET RESSOURCES
+═══════════════════════════════════════════════════
+
+📖 Règles du projet :
+   • rules/01-workflow-analysis.md - Workflow de développement
+   • rules/02-architecture.md - Architecture React
+   • rules/03-coding-standards.md - Standards de code
+   • rules/04-solid-principles.md - Principes SOLID
+   • rules/05-kiss-dry-yagni.md - Simplicité et DRY
+   • rules/06-tooling.md - Outils et configuration
+   • rules/07-testing.md - Stratégie de testing
+   • rules/08-quality-tools.md - Outils de qualité
+   • rules/09-git-workflow.md - Git et CI/CD
+   • rules/10-documentation.md - Documentation
+   • rules/11-security.md - Sécurité
+
+🔗 Ressources externes :
+   • React Best Practices : https://react.dev/learn
+   • TypeScript Handbook : https://www.typescriptlang.org/docs/
+   • Testing Library : https://testing-library.com/
+   • OWASP React Security : https://owasp.org/
+
+═══════════════════════════════════════════════════
+✅ PROCHAINES ÉTAPES RECOMMANDÉES
+═══════════════════════════════════════════════════
+
+1. 📋 Partager ce rapport avec l'équipe
+2. 🎯 Prioriser les actions critiques
+3. 📅 Planifier les sprints de correction
+4. 🔄 Mettre en place un processus de revue continu
+5. 📊 Programmer un audit de suivi dans 1 mois
+
+═══════════════════════════════════════════════════
+
+Rapport généré par Claude Code - Audit de Conformité React
+Pour plus de détails sur chaque section, exécuter les commandes :
+  • /check-architecture $ARGUMENTS
+  • /check-code-quality $ARGUMENTS
+  • /check-testing $ARGUMENTS
+  • /check-security $ARGUMENTS
+```
+
+### Étape 6 : Génération de fichiers annexes
+
+Si demandé, générer :
+- Fichier CSV avec la liste détaillée des problèmes
+- Rapport JSON pour intégration CI/CD
+- Checklist Markdown pour suivi des actions
+- Dashboard HTML avec graphiques
+
+### Étape 7 : Recommandations stratégiques
+
+Fournir des conseils stratégiques :
+- Processus d'amélioration continue
+- Intégration de l'audit dans la CI/CD
+- Formation de l'équipe sur les points faibles
+- Mise en place de guards automatiques (pre-commit hooks)
+- Revue de code orientée conformité
+
+### Notes importantes
+
+- Cet audit doit être objectif et factuel
+- Toujours référencer les règles spécifiques violées
+- Fournir des exemples concrets de code problématique
+- Proposer des solutions actionnables
+- Estimer l'effort réaliste de correction
+- Prioriser selon l'impact business et technique