# I18N Frontend Implementer

> Adds internationalization (i18n) infrastructure with translation plumbing, scalable key strategy, formatters for dates/numbers/currency, plural rules, and language switching. Use when implementing "internationalization", "translations", "multi-language support", or "i18n". Use when this capability is needed.

- Skill: `tomevault-io/i18n-frontend-implementer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/i18n-frontend-implementer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/i18n-frontend-implementer/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/i18n-frontend-implementer

---


# 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

```json
{
  "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: '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.

---
> Converted and distributed by [TomeVault](https://tomevault.io/claim/patricio0312rev) — claim your Tome and manage your conversions.
<!-- tomevault:4.0:skill_md:2026-04-11 -->