mcpField
I
i18n-frontend-implementer

i18n-frontend-implementer

github.com/patricio0312revDevelopment63361 installsUpdated 41w ago
Repository

About i18n-frontend-implementer

A skill for implementing frontend internationalization with next-intl, react-i18next, or similar libraries. It covers translation structure, locale formatting, language selection, and RTL support.

Key features

  1. 01Internationalization setup
  2. 02Namespaced translation dictionaries
  3. 03Plural and locale formatting
  4. 04Language switcher guidance
  5. 05RTL and lazy-loaded translations

Use cases

  1. 01Adding multiple language support to a frontend
  2. 02Organizing translation keys
  3. 03Formatting dates and numbers by locale
  4. 04Supporting RTL languages

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/patricio0312rev/skills --skill i18n-frontend-implementer

After installing, type/i18n-frontend-implementerin Claude Code to confirm it loaded.

Details

From the project README

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

const t = useTranslations('common');
<h1>{t('nav.home')}</h1>

// With plurals
t('items', { count: 5 }) // "5 items"

// With formatting
<p>{formatDate(date, { dateStyle: 'long' })}</p>

Best Practices

Use namespaces for organization, extract all text to translations, handle plurals properly, format dates/numbers per locale, provide language switcher, support RTL languages, lazy-load translations.

Comments

Markdown supported