Notre avis

Cette compétence fournit des modèles et bonnes pratiques pour internationaliser et localiser des logiciels, incluant l'extraction de chaînes, la gestion des traductions, l'organisation des fichiers de locale et le support RTL.

Points forts

Couvre plusieurs frameworks (React, Next.js, Python) avec des exemples de code concrets
Inclut une checklist et un tableau des problèmes courants pour une référence rapide
Fournit des conseils sur la mise en page RTL via les propriétés logiques CSS
Propose un script pour détecter les chaînes codées en dur et les traductions manquantes

Limites

Ne couvre pas l'internationalisation spécifique aux plateformes mobiles ou desktop
Manque d'instructions détaillées pour l'installation de chaque bibliothèque
Aucune mention d'outils ou services de gestion des traductions

Quand l'utiliser

Utilisez cette compétence lorsque vous démarrez un nouveau projet nécessitant le support de plusieurs langues ou lorsque vous refactorisez une application existante pour y ajouter l'internationalisation.

Quand l'éviter

Ne l'utilisez pas si votre projet est un outil interne mono-région sans projet de support multilingue, ou si vous avez besoin de conseils approfondis sur les fonctionnalités avancées d'une bibliothèque d'i18n spécifique.

Exemples

Detect hardcoded strings

Run the i18n checker script on the project at /path to find any hardcoded user-facing strings and missing translations.

Set up i18n with react-i18next

Show me how to set up internationalization in a React app using react-i18next, including locale file structure and translation usage.

Add RTL support

Explain how to add right-to-left (RTL) support to a web application using CSS logical properties and the dir attribute.

name: i18n-localization description: Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. allowed-tools: Read, Glob, Grep

i18n & Localization

Internationalization (i18n) and Localization (L10n) best practices.

1. Core Concepts

| Term | Meaning | |------|---------| | i18n | Internationalization - making app translatable | | L10n | Localization - actual translations | | Locale | Language + Region (en-US, tr-TR) | | RTL | Right-to-left languages (Arabic, Hebrew) |

2. When to Use i18n

| Project Type | i18n Needed? | |--------------|--------------| | Public web app | ✅ Yes | | SaaS product | ✅ Yes | | Internal tool | ⚠️ Maybe | | Single-region app | ⚠️ Consider future | | Personal project | ❌ Optional |

3. Implementation Patterns

React (react-i18next)

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.title')}</h1>;
}

Next.js (next-intl)

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h1>{t('title')}</h1>;
}

Python (gettext)

from gettext import gettext as _

print(_("Welcome to our app"))

4. File Structure

locales/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
├── tr/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
└── ar/          # RTL
    └── ...

5. Best Practices

DO ✅

Use translation keys, not raw text
Namespace translations by feature
Support pluralization
Handle date/number formats per locale
Plan for RTL from the start
Use ICU message format for complex strings

DON'T ❌

Hardcode strings in components
Concatenate translated strings
Assume text length (German is 30% longer)
Forget about RTL layout
Mix languages in same file

6. Common Issues

| Issue | Solution | |-------|----------| | Missing translation | Fallback to default language | | Hardcoded strings | Use linter/checker script | | Date format | Use Intl.DateTimeFormat | | Number format | Use Intl.NumberFormat | | Pluralization | Use ICU message format |

7. RTL Support

/* CSS Logical Properties */
.container {
  margin-inline-start: 1rem;  /* Not margin-left */
  padding-inline-end: 1rem;   /* Not padding-right */
}

[dir="rtl"] .icon {
  transform: scaleX(-1);
}

8. Checklist

Before shipping:

[ ] All user-facing strings use translation keys
[ ] Locale files exist for all supported languages
[ ] Date/number formatting uses Intl API
[ ] RTL layout tested (if applicable)
[ ] Fallback language configured
[ ] No hardcoded strings in components

Script

| Script | Purpose | Command | |--------|---------|---------| | scripts/i18n_checker.py | Detect hardcoded strings & missing translations | python scripts/i18n_checker.py <project_path> |

Internationalisation et Localisation (i18n)

Recommandé pour