Le moment où j'ai réalisé que je faisais mal l'i18n
Le mois dernier, je travaillais sur une fonctionnalité qui touchait environ 15 composants. Rien de fou, juste une refonte des paramètres. Mais quand j'ai eu fini, j'avais plus de 40 nouvelles chaînes éparpillées dans la base de code, toutes codées en dur en anglais.
Mon flux de travail habituel : finir la fonctionnalité, puis passer une heure à traquer chaque chaîne codée en dur, les extraire vers des clés de traduction, exécuter l'outil de traduction et espérer n'en avoir manqué aucune.
Puis un collègue m'a montré sa configuration Claude Code. Il a tapé /i18n-extract dans son terminal, et Claude a trouvé chaque chaîne codée en dur dans ses fichiers stagés, les a extraites vers des clés de traduction, mis à jour les composants et poussé les traductions vers notre TMS. Le tout en environ 30 secondes.
J'ai passé le week-end suivant à créer mes propres compétences. Voici tout ce que j'ai appris.
C'est quoi les Compétences Claude Code (Skills) au juste ?
Si vous n'avez pas utilisé Claude Code (la CLI d'Anthropic pour Claude), pensez-y comme avoir Claude directement dans votre terminal. Vous pouvez lui poser des questions, lui faire éditer des fichiers, exécuter des commandes - essentiellement programmer en binôme avec une IA.
Les compétences sont des commandes slash personnalisées que vous définissez. Au lieu d'expliquer ce que vous voulez à chaque fois, vous créez une compétence une fois et l'invoquez avec une simple commande. Comme des alias shell, mais pour des flux de travail assistés par IA.
Pour le travail d'i18n, c'est parfait. Les tâches de traduction sont répétitives, suivent des modèles cohérents et bénéficient énormément de l'automatisation.
Configurer votre première compétence i18n
Commençons simplement. Créez un fichier à .claude/commands/i18n-scan.md avec des instructions pour que Claude scanne le fichier actuel ou les fichiers spécifiés à la recherche de chaînes codées en dur qui devraient être internationalisées.
Dites-lui quoi chercher : contenu textuel JSX entre les balises, littéraux de chaîne dans des contextes visibles par l'utilisateur (étiquettes, messages, titres), littéraux modèles contenant du texte visible par l'utilisateur, et texte indicatif dans les entrées.
Dites-lui quoi ignorer : messages console.log, messages d'erreur pour les développeurs (sauf si visibles par l'utilisateur), noms de classes CSS, chemins d'importation, et clés d'objet qui sont des identifiants internes.
Spécifiez le format de sortie : pour chaque chaîne codée en dur trouvée, afficher le numéro de ligne, la chaîne codée en dur, une clé de traduction suggérée (suivant le modèle namespace.section.element), et le contexte sur l'endroit où elle apparaît et à quoi elle sert.
Maintenant, quand vous exécutez /i18n-scan dans Claude Code, il comprend exactement ce que vous cherchez.
La compétence qui a changé mon flux de travail : i18n-extract
Voici la compétence que j'utilise le plus. Elle ne se contente pas de trouver des chaînes, elle les extrait et met à jour votre code.
Créez .claude/commands/i18n-extract.md avec une description de processus : identifier toutes les chaînes codées en dur visibles par l'utilisateur, générer des clés de traduction appropriées suivant votre convention de nommage, mettre à jour le fichier pour utiliser la fonction de traduction (t() ou équivalent), ajouter les importations nécessaires, et créer ou mettre à jour le fichier de traduction avec les nouvelles clés.
Définissez votre convention de nommage. Les clés doivent suivre namespace.section.element. Par exemple :
settings.profile.titledevient "Profile Settings"common.buttons.savedevient "Save"errors.validation.requireddevient "This field is required"
Incluez des instructions de détection de framework : si react-i18next, utiliser le hook useTranslation et la fonction t() ; si next-intl, utiliser le hook useTranslations ; si vue-i18n, utiliser $t() dans les templates et t() dans le setup ; si FormatJS, utiliser FormattedMessage ou useIntl.
Cette compétence gère tout le processus d'extraction. Je l'exécute sur chaque fichier que je touche, et mes chaînes sont correctement internationalisées avant même que je ne commite.
Connexion à votre système de gestion de traduction
La vraie puissance vient de l'intégration avec votre TMS. Créez une compétence qui utilise MCP (Model Context Protocol) pour interagir avec IntlPull.
Dans .claude/commands/i18n-translate.md, décrivez un processus pour trouver les chaînes qui existent dans la langue source mais manquent de traductions, et traduisez-les. Notez les prérequis : le serveur MCP IntlPull doit être connecté, et le projet doit être configuré dans IntlPull.
Le processus doit utiliser IntlPull MCP pour obtenir l'état actuel du projet, identifier les clés avec des traductions manquantes pour les langues cibles, et pour chaque traduction manquante obtenir le texte source, obtenir toutes traductions existantes pour le contexte, générer des traductions appropriées, et pousser vers IntlPull avec le drapeau de qualité "needs_review".
Pour la gestion des langues, traduire vers toutes les langues du projet par défaut, ou spécifier la langue cible avec /i18n-translate spanish.
Pour le contrôle qualité, marquer toutes les traductions générées par IA comme "needs_review", inclure des notes de traduction pour les termes ambigus, et signaler tout terme qui devrait utiliser des entrées de glossaire.
Maintenant /i18n-translate spanish envoie les chaînes manquantes pour traduction IA, marquées pour révision humaine.
Compétence pour vérifier la couverture de traduction
Avant de déployer, je veux savoir si quelque chose manque. Créez .claude/commands/i18n-status.md pour un rapport de couverture de traduction.
Le rapport doit inclure le pourcentage de couverture global par langue, les espaces de noms avec des traductions manquantes, les clés récemment ajoutées sans traductions, les clés marquées comme "needs_review", et les traductions potentiellement obsolètes où la source a changé après traduction.
Afficher sous forme de tableau montrant la langue, le pourcentage de couverture, le nombre manquant et le nombre à réviser. Puis lister les clés manquantes spécifiques regroupées par espace de noms.
Si IntlPull MCP est connecté, extraire les données en direct. Sinon, analyser les fichiers de traduction locaux.
Compétence pour les opérations en masse
Parfois, vous devez mettre à jour de nombreuses traductions à la fois. Créez .claude/commands/i18n-bulk.md pour les opérations par lots avec sécurité intégrée.
Les opérations disponibles pourraient inclure : rename-namespace (renommer un espace de noms dans toutes les langues), delete-unused (trouver et optionnellement supprimer les clés de traduction non utilisées dans le code), merge-namespaces (combiner plusieurs espaces de noms en un seul), et sync-keys (ajouter les clés manquantes de la langue source à toutes les langues cibles avec des valeurs vides).
Pour la sécurité, toujours afficher un aperçu des modifications avant d'appliquer, exiger une confirmation explicite pour les opérations destructives, créer une sauvegarde des fichiers affectés avant les changements en masse, et journaliser toutes les modifications à des fins d'audit.
Rendre les compétences découvrables
Après avoir créé plusieurs compétences, ajoutez une compétence d'aide à .claude/commands/i18n-help.md qui liste les compétences liées à l'i18n disponibles et leur utilisation.
Créez un tableau avec des colonnes pour la commande et la description :
| Commande | Description |
|---|---|
/i18n-scan | Trouve les chaînes codées en dur dans le fichier actuel |
/i18n-extract | Extrait les chaînes et crée des clés de traduction |
/i18n-translate | Traduit les chaînes manquantes |
/i18n-status | Affiche le rapport de couverture de traduction |
/i18n-bulk | Effectue des opérations par lots |
/i18n-validate | Vérifie les problèmes de traduction |
/i18n-help | Affiche le message d'aide |
Incluez une section de démarrage rapide : ouvrir un fichier avec des chaînes codées en dur, exécuter /i18n-extract pour l'internationaliser, exécuter /i18n-translate pour générer des traductions, et exécuter /i18n-status pour vérifier la couverture.
Compétence de validation pour l'intégration CI
Créez .claude/commands/i18n-validate.md pour détecter les problèmes de traduction courants avant le déploiement. Celle-ci est conçue pour s'exécuter dans la CI mais fonctionne aussi localement.
Les vérifications doivent couvrir les problèmes structurels (traductions manquantes dans les langues non-source, clés orphelines existant dans les traductions mais pas dans le code, syntaxe JSON/YAML invalide), les problèmes de contenu (traductions vides, discordances d'espaces réservés où {name} est dans la source mais pas dans la traduction, traductions suspectement longues pouvant casser l'UI, traductions suspectement courtes, contenu non traduit identique à la langue source), et les problèmes de code (appels t() avec des clés inexistantes, chaînes codées en dur dans les changements stagés).
Les niveaux de sortie devraient être : Erreur (doit être corrigé avant déploiement), Avertissement (devrait être revu), et Info (pour information).
Codes de sortie : exit 0 si aucune erreur, exit 1 si erreurs trouvées, pour l'intégration CI.
Conseils de pro issus de l'utilisation en production
Après des mois d'utilisation de ces compétences, voici ce que j'ai appris :
Soyez spécifique sur votre stack. Les compétences génériques fonctionnent, mais les compétences spécifiques à la stack fonctionnent mieux. Si vous utilisez Next.js avec next-intl, créez des compétences qui comprennent cette configuration spécifiquement. Plus vous donnez de contexte, meilleur est le résultat.
Construisez progressivement. Commencez par /i18n-extract et /i18n-status. N'ajoutez plus de compétences que lorsque vous vous retrouvez à répéter les mêmes instructions. Les compétences doivent résoudre des frictions réelles, pas des problèmes théoriques.
Versionnez vos compétences. Mettez .claude/commands/ dans git. Quand vos coéquipiers mettent à jour leur installation Claude Code, ils obtiennent vos compétences automatiquement. C'est particulièrement précieux pour l'intégration de nouveaux développeurs.
Combinez avec les règles du projet. Dans votre CLAUDE.md, ajoutez des directives i18n : toutes les chaînes visibles par l'utilisateur doivent être internationalisées, utilisez le format de clé namespace.section.element, exécutez /i18n-extract sur tout fichier avec des changements UI, exécutez /i18n-validate avant de créer des PRs. Maintenant Claude suit ces normes même en dehors des invocations de compétences.
Utilisez MCP pour des superpouvoirs. Les compétences sont puissantes seules, mais avec l'intégration MCP, elles peuvent réellement interagir avec des services externes. Le serveur MCP d'IntlPull permet aux compétences de créer et mettre à jour des clés de traduction, d'extraire les traductions actuelles, de pousser de nouvelles traductions, de vérifier l'état du projet et de déclencher des flux de traduction. Cela transforme les compétences de "suggestions IA" en "actions IA".
Exemple de flux de travail réel
Voici à quoi ressemble mon flux de travail quotidien maintenant :
-
Commencer une branche de fonctionnalité avec git checkout -b feature/user-settings
-
Écrire du code avec des chaînes codées en dur. Je ne me soucie pas de l'i18n pendant la construction de la fonctionnalité. Itération plus rapide.
-
Avant de commiter, sur chaque fichier modifié, exécuter /i18n-extract. Claude met à jour le composant et crée des clés de traduction.
-
Générer des traductions en exécutant /i18n-translate. Toutes les langues prises en charge obtiennent des traductions IA, marquées pour révision.
-
Valider en exécutant /i18n-validate pour attraper tout problème.
-
Commiter. Tous les changements, y compris les traductions, vont dans un commit atomique.
Temps total ajouté à mon flux de travail : peut-être 2-3 minutes par fonctionnalité. Comparez cela à l'heure que je passais auparavant.
Idées de compétences pour votre équipe
Au-delà des bases, voici des compétences que j'ai vu des équipes construire :
Pour les transferts de design : /i18n-from-figma pour analyser l'export Figma et créer des clés de traduction à partir du texte du design.
Pour les équipes de contenu : /i18n-suggest-improvements pour revoir les traductions pour le ton, la clarté et la voix de la marque.
Pour le mobile : /i18n-length-check pour signaler les traductions qui pourraient ne pas tenir dans les contraintes UI mobiles.
Pour l'accessibilité : /i18n-alt-text pour générer des traductions de texte alternatif pour les images.
Pour le juridique : /i18n-legal-review pour signaler les traductions qui nécessitent une révision juridique/conformité.
L'avenir : Agents Claude Code pour i18n
En regardant vers l'avenir, Claude Code ajoute le support pour des flux de travail multi-étapes plus complexes. Imaginez un agent qui surveille vos git diffs et internationalise automatiquement les nouvelles chaînes, une validation en arrière-plan qui attrape les problèmes i18n avant que vous ne commitiez, ou un rafraîchissement automatisé des traductions lorsque les chaînes sources changent.
Nous intégrons certaines de ces capacités dans le serveur MCP d'IntlPull. La combinaison des compétences Claude Code et des intégrations MCP change véritablement la façon dont les développeurs gèrent la localisation.
Commencer aujourd'hui
-
Installez Claude Code si vous ne l'avez pas fait : npm install -g @anthropic-ai/claude-code
-
Créez .claude/commands/ dans votre projet
-
Ajoutez la compétence i18n-extract de cet article
-
Essayez-le sur un fichier avec des chaînes codées en dur
-
Itérez en fonction de ce qui fonctionne pour votre stack
L'investissement est peut-être d'une heure pour configurer. Les gains de temps s'accumulent chaque jour.
Vous voulez le pack de compétences complet ? IntlPull maintient une collection de compétences Claude Code prêtes à l'emploi pour l'i18n. Notre serveur MCP donne à Claude un accès direct pour créer, mettre à jour et gérer les traductions sans quitter votre terminal.
