i18n

I18n — Internationalization & Localization

Activate When

• User invokes /godmode:i18n
• User says "internationalize", "translate", "localize"
• User mentions "RTL support", "pluralization"
• When hardcoded strings detected in UI code

Workflow

Step 1: Audit Current State

# Detect i18n library
grep -l "react-intl\|react-i18next\|vue-i18n\|\
next-intl" package.json 2>/dev/null

# Find locale files
find . -path "*/locales/*" -o -path "*/l10n/*" \
  | head -10

# Count hardcoded strings in components
grep -rn ">[A-Z][a-z].*</" src/ --include="*.tsx" \
  --include="*.jsx" | wc -l

I18N AUDIT:
Framework: <React/Vue/Angular>
Library: <react-i18next | vue-i18n | none>
Hardcoded strings: <N>
Locale files: <N> locales configured
RTL needed: <YES if ar/he/fa/ur in targets>

IF no library: install react-i18next (React) or
  vue-i18n (Vue)
IF hardcoded > 50: batch extract by component
IF RTL needed: audit CSS for physical properties

Step 2: Select i18n Framework

| Stack   | Library        | Features          |
|---------|---------------|-------------------|
| React   | react-i18next | Hooks, ICU format |
| Vue     | vue-i18n      | Directives, SFC   |
| Angular | @angular/localize | Built-in, AOT |
| Next.js | next-intl     | App Router, SSR   |

Step 3: Extract Strings

For each hardcoded string:

1. Create key: <namespace>.<section>.<meaning>
2. Add to base locale file (en-US)
3. Include translator context note
4. Set max length if UI-constrained

Step 4: Pluralization Rules

PLURAL CATEGORIES BY LOCALE:
  English: one, other
  French: one, many, other
  Arabic: zero, one, two, few, many, other
  Polish: one, few, many, other
  Japanese: other (no distinction)

USE ICU MessageFormat:
  "{count, plural,
    =0 {No items}
    one {# item}
    other {# items}
  }"

NEVER use: count === 1 ? "item" : "items"
  (breaks for most non-English languages)

Step 5: Date, Number, Currency Formatting

FORMATTING RULES:
  Dates: Intl.DateTimeFormat(locale, options)
  Numbers: Intl.NumberFormat(locale)
  Currency: Intl.NumberFormat(locale,
    { style: 'currency', currency })

EXAMPLES:
  en-US: 03/15/2025, 1,234.56, $1,234.56
  de-DE: 15.03.2025, 1.234,56, 1.234,56 EUR
  ja-JP: 2025/03/15, 1,234, JPY1,235

NEVER hardcode: $, comma separators, date formats
ALWAYS use: Intl APIs with explicit locale param