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
Decision gist · record as of 2026-01-12
i18n-frontend-implementer sets up internationalization infrastructure using translation libraries like next-intl or react-i18next. 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.
Use it when
- i18n-frontend-implementer teaches you to configure translation keys, namespaces, and locale-specific formatting as core infrastructure.
- i18n-frontend-implementer shows you how to build a language switcher component that changes your app's locale dynamically.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
patricio0312rev/skills/i18n-frontend-implementer
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
frontend/i18n-frontend-implementer/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up internationalization infrastructure with translation libraries”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Build applications ready for international audiences with comprehensive guidance on text externalization, message formatting, and locale-specific adaptations. Learn to handle dates, times, numbers, currency, and right-to-left layouts using modern APIs and libraries like react-intl. Covers practical implementation patterns and best practices for managing translations and regional variations across your codebase.
This skill guides you through complete internationalization setup and auditing for modern web applications. Configure your chosen i18n framework, systematically replace user-facing strings with localization keys, ensure consistent coverage across target locales (en-US and zh-CN by default), and validate pluralization and formatting rules. The workflow covers framework selection, locale file organization, error message localization, and testing strategies.
i18n-expert guides you through complete internationalization setup and auditing for React, Next.js, and Vue codebases. It handles framework selection, locale file organization, string replacement with translation keys, and validation of locale parity across your target languages. The skill ensures proper error localization, metadata translation, and language switching with persistence.
This skill teaches you how to build multilingual applications by establishing translation infrastructure, identifying hardcoded text that should be externalized, and ensuring proper locale handling across different regions and writing systems. Learn patterns for React, Next.js, and Python, plus techniques for RTL languages and locale-aware date and number formatting.
This skill equips frontend developers with patterns for adding internationalization to React applications, covering translation hooks, locale-sensitive formatting for currency and lists, date handling with dayjs, and bidirectional text support. It provides bundled references for ICU MessageFormat pluralization, the Trans component for rich text, and implementation checklists to ensure all user-facing content respects locale conventions.
Build multilingual Israeli applications with proper Hebrew language support. This skill covers plural forms, locale-aware date and number formatting, RTL-first CSS using logical properties, and bidirectional text algorithms for frameworks like React, Vue, Next.js, and Angular.
More skills internationalization (MIT) · i18n (MIT) · Internationalizing Websites (MIT)