I18n Localization

1---2name: i18n-localization3description: "Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support."4risk: safe5source: community6date_added: "2026-02-27"7---8 9# i18n & Localization10 11> Internationalization (i18n) and Localization (L10n) best practices.12 13---14 15## 1. Core Concepts16 17| Term | Meaning |18|------|---------|19| **i18n** | Internationalization - making app translatable |20| **L10n** | Localization - actual translations |21| **Locale** | Language + Region (en-US, tr-TR) |22| **RTL** | Right-to-left languages (Arabic, Hebrew) |23 24---25 26## 2. When to Use i18n27 28| Project Type | i18n Needed? |29|--------------|--------------|30| Public web app | ✅ Yes |31| SaaS product | ✅ Yes |32| Internal tool | ⚠️ Maybe |33| Single-region app | ⚠️ Consider future |34| Personal project | ❌ Optional |35 36---37 38## 3. Implementation Patterns39 40### React (react-i18next)41 42```tsx43import { useTranslation } from 'react-i18next';44 45function Welcome() {46  const { t } = useTranslation();47  return <h1>{t('welcome.title')}</h1>;48}49```50 51### Next.js (next-intl)52 53```tsx54import { useTranslations } from 'next-intl';55 56export default function Page() {57  const t = useTranslations('Home');58  return <h1>{t('title')}</h1>;59}60```61 62### Python (gettext)63 64```python65from gettext import gettext as _66 67print(_("Welcome to our app"))68```69 70---71 72## 4. File Structure73 74```75locales/76├── en/77│   ├── common.json78│   ├── auth.json79│   └── errors.json80├── tr/81│   ├── common.json82│   ├── auth.json83│   └── errors.json84└── ar/          # RTL85    └── ...86```87 88---89 90## 5. Best Practices91 92### DO ✅93 94- Use translation keys, not raw text95- Namespace translations by feature96- Support pluralization97- Handle date/number formats per locale98- Plan for RTL from the start99- Use ICU message format for complex strings100 101### DON'T ❌102 103- Hardcode strings in components104- Concatenate translated strings105- Assume text length (German is 30% longer)106- Forget about RTL layout107- Mix languages in same file108 109---110 111## 6. Common Issues112 113| Issue | Solution |114|-------|----------|115| Missing translation | Fallback to default language |116| Hardcoded strings | Use linter/checker script |117| Date format | Use Intl.DateTimeFormat |118| Number format | Use Intl.NumberFormat |119| Pluralization | Use ICU message format |120 121---122 123## 7. RTL Support124 125```css126/* CSS Logical Properties */127.container {128  margin-inline-start: 1rem;  /* Not margin-left */129  padding-inline-end: 1rem;   /* Not padding-right */130}131 132[dir="rtl"] .icon {133  transform: scaleX(-1);134}135```136 137---138 139## 8. Checklist140 141Before shipping:142 143- [ ] All user-facing strings use translation keys144- [ ] Locale files exist for all supported languages145- [ ] Date/number formatting uses Intl API146- [ ] RTL layout tested (if applicable)147- [ ] Fallback language configured148- [ ] No hardcoded strings in components149 150---151 152## Script153 154| Script | Purpose | Command |155|--------|---------|---------|156| `scripts/i18n_checker.py` | Detect hardcoded strings & missing translations | `python scripts/i18n_checker.py <project_path>` |157 158## When to Use159This skill is applicable to execute the workflow or actions described in the overview.160 161## Limitations162- Use this skill only when the task clearly matches the scope described above.163- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.164- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.