commit df656f9818517b5ba00e49029ca5f4010fe4dafb Author: Zhongwei Li Date: Sun Nov 30 08:26:40 2025 +0800 Initial commit diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json new file mode 100644 index 0000000..0f8c12d --- /dev/null +++ b/.claude-plugin/plugin.json @@ -0,0 +1,18 @@ +{ + "name": "leapmultix-dev-audit", + "description": "Audit pack: accessibility, i18n, security, and governance helpers", + "version": "1.0.0", + "author": { + "name": "Julien LE SAUX", + "email": "contact@jls42.org" + }, + "skills": [ + "./skills" + ], + "agents": [ + "./agents" + ], + "commands": [ + "./commands" + ] +} \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..04c0a77 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# leapmultix-dev-audit + +Audit pack: accessibility, i18n, security, and governance helpers diff --git a/agents/accessibility-auditor.md b/agents/accessibility-auditor.md new file mode 100644 index 0000000..1d7ab03 --- /dev/null +++ b/agents/accessibility-auditor.md @@ -0,0 +1,53 @@ +--- +name: accessibility-auditor +description: Auditeur d'accessibilité expert pour la conformité WCAG 2.1 AA. Utiliser de manière proactive après des modifications de l'interface utilisateur ou pour des audits complets. +tools: Read, Grep, Glob, Bash, WebSearch +model: inherit +color: orange +--- + +Vous êtes un auditeur d'accessibilité d'élite avec une expertise approfondie de la conformité WCAG 2.1 Niveau AA. Votre mission est d'identifier les obstacles à l'accessibilité et de fournir des stratégies de remédiation exploitables basées sur le code existant du projet `leapmultix`. + +## Contexte du projet : leapmultix + +- **Public cible** : Enfants de 6 à 12 ans. +- **Modules Clés** : `js/accessibility.js`, `js/keyboard-navigation.js`, `js/speech.js`. +- **Normes** : Conformité WCAG 2.1 Niveau AA obligatoire. + +## Vos Principes d'Audit Fondamentaux + +Au lieu de vous fier à des exemples de code statiques, basez votre audit sur les principes suivants, en utilisant le code vivant du projet comme source de vérité. + +### 1. POUR (Perceptible, Utilisable, Compréhensible, Robuste) + +- **Perceptible** : L'information est-elle présentée via plusieurs modalités (visuelle, textuelle, auditive) ? +- **Utilisable** : Tous les composants sont-ils accessibles et contrôlables au clavier ? +- **Compréhensible** : Les étiquettes, instructions et messages d'erreur sont-ils clairs et simples ? +- **Robuste** : Le code utilise-t-il du HTML sémantique et des attributs ARIA corrects pour assurer la compatibilité avec les technologies d'assistance ? + +### 2. Navigation au Clavier + +- **Ordre de Tabulation** : L'ordre de focus est-il logique et intuitif ? +- **Pièges à Clavier** : L'utilisateur peut-il s'échapper de tous les composants (modales, menus) avec la touche `Escape` ? +- **Indicateurs de Focus** : Le focus est-il toujours clairement visible ? +- **Raccourcis** : Les raccourcis sont-ils documentés et ne rentrent-ils pas en conflit avec les commandes du navigateur/lecteur d'écran ? + +### 3. Compatibilité avec les Lecteurs d'Écran + +- **Étiquettes ARIA** : Les contrôles non-standards ont-ils des `aria-label` descriptifs ? Les icônes sont-elles cachées avec `aria-hidden="true"` ? +- **Régions Live** : Les mises à jour dynamiques (scores, minuteurs, erreurs) sont-elles annoncées via des régions `aria-live` ? +- **États** : Les changements d'état (ex: `aria-pressed`, `aria-expanded`, `aria-invalid`) sont-ils correctement gérés ? + +## Flux de travail de l'Audit + +1. **Analyse Statique :** Utilisez les outils pour lire et analyser les fichiers pertinents (`html`, `css`, `js`). +2. **Exécution de Scripts :** Exécutez les scripts de test d'accessibilité du projet (`npm run audit:accessibility`). +3. **Rapport :** Structurez vos conclusions en utilisant le template de rapport défini. + +## Format de Sortie Requis (CRITIQUE) + +Pour générer ton rapport final, tu DOIS : + +1. Lire le fichier `.claude/skills/report-template-accessibility.md`. +2. Utiliser son contenu comme template exact pour ta réponse. +3. Remplir chaque section du template avec tes conclusions d'audit. Ne dévie pas de ce format. diff --git a/agents/i18n-coordinator.md b/agents/i18n-coordinator.md new file mode 100644 index 0000000..50ec752 --- /dev/null +++ b/agents/i18n-coordinator.md @@ -0,0 +1,24 @@ +--- +name: i18n-coordinator +description: Coordinateur expert en internationalisation. À utiliser de manière proactive lors de la modification de traductions ou de l'ajout de texte dans l'interface utilisateur. +tools: Read, Write, Bash, Grep, Glob +model: inherit +--- + +Vous êtes un coordinateur d'internationalisation expert. + +## Contexte du projet : Système i18n de leapmultix + +- **Langue de référence :** Français (`i18n/fr.json`). +- **Scripts clés :** `npm run i18n:compare`, `npm run i18n:unused`, `scripts/cleanup-i18n-keys.cjs`. + +## Vos Principes de Coordination + +1. **Synchronisation :** La priorité absolue est de maintenir les fichiers `en.json` et `es.json` parfaitement synchronisés avec `fr.json`. Utilisez `npm run i18n:compare` pour détecter les clés manquantes, supplémentaires, ou les valeurs vides. +2. **Qualité :** Ne laissez jamais de valeurs vides (`""`, `null`). Assurez la cohérence des types (chaîne vs. tableau) entre les langues. +3. **Nettoyage :** Utilisez `npm run i18n:unused` pour identifier et proposer la suppression des clés obsolètes. +4. **Bonnes Pratiques :** Appliquez les conventions de nommage (ex: `namespace.page.element`) et utilisez l'interpolation (`{variable}`) pour les chaînes dynamiques. + +## Format de Sortie Requis (CRITIQUE) + +Pour générer votre rapport, tu DOIS lire et utiliser le template du fichier `.claude/skills/report-template-i18n.md`. diff --git a/agents/pwa-expert.md b/agents/pwa-expert.md new file mode 100644 index 0000000..60203ed --- /dev/null +++ b/agents/pwa-expert.md @@ -0,0 +1,25 @@ +--- +name: pwa-expert +description: Spécialiste des Progressive Web App pour les service workers, la fonctionnalité hors ligne et la mise en cache. À utiliser pour les modifications de PWA ou les audits avant mise en production. +tools: Read, Write, Bash, Grep, Glob, WebSearch +model: inherit +color: cyan +--- + +Vous êtes un spécialiste PWA d'élite. + +## Contexte du projet : leapmultix + +- **Fichiers Clés :** `sw.js` (Service Worker), `manifest.json`, `cache-updater.js`. +- **Objectifs :** Scores Lighthouse > 90, fonctionnalité hors ligne robuste, stratégie de cache efficace. + +## Vos Principes d'Expertise PWA + +1. **Service Worker & Cache :** La priorité est une stratégie de cache robuste. Vérifiez la gestion des versions du cache, la séparation cache-first (statique) vs network-first (dynamique), et le nettoyage des anciens caches. +2. **Fonctionnalité Hors Ligne :** Testez systématiquement le comportement de l'application en mode hors ligne. Assurez-vous que le repli (`offline.html`) fonctionne et que l'expérience utilisateur reste cohérente. +3. **Manifeste Web :** Assurez-vous que `manifest.json` est complet et valide, incluant les icônes (notamment masquables), les captures d'écran et les couleurs de thème pour une expérience d'installation optimale. +4. **Optimisation Lighthouse :** Auditez l'application avec Lighthouse et concentrez-vous sur les opportunités spécifiques aux PWA pour atteindre les scores cibles. + +## Format de Sortie Requis (CRITIQUE) + +Pour générer votre rapport d'audit, tu DOIS lire et utiliser le template du fichier `.claude/skills/report-template-pwa.md`. diff --git a/agents/web-research-specialist.md b/agents/web-research-specialist.md new file mode 100644 index 0000000..411da46 --- /dev/null +++ b/agents/web-research-specialist.md @@ -0,0 +1,23 @@ +--- +name: web-research-specialist +description: Utiliser cet agent pour recueillir des informations sur internet via des recherches web, la récupération de contenu, ou l'interrogation de documentation technique. +tools: Bash, Glob, Grep, Read, WebFetch, TodoWrite, WebSearch, BashOutput, mcp__context7__resolve-library-id, mcp__context7__get-library-docs, Skill, SlashCommand +model: inherit +color: pink +--- + +Vous êtes un spécialiste expert en recherche sur le Web. + +## Votre Méthodologie de Recherche + +1. **Analyse de la Requête :** Comprendre le besoin d'information fondamental. +2. **Stratégie de Sélection d'Outils :** Commencez par `WebSearch` pour les requêtes générales, `WebFetch` pour les URLs spécifiques, et `MCP Context7` pour la documentation technique/de code. +3. **Synthèse de l'Information :** Organisez les résultats de manière logique, croisez les sources, et mettez en évidence les informations clés. + +## Format de Sortie Requis (CRITIQUE) + +Pour générer votre résumé de recherche, vous DEVEZ : + +1. Lire le fichier `.claude/skills/report-template-web-research.md`. +2. Utiliser son contenu comme template exact pour votre réponse. +3. Remplir chaque section du template avec vos résultats. diff --git a/commands/audit-config.md b/commands/audit-config.md new file mode 100644 index 0000000..9f3038d --- /dev/null +++ b/commands/audit-config.md @@ -0,0 +1,40 @@ +--- +description: Audits Skills, Subagents or Slash Commands for compliance with best practices +--- + +# Audit de Conformité + +Utilisez l'agent-architecte pour auditer la conformité des composants de configuration. + +## Arguments + +- `skills` - Auditer tous les Skills +- `agents` ou `subagents` - Auditer tous les Subagents +- `commands` ou `slash` - Auditer tous les Slash Commands +- `all` - Auditer tous les composants +- `[nom-composant]` - Auditer un composant spécifique + +## Exemples + +```bash +/audit-config skills # Audite tous les skills +/audit-config agents # Audite tous les agents +/audit-config all # Audit complet +/audit-config accessibility # Audite le skill accessibility +``` + +--- + +Je vais maintenant utiliser l'agent-architecte pour auditer : **$ARGUMENTS** + +Utilise l'agent `agent-architecte` avec le workflow Mode 2 (Audit de Composants Existants) pour : + +1. Identifier les composants concernés ($ARGUMENTS) +2. Auditer chaque composant avec les checklists de `config-compliance-checker` +3. Générer un rapport consolidé avec : + - Scores de conformité + - Problèmes classés par criticité (🔴🟡🔵) + - Top corrections prioritaires + - Diffs proposés pour corrections + +Le rapport doit être structuré et exploitable pour améliorer la qualité des configurations. diff --git a/plugin.lock.json b/plugin.lock.json new file mode 100644 index 0000000..44183b6 --- /dev/null +++ b/plugin.lock.json @@ -0,0 +1,81 @@ +{ + "$schema": "internal://schemas/plugin.lock.v1.json", + "pluginId": "gh:jls42/leapmultix:leapmultix-marketplace/leapmultix-dev-audit", + "normalized": { + "repo": null, + "ref": "refs/tags/v20251128.0", + "commit": "7893ad2f3eba7aec37e0ae403496b95dbc3435ca", + "treeHash": "34a886dbc59ecb9aadad7d048b3a1ec551e776dfd2d1233875c12f57bf50c76b", + "generatedAt": "2025-11-28T10:19:10.158387Z", + "toolVersion": "publish_plugins.py@0.2.0" + }, + "origin": { + "remote": "git@github.com:zhongweili/42plugin-data.git", + "branch": "master", + "commit": "aa1497ed0949fd50e99e70d6324a29c5b34f9390", + "repoRoot": "/Users/zhongweili/projects/openmind/42plugin-data" + }, + "manifest": { + "name": "leapmultix-dev-audit", + "description": "Audit pack: accessibility, i18n, security, and governance helpers", + "version": "1.0.0" + }, + "content": { + "files": [ + { + "path": "README.md", + "sha256": "1653f949951d62c9df490eba1a36d099eccaa08e84f20467c71cb8efcefa02f1" + }, + { + "path": "agents/web-research-specialist.md", + "sha256": "ee848a442eaa47ae540bac57ce4d8b759fdda5a304689a2fa4d28c7b0c229796" + }, + { + "path": "agents/accessibility-auditor.md", + "sha256": "e1a5ccf3ae2117641d04d158af7c527e9422202cb56500d1fa0dfc9ea911e8e3" + }, + { + "path": "agents/pwa-expert.md", + "sha256": "b9d046e78edfe801a64edc5f58f2cd3daf15b43a182f89b8edac3f3a3d3779a6" + }, + { + "path": "agents/i18n-coordinator.md", + "sha256": "c824ef16ddfb007d4ac830e171789ebca91ab4d03e92fb3721798a292fc779c2" + }, + { + "path": ".claude-plugin/plugin.json", + "sha256": "6bec4612620d2cbc1b130afcf7d16e0794b99c0f5b52487a77bde41e19dcdd47" + }, + { + "path": "commands/audit-config.md", + "sha256": "129beda55e91e48f1680d8af6babe3a6c857de396ad2316606b68a5180972e43" + }, + { + "path": "skills/i18n-sync/SKILL.md", + "sha256": "3f4903c3df10d0daf7d26080864207dc42a2bcfbbc05d82338c1d34933fcffbd" + }, + { + "path": "skills/auditing-security/SKILL.md", + "sha256": "17e064d7336d2e70988cf3ad28133cf2a96fcbd922f1e464519a89df30b997d3" + }, + { + "path": "skills/pwa-service-worker/SKILL.md", + "sha256": "4756ee8cbe4e310653218976ae893c38ecd2357e335c21c32e2f4d2b21a59a3b" + }, + { + "path": "skills/dependency-management/SKILL.md", + "sha256": "04dcd20b3e6679803812fe2e3d505c27481c830c37e5a3367eff6824af7b2435" + }, + { + "path": "skills/validating-accessibility/SKILL.md", + "sha256": "f5d0639750a96fb054d936a3361015464e3bcbca3c29bfa41c76f0a37e5f13cd" + } + ], + "dirSha256": "34a886dbc59ecb9aadad7d048b3a1ec551e776dfd2d1233875c12f57bf50c76b" + }, + "security": { + "scannedAt": null, + "scannerVersion": null, + "flags": [] + } +} \ No newline at end of file diff --git a/skills/auditing-security/SKILL.md b/skills/auditing-security/SKILL.md new file mode 100644 index 0000000..2e0329f --- /dev/null +++ b/skills/auditing-security/SKILL.md @@ -0,0 +1,214 @@ +--- +name: auditing-security +description: Audits application security (XSS, CSP, vulnerable dependencies, CORS). Use before releases, after adding dependencies, or modifying security-utils.js +allowed-tools: Read, Grep, Glob, Bash, WebSearch +--- + +# Security Audit + +Audite la sécurité de l'application web selon standards OWASP et best practices. + +## Table des matières + +- [Quand utiliser](#quand-utiliser) +- [Domaines de sécurité](#domaines-de-sécurité) +- [Checklist sécurité](#checklist-sécurité) +- [Outils d'audit](#outils-daudit) +- [En cas de doute](#en-cas-de-doute) + +## Quand utiliser + +- Avant chaque release en production +- Après ajout/mise à jour dépendances npm +- Modifications de `security-utils.js` +- Warnings eslint-plugin-security +- Avant commit manipulant HTML dynamique +- Ajout de scripts externes (CDN, analytics) + +## Domaines de sécurité + +### 1. XSS (Cross-Site Scripting) Prevention + +**Règle absolue : Utiliser security-utils.js** + +Trouve security-utils.js pour voir fonctions disponibles : + +- `appendSanitizedHTML()` - Insérer HTML dynamique +- `createSafeElement()` - Créer élément avec contenu sécurisé +- `setSafeMessage()` - Définir texte (pas HTML) + +**Dangers :** + +- `innerHTML` avec user input → XSS +- Fonctions d'exécution dynamique avec données externes +- Event handlers depuis user input + +**Exceptions sécurisées :** + +- `innerHTML = ''` (nettoyage) +- `getTranslation()` output (contenu interne) + +### 2. Content Security Policy (CSP) + +**Principe : Meta tag CSP dans index.html** + +Examine index.html pour voir configuration CSP actuelle. + +**Baseline restrictive :** + +- `default-src 'self'` +- Pas de `'unsafe-eval'` dans script-src +- `'unsafe-inline'` limité au strict nécessaire +- `frame-ancestors 'none'` pour prévenir clickjacking + +**Scripts externes :** + +- Toujours `crossorigin="anonymous"` +- Integrity hashes pour bibliothèques statiques +- PAS d'integrity pour analytics (auto-update) +- Documenter exceptions avec commentaires + +### 3. Dependency Vulnerabilities + +**Commandes audit :** + +```bash +npm audit # Scan vulnérabilités +npm audit --json # Rapport détaillé +npm audit fix # Fix auto (patch/minor) +npm audit fix --force # Fix breaking (attention!) +``` + +**Niveaux de sévérité :** + +- **Critical/High** : Fix immédiatement avant release +- **Moderate** : Fix dans sprint suivant +- **Low** : Monitorer, fix si possible + +**Vérifier :** + +- Pas de dépendances deprecated +- Versions à jour (pas trop anciennes) +- Licences compatibles + +### 4. HTTPS et Mixed Content + +**Vérifier :** + +- HTTPS obligatoire en production +- Pas de resources HTTP (mixed content) +- Redirection HTTP → HTTPS +- HSTS header + +Examine configuration serveur ou CDN. + +### 5. Secrets et Credentials + +**Règles :** + +- **JAMAIS** committer secrets (API keys, tokens, passwords) +- **JAMAIS** stocker passwords en LocalStorage +- Utiliser variables d'environnement +- .gitignore pour fichiers sensibles (.env, credentials.json) + +**Vérifier :** + +- Pas de secrets hardcodés dans code +- .env dans .gitignore +- Terraform state pas committé + +### 6. LocalStorage Security + +**Données sensibles :** + +- **JAMAIS** tokens d'authentification +- **JAMAIS** passwords ou PII +- OK pour préférences utilisateur non sensibles + +**Vérifier :** + +- storage.js utilise localStorage correctement +- Pas de données sensibles stockées +- Données validées avant lecture + +## Checklist sécurité + +- [ ] Tous `innerHTML` utilisent `appendSanitizedHTML()` ou justifiés +- [ ] Pas de fonctions d'exécution dynamique avec données externes +- [ ] Meta tag CSP présent dans index.html +- [ ] `crossorigin="anonymous"` sur scripts externes +- [ ] `npm audit` sans Critical/High +- [ ] Pas de secrets hardcodés +- [ ] Pas de données sensibles en LocalStorage +- [ ] HTTPS en production +- [ ] Pas de mixed content +- [ ] Tests sécurité passent + +## Outils d'audit + +**ESLint Security :** + +```bash +npm run lint # Inclut eslint-plugin-security +``` + +**Dependency Scan :** + +```bash +npm audit +``` + +**Lighthouse Security Audit :** + +- Lance Chrome DevTools → Lighthouse +- Vérifie section Security +- Score doit être 100 + +**OWASP ZAP (optionnel) :** + +- Scan automatisé pour vulnérabilités web +- Tests de pénétration + +## En cas de doute + +**Source :** security-utils.js + CLAUDE.md + +**Fichiers clés :** + +1. `js/security-utils.js` - Fonctions sécurité du projet +2. `eslint.config.js` - Règles security ESLint +3. `index.html` - Configuration CSP +4. `CLAUDE.md` - Guidelines sécurité + +**Règles absolues :** + +1. TOUJOURS utiliser security-utils.js pour manipulation DOM +2. TOUJOURS audit avant release (`npm audit`) +3. JAMAIS `innerHTML` avec user input direct +4. JAMAIS stocker données sensibles en LocalStorage +5. JAMAIS scripts externes sans `crossorigin="anonymous"` + +**Workflow minimal avant commit :** + +```bash +npm run lint # ESLint security rules +npm audit # Dependency check +npm test # Security tests +``` + +**Workflow complet avant release :** + +```bash +npm run verify # Full quality gate +npm audit --audit-level=moderate # Dependency audit +# Lighthouse security audit +# Review index.html CSP config +``` + +**Red flags (arrêter immédiatement) :** + +- Fonctions d'exécution dynamique avec données externes +- `innerHTML = userInput` +- Tokens/passwords en LocalStorage +- npm audit Critical/High +- Scripts CDN sans crossorigin diff --git a/skills/dependency-management/SKILL.md b/skills/dependency-management/SKILL.md new file mode 100644 index 0000000..4fb8353 --- /dev/null +++ b/skills/dependency-management/SKILL.md @@ -0,0 +1,159 @@ +--- +name: managing-dependencies +description: Manages npm dependencies (audit, updates, breaking changes, lockfile). Use before releases, after adding packages, or monthly for maintenance +allowed-tools: Read, Grep, Glob, Bash +--- + +# Gestion des Dépendances + +Gère dépendances npm de manière sécurisée (audit, mises à jour, lockfile). + +## Table des matières + +- [Quand utiliser](#quand-utiliser) +- [Scripts npm](#scripts-npm) +- [Workflows essentiels](#workflows-essentiels) +- [Gestion vulnérabilités](#gestion-vulnérabilités) +- [Migrations majeures](#migrations-majeures) +- [Bonnes pratiques](#bonnes-pratiques) +- [Checklist](#checklist) +- [En cas de doute](#en-cas-de-doute) + +## Quand utiliser + +- Avant chaque release production +- Après ajout nouvelles dépendances +- Mensuellement maintenance proactive +- Quand vulnérabilités signalées +- Migrations versions majeures + +## Scripts npm + +- `npm audit` - Vue d'ensemble sécurité +- `npm audit --json` - Rapport détaillé +- `npm audit fix` - Fix auto (patch/minor) +- `npm outdated` - Packages à mettre à jour +- `npm update` - Update patches/minors +- `npm ls` / `npm ls --depth=0` - Arbre dépendances + +## Workflows essentiels + +**Audit sécurité :** + +- CRITICAL/HIGH → Corriger immédiatement +- MODERATE → Corriger avant release +- LOW → Corriger quand possible + +**Types mises à jour (SemVer) :** + +- Patch (1.0.x) → Bugs, sécurisé +- Minor (1.x.0) → Features, rétrocompatible +- Major (x.0.0) → Breaking, nécessite tests + +**Stratégie :** + +- Patches → Auto si tests passent +- Minors → Manuel vérification +- Majors → Manuel migration plan + +**Lockfile :** + +- Garantit versions exactes +- Commit toujours avec package.json +- Désynchronisé → `npm install` +- Conflit merge → Résoudre + `npm install` + +## Gestion vulnérabilités + +**Critiques/Hautes :** Fix immédiat, tester, déployer rapidement + +**Sans fix :** Package alternatif, fork + patch, monitorer, désactiver si possible + +**Packages deprecated :** Chercher alternatives maintenues, planifier migration + +## Migrations majeures + +**Préparation :** + +1. Lire CHANGELOG (breaking changes) +2. Estimer impact code +3. Créer branche dédiée + +**Exécution :** + +1. Update package.json +2. Adapter code aux breaking changes +3. Corriger erreurs TS/ESLint +4. Tests exhaustifs + +**Validation :** + +- Tests passent +- Lighthouse score OK +- Performance stable +- Pas régressions visuelles + +## Bonnes pratiques + +**Do's :** + +- Commit lockfile toujours +- Audit hebdomadaire minimum +- Tests après update +- Un update à la fois +- Lire CHANGELOG majors +- Respecter SemVer + +**Don'ts :** + +- Pas `npm install --force` (sauf urgence) +- Pas updates aveugles +- Pas lockfile .gitignore +- Pas updates avant release +- Pas dépendances non maintenues + +## Checklist + +- [ ] `npm audit` sans CRITICAL/HIGH +- [ ] `npm outdated` vérifié +- [ ] Lockfile synchronisé +- [ ] Tests passent après update +- [ ] Build OK +- [ ] Performance stable +- [ ] Pas deprecated packages +- [ ] CHANGELOG lu (majors) +- [ ] Lockfile committé + +## En cas de doute + +**Règles absolues :** + +1. `npm audit` AVANT release obligatoire +2. Tester APRÈS mise à jour +3. Jamais ignorer lockfile +4. CHANGELOG pour majors +5. CRITICAL/HIGH fix immédiat + +**Workflow mensuel :** + +```bash +npm outdated +npm audit +npm update +npm test +``` + +**Workflow avant release :** + +```bash +npm audit --audit-level=moderate +npm outdated +npm test +npm run build +``` + +**Références :** + +- package.json - Versions actuelles +- package-lock.json - Lockfile +- npm docs - Documentation diff --git a/skills/i18n-sync/SKILL.md b/skills/i18n-sync/SKILL.md new file mode 100644 index 0000000..62df61a --- /dev/null +++ b/skills/i18n-sync/SKILL.md @@ -0,0 +1,169 @@ +--- +name: synchronizing-i18n-translations +description: Verifies translation files synchronization (fr.json, en.json, es.json) and detects missing keys, empty values, and type inconsistencies +allowed-tools: Read, Grep, Glob, Bash +--- + +# I18n Translation Synchronization + +Maintient la synchronisation des fichiers de traduction pour toutes les langues supportées. + +## Table des matières + +- [Quand utiliser](#quand-utiliser) +- [Langues supportées](#langues-supportées) +- [Scripts disponibles](#scripts-disponibles) +- [Workflow principal](#workflow-principal) +- [Détection automatique](#détection-automatique) +- [Corriger les erreurs](#corriger-les-erreurs) +- [Structure des fichiers](#structure-des-fichiers) +- [Checklist i18n](#checklist-i18n) +- [En cas de doute](#en-cas-de-doute) + +## Quand utiliser + +- Ajout de nouveaux textes UI +- Modification de traductions existantes +- Avant de committer changements i18n +- Quand `npm run i18n:compare` signale erreurs + +## Langues supportées + +- **fr.json** (référence) - Toujours modifier en premier +- **en.json** (anglais) +- **es.json** (espagnol) + +## Scripts disponibles + +```bash +npm run i18n:compare # Compare tous les fichiers (PRINCIPAL) +npm run i18n:verify # Vérifie cohérence +npm run i18n:unused # Détecte clés inutilisées +``` + +## Workflow principal + +### 1. Vérifier l'état actuel + +```bash +npm run i18n:compare +``` + +Si erreurs, lire le rapport détaillé. + +### 2. Modifier les traductions + +**Règle d'or :** Toujours commencer par `fr.json` + +1. Modifie `fr.json` d'abord +2. Copie la STRUCTURE (pas les valeurs) dans en.json et es.json +3. Traduis les valeurs + +### 3. Vérifier synchronisation + +```bash +npm run i18n:compare +``` + +Doit afficher : "Tous les fichiers de traduction sont parfaitement synchronisés !" + +### 4. Tester dans l'UI + +Lance l'application et teste le sélecteur de langue. + +## Détection automatique + +Le script `npm run i18n:compare` détecte : + +**Clés manquantes :** + +- Clés présentes dans fr.json mais absentes dans en.json/es.json + +**Clés supplémentaires :** + +- Clés présentes dans en.json/es.json mais absentes dans fr.json + +**Valeurs vides :** + +- `""`, `null`, `undefined`, `[]` + +**Incohérences de types :** + +- String vs Array (ex: fr.json = "text", en.json = ["array"]) + +**Format du rapport :** + +- Console détaillée +- JSON exporté dans `docs/translations-comparison-report.json` + +## Corriger les erreurs + +### Clés manquantes + +Ajoute les clés manquantes dans en.json/es.json avec traductions appropriées. + +### Clés supplémentaires + +Supprime les clés supplémentaires OU ajoute-les dans fr.json si nécessaires. + +### Valeurs vides + +Remplace les valeurs vides par traductions appropriées. + +### Types incohérents + +Uniformise le type (soit String partout, soit Array partout). + +## Structure des fichiers + +**Format JSON :** + +```json +{ + "key": "value", + "nested": { + "key": "value" + }, + "array": ["item1", "item2"] +} +``` + +**Dot notation :** + +- `key` → "key" +- `nested.key` → "nested.key" +- `array` → "array" + +Le script aplatit la structure en dot notation pour comparaison. + +## Checklist i18n + +- [ ] fr.json modifié en premier +- [ ] Structure copiée dans en.json et es.json +- [ ] Valeurs traduites correctement +- [ ] `npm run i18n:compare` passe (100% synchronisé) +- [ ] Testé dans UI avec sélecteur de langue +- [ ] Pas de valeurs vides +- [ ] Types cohérents (String ou Array) + +## En cas de doute + +**Source :** fr.json + npm scripts + +**Règles absolues :** + +1. Toujours vérifier avec `npm run i18n:compare` +2. fr.json est la référence (pas en.json, pas es.json) +3. Ne jamais committer avec erreurs i18n +4. Tester dans UI avant commit +5. Scripts npm détectent TOUS les problèmes + +**Workflow minimal :** + +```bash +# Modifier fr.json +npm run i18n:compare # Vérifier +# Copier structure dans en.json, es.json +# Traduire valeurs +npm run i18n:compare # DOIT être OK +``` diff --git a/skills/pwa-service-worker/SKILL.md b/skills/pwa-service-worker/SKILL.md new file mode 100644 index 0000000..f025855 --- /dev/null +++ b/skills/pwa-service-worker/SKILL.md @@ -0,0 +1,94 @@ +--- +name: managing-pwa-service-worker +description: Manages Service Worker updates securely with cache versioning and offline tests. Use when modifying SW, adding resources, or changing cache strategy +allowed-tools: Read, Write, Grep, Glob, Bash +--- + +# PWA Service Worker Manager + +Gère Service Worker pour offline play et cache versioning sécurisé. + +## Quand utiliser + +- Modification Service Worker +- Ajout ressources à cacher +- Changement stratégie cache +- Tests offline +- Correction bugs SW + +## Scripts essentiels + +```bash +npm run test:pwa-offline # Tester offline (PRINCIPAL) +npm run sw:disable # Désactiver SW +npm run sw:fix # Réparer SW +``` + +## Versioning et workflow + +**SemVer (voir sw.js) :** + +- Major : Changements cassants +- Minor : Ressources ajoutées +- Patch : Corrections + +**Workflow :** + +1. **Modifier :** sw.js (version, ressources, handlers) +2. **Incrémenter :** Version (SemVer) +3. **Tester :** `npm run test:pwa-offline` +4. **Vérifier :** DevTools App tab (Offline mode) +5. **Quality :** format:check, lint, test + +## Stratégies de cache + +- **Cache First :** Assets (HTML, CSS, JS, images) +- **Network First :** APIs (données fraîches) +- **Cache Only :** Assets immuables +- **Network Only :** Analytics, auth + +Trouve stratégie dans sw.js existant. + +## Événements SW clés + +- **Install :** Créer cache, skipWaiting() +- **Activate :** Nettoyer anciens caches, clients.claim() +- **Fetch :** Appliquer stratégie, gérer erreurs + +## Debugging + +**Chrome DevTools (F12) → Application → Service Workers :** + +- Offline mode → Tester navigation +- caches.keys() en console → Vérifier caches + +**Problèmes courants :** + +- SW ne s'update → Incrémenter version, skipWaiting() présent +- Ressources manquantes → Ajouter à liste cache +- Cache volumineux → Cacher uniquement ressources critiques + +## Checklist + +- [ ] Version incrémentée (SemVer) +- [ ] skipWaiting() + clients.claim() présents +- [ ] Nettoyage anciens caches +- [ ] Offline test OK (`npm run test:pwa-offline`) +- [ ] DevTools Offline mode OK +- [ ] format:check, lint, test passent + +## En cas de doute + +**Règles absolues :** + +1. Incrémenter version TOUJOURS +2. Tester offline AVANT commit +3. DevTools Application tab verification +4. `npm run test:pwa-offline` doit passer +5. skipWaiting() + clients.claim() essentiels + +**Références :** + +- `sw.js` - Service Worker principal +- `manifest.json` - PWA manifest +- Chrome DevTools Application tab diff --git a/skills/validating-accessibility/SKILL.md b/skills/validating-accessibility/SKILL.md new file mode 100644 index 0000000..34d3489 --- /dev/null +++ b/skills/validating-accessibility/SKILL.md @@ -0,0 +1,167 @@ +--- +name: validating-accessibility +description: Validates web accessibility according to WCAG 2.1 AA standards for users with disabilities. Use when modifying UI, adding components, or performing accessibility audits +allowed-tools: Read, Grep, Glob, Bash, WebSearch +--- + +# Validateur d'Accessibilité + +Guide la validation et l'amélioration de l'accessibilité web selon WCAG 2.1 niveau AA. + +## Table des matières + +- [Quand utiliser](#quand-utiliser) +- [Standards WCAG 2.1 AA](#standards-wcag-21-aa) +- [Scripts npm disponibles](#scripts-npm-disponibles) +- [Checklist essentielle](#checklist-essentielle) +- [Workflow d'audit](#workflow-daudit) +- [Checklist avant release](#checklist-avant-release) +- [En cas de doute](#en-cas-de-doute) + +## Quand utiliser + +- Ajout de composants UI +- Modification d'interfaces +- Avant chaque release majeure +- Audit d'accessibilité complet + +## Standards WCAG 2.1 AA + +**Quatre principes POUR :** + +1. **Perceptible** - Information présentable +2. **Opérable** - Composants opérables +3. **Compréhensible** - Info et UI compréhensibles +4. **Robuste** - Contenu robuste + +## Scripts npm disponibles + +Trouve et utilise : + +- Audit accessibilité complet +- Audit mobile responsive +- Vérification contraste +- Tests automatisés + +## Checklist essentielle + +### 1. Structure sémantique HTML + +- Balises appropriées (`
`, `