Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
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-i18nHow this skill is triggered — by the user, by Claude, or both
Slash command
/internationalization-i18n:internationalization-i18nThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Implement multi-language support with proper translation management and formatting.
Provides i18n patterns for React apps using react-i18next and dayjs, covering user strings, date/time formatting, ICU MessageFormat, lists, currency, and RTL support. Use for multilingual UIs.
Guides internationalization and localization: detecting hardcoded strings, managing translation files, implementing RTL support, and using i18n libraries like react-i18next, next-intl, and gettext.
Share bugs, ideas, or general feedback.
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: