Agent skill
i18next
Internationalize JavaScript apps with i18next. Use when adding translations, handling plurals, loading locale files dynamically, or i18n for React/Vue/Node.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/i18next
Metadata
Additional technical details for this skill
- tags
-
i18next i18n localization translations react-i18next
- author
- terminal-skills
- version
- 1.0.0
- category
- development
SKILL.md
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
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
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>
)
}
{
"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/_othersuffixes for plurals. <Trans>for translations with embedded JSX.- Language detection: browser → URL → cookie → localStorage.
- For SSR: pass language from server to avoid hydration mismatch.
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?