Handles React-based internationalization using react-i18next with flat dot-notation keys.
Install
mkdir -p .claude/skills/i18n && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/947" && unzip -o skill.zip -d .claude/skills/i18n && rm skill.zipInstalls to .claude/skills/i18n
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
LobeHub i18n with react-i18next. Use for user-facing strings, locale keys, namespaces, useTranslation, t(), interpolation, zh-CN/en-US previews, hardcoded UI copy, or pnpm i18n.Key capabilities
- →Manage translation keys using flat dot notation
- →Implement internationalization in React components
- →Handle locale namespaces for shared UI and features
- →Use interpolation for dynamic variables in strings
How it works
The skill enforces a strict workflow where developers add keys to TypeScript source files, which are then processed to generate localized JSON files.
Inputs & outputs
When to use i18n
- →Adding new translation keys for UI components
- →Managing locale namespaces in React
- →Updating hardcoded UI strings to support i18n
About this skill
LobeHub Internationalization Guide
- Default language: English (en-US)
- Framework: react-i18next
- Only edit files in
packages/locales/src/default/- Never edit JSON files inlocales/(except hand-written en-US/zh-CN previews) - Leave generated locales to the daily
auto-i18n.ymlworkflow by default; runbun run i18nmanually only when they are needed immediately
Key Naming Convention
Flat keys with dot notation (not nested objects):
// ✅ Correct
export default {
'alert.cloud.action': '立即体验',
'sync.actions.sync': '立即同步',
'sync.status.ready': '已连接',
};
// ❌ Avoid nested objects
export default {
alert: { cloud: { action: '...' } },
};
Patterns: {feature}.{context}.{action|status}
Parameters: Use {{variableName}} syntax
'alert.cloud.desc': '我们提供 {{credit}} 额度积分',
Avoid key conflicts:
// ❌ Conflict
'clientDB.solve': '自助解决',
'clientDB.solve.backup.title': '数据备份',
// ✅ Solution
'clientDB.solve.action': '自助解决',
'clientDB.solve.backup.title': '数据备份',
Workflow
- Add keys to
packages/locales/src/default/{namespace}.ts - Export new namespace in
packages/locales/src/default/index.ts - For dev preview: manually translate
locales/zh-CN/{namespace}.jsonandlocales/en-US/{namespace}.json - Leave all other locales to
.github/workflows/auto-i18n.yml, which runs daily and opens an automated translation PR - Run
bun run i18nmanually only when the branch needs those translations immediately; it is slow and requiresOPENAI_API_KEY
Usage
import { useTranslation } from 'react-i18next';
const { t } = useTranslation('common');
t('newFeature.title');
t('alert.cloud.desc', { credit: '1000' });
// Multiple namespaces
const { t } = useTranslation(['common', 'chat']);
t('common:save');
Common Namespaces
Most used: common (shared UI), chat (chat features), setting (settings)
Others: auth, changelog, components, discover, editor, electron, error, file, hotkey, knowledgeBase, memory, models, plugin, portal, providers, tool, topic
When not to use it
- →Editing JSON translation files directly
- →Using nested objects for translation keys
Prerequisites
Limitations
- →Must not edit JSON files directly except for previews
- →Requires running the i18n generation script
How it compares
It enforces a specific flat-key naming convention and workflow to prevent translation conflicts and maintain consistency across the codebase.
Compared to similar skills
i18n side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| i18n (this skill) | 5 | 2mo | No flags | Intermediate |
| review-frontend | 0 | 3mo | Review | Intermediate |
| React + Ant Design Frontend | 0 | 5mo | Review | Intermediate |
| add-locale | 0 | 1mo | No flags | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lobehub
View all by lobehub →You might also like
review-frontend
OpenAEV-Platform
>-
React + Ant Design Frontend
daithang-organization
Complete guide for the SE104_VLEAGUE React frontend — pages, services, components, auth flow, i18n, and patterns
add-locale
yhk1038
Add a new UI language/locale to the claude-code-gui webview i18n system, or extend/verify an existing one. Walks a contributor (or agent) through creating the per-namespace translation JSON files, registering the locale, and verifying parity — consistently with how the shipped locales are structured
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.