Internationalization i18n

Skill secondsky/claude-skills/plugins/internationalization-i18n/skills/internationalization-i18n

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.From its SKILL.md

Install

npx -y skills add secondsky/claude-skills --skill internationalization-i18n

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

What its file declares

Copied from the file, not written here

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

2.3 KB, 566 tokens by cl100k_base, as published. Nobody here has run it

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

What ships with it: 1 file

5.6 KB alongside SKILL.md

references/

frameworks.md5.6 KB