@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/fr/Common/commands/uiux-audit.md

@@ -0,0 +1,189 @@
+---
+description: Audit Complet UI/UX/Accessibilité
+argument-hint: [arguments]
+---
+
+# Audit Complet UI/UX/Accessibilité
+
+Tu es l'Orchestrateur UI/UX. Tu dois réaliser un audit complet d'une interface en mobilisant séquentiellement les 3 experts : Accessibilité, UX/Ergonomie, puis UI Design.
+
+## Arguments
+$ARGUMENTS
+
+Arguments :
+- (Optionnel) URL ou chemin vers la page/composant à auditer
+- (Optionnel) Niveau WCAG : AA ou AAA (défaut: AAA)
+
+Exemple : `/common:uiux-audit src/pages/Dashboard.tsx AAA`
+
+## MISSION
+
+### Étape 1 : Audit Accessibilité (Expert A11y)
+
+#### 1.1 Audit automatisé
+```bash
+# Exécuter si disponible
+npx axe-cli {URL}
+npx pa11y {URL}
+# Ou vérifier Lighthouse
+```
+
+#### 1.2 Vérification manuelle WCAG 2.2 AAA
+
+**Perceptible**
+- [ ] Images avec alt text
+- [ ] Structure sémantique (h1-h6, landmarks)
+- [ ] Contraste ≥ 7:1 (AAA)
+- [ ] Reflow à 320px
+
+**Utilisable**
+- [ ] Navigation clavier complète
+- [ ] Pas de piège clavier
+- [ ] Focus visible (≥ 2px)
+- [ ] Touch targets ≥ 44px
+
+**Compréhensible**
+- [ ] lang sur html
+- [ ] Labels sur inputs
+- [ ] Messages d'erreur clairs
+
+**Robuste**
+- [ ] ARIA correct
+- [ ] aria-live pour dynamique
+
+### Étape 2 : Audit UX/Ergonomie (Expert UX)
+
+#### 2.1 Heuristiques Nielsen
+
+| Heuristique | Score (1-5) | Observations |
+|-------------|-------------|--------------|
+| Visibilité état système | | |
+| Correspondance monde réel | | |
+| Contrôle utilisateur | | |
+| Cohérence | | |
+| Prévention erreurs | | |
+| Reconnaissance vs rappel | | |
+| Flexibilité | | |
+| Minimalisme | | |
+| Récupération erreurs | | |
+| Aide | | |
+
+#### 2.2 Analyse parcours
+
+- Points de friction identifiés
+- Charge cognitive évaluée
+- Patterns d'interaction cohérents ?
+
+### Étape 3 : Audit UI Design (Expert UI)
+
+#### 3.1 Design System
+
+- Tokens cohérents ?
+- États complets ?
+- Responsive correct ?
+
+#### 3.2 Cohérence visuelle
+
+- Typographie uniforme ?
+- Espacements systématiques ?
+- Iconographie cohérente ?
+
+### Étape 4 : Synthèse et Priorisation
+
+```
+══════════════════════════════════════════════════════════════
+🎨 RAPPORT AUDIT UI/UX/A11Y
+══════════════════════════════════════════════════════════════
+
+Page/Composant : {nom}
+Date : {date}
+Niveau cible : WCAG 2.2 AAA + Lighthouse 100/100
+
+──────────────────────────────────────────────────────────────
+📊 SCORES GLOBAUX
+──────────────────────────────────────────────────────────────
+
+| Domaine | Score | Status |
+|---------|-------|--------|
+| Accessibilité | /100 | ✅/❌ |
+| UX/Ergonomie | /100 | ✅/❌ |
+| UI Design | /100 | ✅/❌ |
+| **Global** | **/100** | |
+
+Lighthouse:
+| Performance | Accessibility | Best Practices | SEO |
+|-------------|---------------|----------------|-----|
+| /100 | /100 | /100 | /100 |
+
+──────────────────────────────────────────────────────────────
+❌ PROBLÈMES CRITIQUES (Bloquants)
+──────────────────────────────────────────────────────────────
+
+### A11y
+| # | Critère WCAG | Description | Remédiation |
+|---|--------------|-------------|-------------|
+
+### UX
+| # | Heuristique | Description | Remédiation |
+|---|-------------|-------------|-------------|
+
+### UI
+| # | Aspect | Description | Remédiation |
+|---|--------|-------------|-------------|
+
+──────────────────────────────────────────────────────────────
+⚠️ PROBLÈMES MAJEURS (Importants)
+──────────────────────────────────────────────────────────────
+
+{Tableau similaire}
+
+──────────────────────────────────────────────────────────────
+ℹ️ AMÉLIORATIONS SUGGÉRÉES
+──────────────────────────────────────────────────────────────
+
+{Tableau similaire}
+
+──────────────────────────────────────────────────────────────
+✅ POINTS POSITIFS
+──────────────────────────────────────────────────────────────
+
+- {bonne pratique 1}
+- {bonne pratique 2}
+
+──────────────────────────────────────────────────────────────
+🎯 PLAN D'ACTION PRIORISÉ
+──────────────────────────────────────────────────────────────
+
+### Priorité 1 - Critiques (immédiat)
+1. [ ] {action}
+2. [ ] {action}
+
+### Priorité 2 - Majeurs (cette semaine)
+1. [ ] {action}
+2. [ ] {action}
+
+### Priorité 3 - Améliorations (backlog)
+1. [ ] {action}
+2. [ ] {action}
+
+──────────────────────────────────────────────────────────────
+📋 ARBITRAGES EFFECTUÉS
+──────────────────────────────────────────────────────────────
+
+En cas de conflit entre recommandations :
+1. Accessibilité AAA (non négociable)
+2. Lighthouse 100/100
+3. UX prime sur UI
+4. Mobile-first
+5. Cohérence design system
+```
+
+## Règles d'Arbitrage
+
+| Priorité | Règle |
+|----------|-------|
+| 1 | Accessibilité AAA non négociable |
+| 2 | Lighthouse 100/100 obligatoire |
+| 3 | UX > Esthétique |
+| 4 | Mobile-first |
+| 5 | Cohérence design system |

package/Dev/i18n/fr/Common/commands/uiux-component-spec.md

@@ -0,0 +1,264 @@
+---
+description: Spécification Complète Composant UI/UX/A11y
+argument-hint: [arguments]
+---
+
+# Spécification Complète Composant UI/UX/A11y
+
+Tu es l'Orchestrateur UI/UX. Tu dois produire une spécification complète d'un composant en mobilisant les 3 experts : UX pour le comportement, UI pour le visuel, A11y pour l'accessibilité.
+
+## Arguments
+$ARGUMENTS
+
+Arguments :
+- Nom du composant à spécifier
+- (Optionnel) Contexte d'usage
+
+Exemple : `/common:uiux-component-spec Button` ou `/common:uiux-component-spec "Card Séjour" contexte SaaS tourisme`
+
+## MISSION
+
+### Étape 1 : Analyse UX (Expert UX)
+
+Définir le comportement et l'usage :
+- Objectif du composant
+- Cas d'utilisation principaux
+- Interactions attendues
+- États fonctionnels
+
+### Étape 2 : Spécification UI (Expert UI)
+
+Définir le visuel :
+- Anatomie et structure
+- Variantes
+- États visuels
+- Tokens utilisés
+- Responsive
+
+### Étape 3 : Spécification A11y (Expert A11y)
+
+Définir l'accessibilité :
+- Sémantique HTML
+- Attributs ARIA
+- Navigation clavier
+- Annonces lecteur d'écran
+
+### Étape 4 : Synthèse
+
+```
+══════════════════════════════════════════════════════════════
+📦 SPÉCIFICATION COMPOSANT : {NOM}
+══════════════════════════════════════════════════════════════
+
+Catégorie : Atom | Molecule | Organism
+Date : {date}
+Version : 1.0
+
+──────────────────────────────────────────────────────────────
+🧠 COMPORTEMENT (UX)
+──────────────────────────────────────────────────────────────
+
+### Objectif
+{Description du rôle et de la valeur pour l'utilisateur}
+
+### Cas d'utilisation
+| Cas | Contexte | Comportement attendu |
+|-----|----------|---------------------|
+| Principal | {contexte} | {comportement} |
+| Secondaire | {contexte} | {comportement} |
+
+### États fonctionnels
+| État | Déclencheur | Comportement |
+|------|-------------|--------------|
+| default | Initial | {comportement} |
+| loading | Action en cours | {comportement} |
+| success | Action réussie | {comportement} |
+| error | Échec | {comportement} |
+| empty | Pas de données | {comportement} |
+
+### Feedback utilisateur
+| Action | Feedback | Délai |
+|--------|----------|-------|
+| Click | {feedback} | Immédiat |
+| Hover | {feedback} | Immédiat |
+| Submit | {feedback} | < 200ms |
+
+──────────────────────────────────────────────────────────────
+🎨 VISUEL (UI)
+──────────────────────────────────────────────────────────────
+
+### Anatomie
+```
+┌─────────────────────────────────┐
+│ [Icon]  Label         [Action] │
+│         Description            │
+└─────────────────────────────────┘
+```
+
+- **Slot 1** : {description}
+- **Slot 2** : {description}
+
+### Dimensions
+| Propriété | Mobile | Tablet | Desktop |
+|-----------|--------|--------|---------|
+| min-width | {val} | {val} | {val} |
+| height | {val} | {val} | {val} |
+| padding | {val} | {val} | {val} |
+
+### Variantes
+| Variante | Usage | Différences visuelles |
+|----------|-------|----------------------|
+| primary | CTA principal | {tokens} |
+| secondary | Action secondaire | {tokens} |
+| ghost | Action tertiaire | {tokens} |
+| destructive | Suppression | {tokens} |
+
+### États visuels
+| État | Background | Border | Text | Autres |
+|------|------------|--------|------|--------|
+| default | --color-{x} | --color-{x} | --color-{x} | |
+| hover | --color-{x} | --color-{x} | --color-{x} | cursor: pointer |
+| focus | --color-{x} | --color-{x} | --color-{x} | outline: 2px |
+| active | --color-{x} | --color-{x} | --color-{x} | transform |
+| disabled | --color-{x} | --color-{x} | --color-{x} | opacity: 0.5 |
+| loading | --color-{x} | --color-{x} | --color-{x} | spinner |
+
+### Micro-interactions
+| Trigger | Animation | Duration | Easing |
+|---------|-----------|----------|--------|
+| hover | {effect} | 150ms | ease-out |
+| click | {effect} | 100ms | ease-in |
+| focus | {effect} | 0ms | - |
+
+### Tokens utilisés
+```css
+/* Couleurs */
+--color-primary-500
+--color-neutral-100
+--color-error-500
+
+/* Typographie */
+--font-size-sm
+--font-weight-medium
+
+/* Espacements */
+--spacing-2
+--spacing-4
+
+/* Autres */
+--radius-md
+--shadow-sm
+--transition-fast
+```
+
+──────────────────────────────────────────────────────────────
+♿ ACCESSIBILITÉ (A11y)
+──────────────────────────────────────────────────────────────
+
+### Sémantique HTML
+```html
+<button type="button" class="{composant}">
+  <!-- Utiliser élément natif -->
+</button>
+```
+
+### Attributs ARIA
+| Attribut | Valeur | Condition |
+|----------|--------|-----------|
+| aria-label | "{texte}" | Si icône seule |
+| aria-describedby | "{id}" | Si description |
+| aria-disabled | "true" | Si désactivé |
+| aria-busy | "true" | Si loading |
+
+### Navigation clavier
+| Touche | Action |
+|--------|--------|
+| Tab | Focus sur l'élément |
+| Enter | Activer |
+| Space | Activer |
+| Escape | Annuler (si applicable) |
+
+### Focus management
+- **Focus initial** : Automatique via tabindex
+- **Style focus** : outline 2px solid, offset 2px, ratio ≥ 3:1
+- **Trap** : Non applicable (pas une modale)
+
+### Contraste (AAA)
+| Élément | Ratio requis | Ratio actuel |
+|---------|--------------|--------------|
+| Texte label | ≥ 7:1 | ✅ {ratio} |
+| Icône | ≥ 3:1 | ✅ {ratio} |
+| Border | ≥ 3:1 | ✅ {ratio} |
+
+### Annonces lecteur d'écran
+| Moment | Annonce |
+|--------|---------|
+| Focus | "{label}, bouton" |
+| Loading | "Chargement en cours" |
+| Success | "Action réussie" |
+| Error | "Erreur : {message}" |
+
+### Touch target
+- Taille minimum : 44×44px ✅
+- Espacement : ≥ 8px ✅
+
+──────────────────────────────────────────────────────────────
+💻 IMPLÉMENTATION
+──────────────────────────────────────────────────────────────
+
+### Props Interface (TypeScript)
+```typescript
+interface {Composant}Props {
+  /** Variante visuelle */
+  variant?: 'primary' | 'secondary' | 'ghost' | 'destructive';
+  /** Taille du composant */
+  size?: 'sm' | 'md' | 'lg';
+  /** État désactivé */
+  disabled?: boolean;
+  /** État de chargement */
+  loading?: boolean;
+  /** Icône à gauche */
+  leftIcon?: ReactNode;
+  /** Icône à droite */
+  rightIcon?: ReactNode;
+  /** Gestionnaire de clic */
+  onClick?: () => void;
+  /** Contenu */
+  children: ReactNode;
+}
+```
+
+### Exemple d'usage
+```tsx
+<Button
+  variant="primary"
+  size="md"
+  leftIcon={<PlusIcon />}
+  onClick={handleClick}
+>
+  Ajouter
+</Button>
+```
+
+──────────────────────────────────────────────────────────────
+✅ CHECKLIST VALIDATION
+──────────────────────────────────────────────────────────────
+
+### UX
+- [ ] Objectif clair défini
+- [ ] Tous les états fonctionnels documentés
+- [ ] Feedback utilisateur spécifié
+
+### UI
+- [ ] Toutes les variantes définies
+- [ ] Tous les états visuels spécifiés
+- [ ] Responsive documenté
+- [ ] Tokens uniquement (pas de hardcode)
+
+### A11y
+- [ ] Sémantique HTML correcte
+- [ ] ARIA minimal et correct
+- [ ] Navigation clavier complète
+- [ ] Contrastes AAA vérifiés
+- [ ] Touch targets ≥ 44px
+```

package/Dev/i18n/fr/Common/commands/uiux-orchestrator.md

@@ -0,0 +1,98 @@
+---
+description: Orchestrateur UI/UX
+argument-hint: [arguments]
+---
+
+# Orchestrateur UI/UX
+
+Tu es l'Orchestrateur UI/UX. Tu dois coordonner les 3 experts pour livrer des interfaces exceptionnelles.
+
+## Arguments
+$ARGUMENTS
+
+Arguments :
+- Type de demande : composant, audit, flux, tokens
+- Objectif ou description
+
+Exemple : `/common:uiux-orchestrator composant "Sélecteur de date"` ou `/common:uiux-orchestrator audit "Page checkout"`
+
+## MISSION
+
+### Étape 1 : Analyser la demande
+
+Identifier :
+- Type de livrable attendu
+- Expert(s) à impliquer
+- Ordre d'intervention
+
+### Étape 2 : Déléguer aux experts
+
+| Type | Experts | Ordre |
+|------|---------|-------|
+| Nouveau composant | UI → UX → A11y | Séquentiel |
+| Audit | A11y → UX → UI | Séquentiel |
+| Flux utilisateur | UX → UI → A11y | Séquentiel |
+| Design tokens | UI uniquement | Direct |
+
+### Étape 3 : Consolider et arbitrer
+
+En cas de conflit, appliquer les règles de priorité :
+1. Accessibilité AAA (non négociable)
+2. Lighthouse 100/100
+3. UX > Esthétique
+4. Mobile-first
+5. Cohérence design system
+
+### Étape 4 : Livrer la synthèse
+
+```
+══════════════════════════════════════════════════════════════
+📋 SYNTHÈSE UI/UX : {SUJET}
+══════════════════════════════════════════════════════════════
+
+Type : {Composant | Audit | Flux | Tokens}
+Date : {date}
+
+──────────────────────────────────────────────────────────────
+🧠 UX
+──────────────────────────────────────────────────────────────
+
+{Résumé apports UX}
+
+──────────────────────────────────────────────────────────────
+🎨 UI
+──────────────────────────────────────────────────────────────
+
+{Résumé apports UI}
+
+──────────────────────────────────────────────────────────────
+♿ ACCESSIBILITÉ
+──────────────────────────────────────────────────────────────
+
+{Résumé apports A11y}
+
+──────────────────────────────────────────────────────────────
+⚖️ ARBITRAGES
+──────────────────────────────────────────────────────────────
+
+| Conflit | Décision | Justification |
+|---------|----------|---------------|
+| {conflit} | {décision} | {règle appliquée} |
+
+──────────────────────────────────────────────────────────────
+✅ CHECKLIST VALIDATION
+──────────────────────────────────────────────────────────────
+
+- [ ] WCAG 2.2 AAA conforme
+- [ ] Lighthouse 100/100 préservé
+- [ ] Mobile-first respecté
+- [ ] Uniquement tokens (pas de hardcode)
+- [ ] Les 3 experts consultés
+
+──────────────────────────────────────────────────────────────
+🎯 PROCHAINES ÉTAPES
+──────────────────────────────────────────────────────────────
+
+1. {action prioritaire}
+2. {action suivante}
+```