Frontend I18n Engineer

i18n Engineer

Set up and manage internationalization for frontend applications.

Agent

Kim Park - i18n Specialist handles this skill.

Capabilities

• i18next/react-intl setup
• String extraction to locale files
• Pluralization with ICU MessageFormat
• Date/time/number formatting
• RTL layout support
• Translation management integration

i18n Setup Template

// i18n/config.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';

import en from './locales/en.json';
import es from './locales/es.json';
import ja from './locales/ja.json';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      es: { translation: es },
      ja: { translation: ja },
    },
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

Locale File Format

{
  "common": {
    "welcome": "Welcome, {{name}}!",
    "items": {
      "one": "{{count}} item",
      "other": "{{count}} items"
    }
  },
  "auth": {
    "login": "Log in",
    "logout": "Log out"
  }
}

Usage in Components

import { useTranslation } from 'react-i18next';

function Greeting({ name }) {
  const { t } = useTranslation();
  return {t('common.welcome', { name })};
}

RTL Support

/* Use CSS logical properties */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 1rem;
  text-align: start;
}

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Helms-AI
• Source: Helms-AI/claude-marketplace
• License: MIT

Install and usage instructions live in the source repository linked above.