i18n-frontend-implementer
This skill guides you through building a complete internationalization layer for frontend applications. It covers library selection, dictionary organization, provider configuration, and implementing locale-aware formatting for dates, numbers, and currency. You'll also learn to add language switching UI and support for plural rules across your app.
i18n-frontend-implementer sets up internationalization infrastructure using translation libraries like next-intl or react-i18next.
AI-generated summary based on this skill's SKILL.md
Install
patricio0312rev/skills/i18n-frontend-implementer
git clone https://github.com/patricio0312rev/skills
cp -r skills/frontend/i18n-frontend-implementer ~/.claude/skills/i18n-frontend-implementerFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add internationalization to my React app?
i18n-frontend-implementer guides you through setting up a complete internationalization layer for React. Start by selecting a translation library (like react-i18next or next-intl), then configure your i18n provider at the app root. Define translation keys organized into namespaces, set up locale-specific formatters for dates and currency, and implement a language switcher component. The skill covers the full infrastructure needed to support multiple languages across your frontend.
What does i18n-frontend-implementer cover for translation setup?
i18n-frontend-implementer teaches you to configure translation keys, namespaces, and locale-specific formatting as core infrastructure. You'll learn how to organize your translation dictionaries hierarchically, set up the i18n provider, and implement formatters for dates, numbers, and currency that adapt to each locale. The skill also covers lazy-loading translations and managing translation plumbing for scalable multilingual apps.
How can I implement a language switcher in React?
i18n-frontend-implementer shows you how to build a language switcher component that changes your app's locale dynamically. The skill covers integrating the switcher with your i18n provider, updating all formatters and translations when the language changes, and persisting the user's language preference. You'll learn to wire the switcher into your UI so users can seamlessly toggle between supported languages.
Does i18n-frontend-implementer support RTL languages?
Yes, i18n-frontend-implementer includes guidance on adding right-to-left (RTL) language support to your frontend. The skill covers configuring pluralization rules and RTL formatting alongside your translation setup. You'll learn to detect RTL locales and apply the appropriate text direction and layout adjustments to ensure your app displays correctly for languages like Arabic and Hebrew.
What are i18n namespace best practices covered by this skill?
i18n-frontend-implementer teaches namespace translation best practices for scalable translation management. You'll learn to organize translation keys hierarchically by feature or page, avoiding flat structures that become unmaintainable. The skill covers splitting translations into logical namespaces, lazy-loading them on demand, and structuring your translation files so teams can collaborate efficiently on multilingual content.
How does i18n-frontend-implementer handle date and currency formatting?
i18n-frontend-implementer covers implementing locale-aware formatters for dates, numbers, and currency as part of your i18n infrastructure. You'll configure formatters that automatically adapt to each locale's conventions—displaying dates in the correct order, using appropriate number separators, and showing currency symbols and values correctly. The skill integrates these formatters with your translation setup so formatting changes when users switch languages.
SKILL.md
rendered from the published skill — quoted content, verbatim
i18n Frontend Implementer
Implement internationalization with next-intl, react-i18next, or similar libraries.
Core Setup
1. Install: npm install next-intl or react-i18next
2. Create dictionaries: locales/en.json, locales/es.json
3. Provider setup: Wrap app with IntlProvider
4. Translation keys: Hierarchical namespace structure
5. Formatters: Date, number, currency formatting
6. Language switcher: Dropdown or flags UI
Translation Structure
{
"common": { "nav": { "home": "Home", "about": "About" } },
"auth": { "login": "Sign In", "logout": "Sign Out" },
"errors": { "required": "{field} is required" }
}
Usage Examples
```tsx const t = useTranslations('common'); <h1>{t('nav.home')}</h1>
// With plurals t('items', { count: 5 }) // "5 items"
// With formatting <p>{formatDate(date, { dateStyle:
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
frontend/i18n-frontend-implementer/SKILL.md