From internationalization-i18n
Implements multi-language support using i18next, gettext, Intl API with pluralization, date/currency formatting, translation workflows, and RTL support for multilingual apps.
npx claudepluginhub secondsky/claude-skills --plugin internationalization-i18nThis skill uses the workspace's default tool permissions.
Implement multi-language support with proper translation management and formatting.
Creates isolated Git worktrees for feature branches with prioritized directory selection, gitignore safety checks, auto project setup for Node/Python/Rust/Go, and baseline verification.
Executes implementation plans in current session by dispatching fresh subagents per independent task, with two-stage reviews: spec compliance then code quality.
Dispatches parallel agents to independently tackle 2+ tasks like separate test failures or subsystems without shared state or dependencies.
Implement multi-language support with proper translation management and formatting.
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>
// 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"
// 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"
/* 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);
}
See references/frameworks.md for: