skills.rest
rub803030
rub803030COMMUNITY
Explore all skills by this author →
GitHub

i18n-frontend-implementer

Implements internationalization infrastructure with translation keys, formatters, and language switching for frontend applications.

Updated Apr 13, 2026
Search Tags:#frontend#localization#i18n#translations#internationalization#next-intl#react-i18next
One-click install
npx skills add https://github.com/rub803030/examenprograma --skill i18n-frontend-implementer-rub803030
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n-frontend-implementer
Source: https://github.com/rub803030/examenprograma/tree/main/EXAMEN_PROGRA_2-master/.agents/skills/i18n-frontend-implementer
Command: npx skills add https://github.com/rub803030/examenprograma --skill i18n-frontend-implementer-rub803030

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires next-intl, react-i18next.

What problem does it solve? Adding multi-language support to a frontend application requires setting up translation plumbing, organizing keys, handling plurals, and formatting dates and currencies per locale, which is error-prone when done ad hoc. ## Core Features & Use Cases - Translation Infrastructure: Sets up next-intl or react-i18next with provider wrapping and hierarchical namespace-based dictionaries. - Locale-Aware Formatting: Provides date, number, and currency formatters plus plural rule handling per language. - Language Switching: Implements a language switcher UI with lazy-loaded translations and RTL support. - Use Case: You are building a React app that must ship in English and Spanish. Use this Skill to scaffold locale JSON files, wire up the IntlProvider, and replace hardcoded strings with translation keys. ## Quick Start Add internationalization to my React app with English and Spanish translations using next-intl.

Frequently Asked Questions about i18n-frontend-implementer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add internationalization to a React app?▼

Install next-intl or react-i18next, create locale JSON dictionaries like locales/en.json, wrap your app with the IntlProvider, and replace hardcoded strings with translation keys accessed via the useTranslations hook.

next-intl vs react-i18next for multi-language support?▼

next-intl is tailored for Next.js apps with server component support, while react-i18next works across React frameworks. Both support hierarchical namespaces, pluralization, and locale formatting covered by this Skill.

How do I handle pluralization in translations?▼

Pass a count parameter to the translation function, such as t('items', { count: 5 }), and define plural variants in your locale files. The i18n library selects the correct plural form based on the active locale's rules.

Does i18n formatting support dates and currencies per locale?▼

Yes, locale-aware formatters handle dates, numbers, and currencies automatically based on the active locale. Use helpers like formatDate with options such as dateStyle: 'long' to render locale-correct output.

How do I support RTL languages in my frontend?▼

Support RTL languages by setting the document direction attribute based on the active locale and using logical CSS properties. Lazy-load translation files so RTL locale bundles are only fetched when needed.

Related Skills

Explore More Software Engineering Skills→
darthlinuxerdarthlinuxer

i18n-localization

Detect hardcoded strings and missing translations in React, Vue, Next.js, and Python projects.

Community
Intermediate
RektooooooRektoooooo
2

ios-localization

Extract translatable strings from iOS project files and manage translations.

Community
Intermediate
Prat05devsPrat05devs
2

seo-hreflang

Validate and generate hreflang tags for multi-language and multi-region websites.

Community
Advanced
rubrical-worksrubrical-works

i18n-setup

Scaffold i18n library configuration, locale files, and translation workflows for web applications.

Official
Intermediate