internationalization-i18n

secondsky's avatarfrom secondsky

Implements multi-language support using i18next, gettext, or Intl API with translation workflows and RTL support. Use when building multilingual applications, handling date/currency formatting, or supporting right-to-left languages.

⭐9stars🔀0forks📁View on GitHub🕐Updated Jan 1, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill streamlines the implementation of internationalization (i18n) and localization (l10n) for modern software projects. It provides production-ready code patterns for i18next, gettext, and the native Web Intl API, helping developers handle multi-language translation workflows, complex pluralization, and locale-specific formatting. By integrating best practices for Right-to-Left (RTL) support and logical CSS properties, it ensures applications are architecturally prepared for global markets.

Use Cases

  • Case 1: Implementing a multi-language React or frontend application using i18next for dynamic translation switching and language detection.
  • Case 2: Formatting financial data and timestamps across different locales using the Intl.NumberFormat and Intl.DateTimeFormat APIs to ensure regional accuracy.
  • Case 3: Designing accessible and localized UI layouts for Arabic or Hebrew markets by implementing RTL (Right-to-Left) support and logical CSS properties.
  • Case 4: Managing complex linguistic rules such as pluralization and relative time formatting (e.g., '2 days ago') in user-facing notifications.
  • Case 5: Setting up translation workflows for backend services using gettext or ICU message formats to maintain string consistency.
nameinternationalization-i18n
descriptionImplements multi-language support using i18next, gettext, or Intl API with translation workflows and RTL support. Use when building multilingual applications, handling date/currency formatting, or supporting right-to-left languages.

Internationalization (i18n)

Implement multi-language support with proper translation management and formatting.

i18next Setup (React)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    interpolation: { escapeValue: false },
    resources: {
      en: { translation: { welcome: 'Welcome, {{name}}!' } },
      es: { translation: { welcome: '¡Bienvenido, {{name}}!' } }
    }
  });

// Usage
const { t } = useTranslation();
<h1>{t('welcome', { name: 'John' })}</h1>

Pluralization

// Translation file
{
  "items": "{{count}} item",
  "items_plural": "{{count}} items",
  "items_zero": "No items"
}

// Usage
t('items', { count: 0 })  // "No items"
t('items', { count: 1 })  // "1 item"
t('items', { count: 5 })  // "5 items"

Date/Number Formatting

// Dates
new Intl.DateTimeFormat('de-DE', {
  dateStyle: 'long',
  timeStyle: 'short'
}).format(new Date());

// Numbers
new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD'
}).format(1234.56);  // "$1,234.56"

// Relative time
new Intl.RelativeTimeFormat('en', { numeric: 'auto' })
  .format(-1, 'day');  // "yesterday"

RTL Support

/* Use logical properties */
.container {
  margin-inline-start: 1rem;  /* margin-left in LTR, margin-right in RTL */
  padding-inline-end: 1rem;
}

/* Direction attribute */
html[dir="rtl"] .icon {
  transform: scaleX(-1);
}

Additional Frameworks

See references/frameworks.md for:

  • React-Intl (Format.js) complete implementation
  • Python gettext with Flask/Babel
  • RTL language support patterns
  • ICU Message Format examples

Best Practices

  • Extract all user-facing strings
  • Use ICU message format for complex translations
  • Test with pseudo-localization
  • Support RTL from the start
  • Never concatenate translated strings
  • Use professional translators for production