ComeOnOliver/skillshub

Internationalization Helper

Helps manage internationalization (i18n) and localization (l10n) in multi-language applications.

When to Use

• User requests i18n support
• Adding new languages
• Finding untranslated strings
• Managing translation files
• User mentions "translation", "i18n", "l10n", "locale"

Instructions

1. Detect i18n Framework

JavaScript/React:

• react-i18next
• react-intl (FormatJS)
• i18next
• LinguiJS

Vue:

• vue-i18n

Python:

• gettext
• Django i18n
• Flask-Babel

Ruby/Rails:

• I18n gem (built-in)

Look for imports, config files, or translation directories.

2. Find Hardcoded Strings

Search for untranslated text:

// Bad: Hardcoded
<button>Submit</button>
<p>Welcome, {user.name}!</p>

// Good: Translated
<button>{t('common.submit')}</button>
<p>{t('welcome.message', { name: user.name })}</p>

Search patterns:

• Strings in JSX/template tags
• Alert/error messages
• Form labels and placeholders
• Button text
• Validation messages

Exclude: code comments, console.log, test strings

3. Extract to Translation Files

React-i18next format (JSON):

{
  "common": {
    "submit": "Submit",
    "cancel": "Cancel"
  },
  "welcome": {
    "message": "Welcome, {{name}}!"
  }
}

Gettext format (.po):

msgid "submit_button"
msgstr "Submit"

msgid "welcome_message"
msgstr "Welcome, %(name)s!"

4. Organize Translation Keys

Best practices:

• Namespace by feature: users.profile.title
• Group common strings: common.buttons.save
• Describe context, not content: errors.login.invalid not errors.wrong_password
• Consistent naming convention

5. Check Translation Coverage

Compare locale files to find missing translations:

en.json: 150 keys
es.json: 142 keys (missing 8)
fr.json: 150 keys ✓

Missing in es.json:
- users.profile.bio
- settings.privacy.title
[...]

6. Handle Pluralization

Different languages have different plural rules:

// react-i18next
t('items', { count: 0 })  // "0 items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

// Translation file
{
  "items_zero": "{{count}} items",
  "items_one": "{{count}} item",
  "items_other": "{{count}} items"
}

7. Date, Time, Number Formatting

Use locale-aware formatting:

// Numbers
const price = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(29.99);

// Dates
const date = new Intl.DateTimeFormat('fr-FR').format(new Date());

8. RTL (Right-to-Left) Support

For Arabic, Hebrew:

• CSS: direction: rtl;
• HTML: <html dir="rtl">
• Logical properties: margin-inline-start instead of margin-left

9. Generate Translation Template

Create template for new locale:

# Copy keys from base language, empty values
cp locales/en.json locales/de.json
# Mark for translation

10. Best Practices

• Keep translations in separate files
• Use keys, not source text as keys
• Provide context to translators
• Test with long strings (German often longer)
• Use ICU MessageFormat for complex strings
• Avoid concatenating translated strings
• Extract all user-facing text

Supporting Files

• templates/i18n-config.js: Configuration examples
• templates/locale-file.json: Translation file template