i18next
Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.
Best use case
i18next is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.
Teams using i18next should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/i18next/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How i18next Compares
| Feature / Agent | i18next | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# i18next
## Overview
i18next is the most popular JS i18n framework. Works with React, Vue, Angular, Node.js. Features: namespace splitting, lazy loading, plurals, interpolation, context, and backend plugins for remote translations.
## Instructions
### Step 1: React Setup
```typescript
import i18n from 'i18next'
import { initReactI18next } from 'react-i18next'
import HttpBackend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
i18n.use(HttpBackend).use(LanguageDetector).use(initReactI18next).init({
fallbackLng: 'en',
supportedLngs: ['en', 'de', 'fr', 'ja'],
ns: ['common', 'dashboard'],
defaultNS: 'common',
backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
})
```
### Step 2: Usage
```tsx
import { useTranslation, Trans } from 'react-i18next'
function Dashboard() {
const { t } = useTranslation('dashboard')
return (
<div>
<h1>{t('welcome', { name: 'Alice' })}</h1>
<p>{t('projects', { count: 5 })}</p>
<Trans i18nKey="terms">Agree to <a href="/terms">Terms</a>.</Trans>
</div>
)
}
```
```json
{
"welcome": "Welcome back, {{name}}!",
"projects_one": "You have {{count}} project",
"projects_other": "You have {{count}} projects"
}
```
## Guidelines
- Split translations into namespaces by feature — don't load everything.
- Use `_one`/`_other` suffixes for plurals.
- `<Trans>` for translations with embedded JSX.
- Language detection: browser → URL → cookie → localStorage.
- For SSR: pass language from server to avoid hydration mismatch.