internationalization-i18n
Build globally accessible applications by implementing language switching, translation workflows, and locale-specific formatting. This skill covers i18next setup for React, pluralization rules, date and number formatting using the Intl API, and right-to-left language support with CSS logical properties. Includes best practices for string extraction, pseudo-localization testing, and production translation workflows.
Internationalization (i18n) adds multi-language support to applications using i18next, gettext, or Intl APIs with translation management and RTL formatting.
AI-generated summary based on this skill's SKILL.md
Install
secondsky/claude-skills/internationalization-i18n · repository language: TypeScript
git clone https://github.com/secondsky/claude-skills
cp -r claude-skills/plugins/internationalization-i18n/skills/internationalization-i18n ~/.claude/skills/internationalization-i18nFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add multiple language support to my app?
internationalization-i18n enables multi-language support through libraries like i18next for React and other frameworks. Set up language switching by configuring locale files, initializing the i18n instance with your supported languages, and binding UI components to translation keys. The skill covers namespace organization, lazy loading translations, and detecting user locale from browser settings or user preferences.
What's the best approach for right-to-left language support?
internationalization-i18n handles RTL languages like Arabic and Hebrew using CSS logical properties (margin-inline, padding-block) instead of directional values. Combine this with the `dir` attribute on your HTML root element and use the Intl API for locale-aware formatting. The skill includes strategies for testing RTL layouts and managing bidirectional text in forms and dynamic content.
How do I format dates, numbers, and currency for different locales?
internationalization-i18n leverages the native Intl API (Intl.DateTimeFormat, Intl.NumberFormat, Intl.RelativeTimeFormat) to format values according to locale rules. Pass your locale code and options object to automatically handle regional conventions—dates, number separators, currency symbols, and plural forms. The skill demonstrates integrating these formatters into React components and managing locale switching.
What does internationalization-i18n cover for translation workflows?
internationalization-i18n addresses string extraction, translation management, and production workflows. Learn to organize translation files by namespace, use tools like i18next-scanner for automated key extraction, and implement pseudo-localization for testing. The skill includes best practices for managing translation updates, handling context-specific strings, and integrating with translation management platforms.
How does internationalization-i18n handle pluralization and complex messages?
internationalization-i18n supports ICU message format for pluralization rules and gender-aware translations. Configure pluralization logic for each language, use interpolation for dynamic values, and nest translations for complex UI structures. The skill covers handling edge cases like zero items, singular/dual/plural forms, and context-dependent message variations across different language families.
Which internationalization-i18n approach works best for React apps?
internationalization-i18n recommends i18next with react-i18next hooks for React applications. Use the useTranslation hook to access translations and language switching, configure namespaces for code splitting, and implement language detection. The skill compares i18next with react-intl, covering setup, performance optimization, and integration with server-side rendering for production React applications.
SKILL.md
rendered from the published skill — quoted content, verbatim
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
```javascript // Translation file { "items": "{{count}} item", "items_plural": "{{count}} items", "items_zero": "No items" }
// Usage t('items', { count: 0 }) // "No items" t('items', { count: 1 })
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
plugins/internationalization-i18n/skills/internationalization-i18n/SKILL.md
plugins/internationalization-i18n/skills/internationalization-i18n/references/frameworks.md