I18n
Extract hardcoded UI copy into LobeHub’s react-i18next default locale modules and keep flat `{feature}.{context}.{action}` keys in sync before running translation generation.
Overview
i18n is an agent skill for the Build phase that standardizes LobeHub react-i18next keys, namespaces, and default-locale edits before translation generation.
Install
npx skills add https://github.com/lobehub/lobe-chat --skill i18nWhat is this skill?
- Enforces editing only `src/locales/default/`—never hand-editing generated JSON under `locales/`
- Flat dot-notation keys `{feature}.{context}.{action|status}` with `{{variableName}}` interpolation
- Registers namespaces via `src/locales/default/index.ts` and runs `pnpm i18n` for translation output
- Triggers on `t('foo.bar')`, i18next calls, and prompts like add i18n, locale key, or 翻译
- Guards against nested locale objects and sibling key-prefix conflicts
- Default language en-US; edits restricted to `src/locales/default/`
- Key pattern `{feature}.{context}.{action|status}` with `{{variableName}}` interpolation
Adoption & trust: 856 installs on skills.sh; 78.4k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are changing LobeChat UI copy but risk hardcoded strings, nested locale objects, or editing generated JSON instead of the default TypeScript sources.
Who is it for?
Maintainers and solo builders extending LobeHub/LobeChat who already use pnpm and need every new string to follow the repo’s i18n conventions.
Skip if: Greenfield apps without LobeChat’s `src/locales/default/` layout, or teams that manage translations only in external TMS tools with no react-i18next in this codebase.
When should I use this skill?
Adding user-facing strings in `.tsx`/`.ts`, creating or renaming keys under `src/locales/default/{namespace}.ts`, wiring namespaces, translating zh-CN/en-US for dev preview, or on `useTranslation`, `t(...)`, add i18n, 翻译
What do I get? / Deliverables
User-facing text lives in flat default locale modules with consistent naming, wired namespaces, and a clear path to `pnpm i18n` or manual zh-CN/en-US preview.
- Updated default locale `.ts` modules with flat keys
- Namespace entry in default index when adding a feature area
- Generated or previewed zh-CN/en-US strings after `pnpm i18n`
Recommended Skills
Journey fit
User-facing strings and locale namespaces are authored while implementing the LobeChat UI, so the canonical shelf is the build phase. react-i18next wiring, `useTranslation`, and `.tsx`/`.ts` string extraction are front-end implementation tasks in this monorepo.
How it compares
Use this repo-local locale playbook instead of generic “add i18next” chat advice that ignores LobeHub’s flat-key and default-only edit rules.
Common Questions / FAQ
Who is i18n for?
It is for developers and agent users working in the LobeHub/LobeChat codebase who add or refactor UI strings with react-i18next and the project’s default locale TypeScript files.
When should I use i18n?
Use it during Build when you see `useTranslation`, `t('key')`, new namespaces, hardcoded zh or en UI text, or when you run or plan `pnpm i18n` for LobeChat.
Is i18n safe to install?
It is documentation-only procedural knowledge with no shell or network requirements by itself; review the Security Audits panel on this Prism page before trusting any third-party skill package.
SKILL.md
READMESKILL.md - I18n
# LobeHub Internationalization Guide - Default language: English (en-US) - Framework: react-i18next - **Only edit files in `src/locales/default/`** - Never edit JSON files in `locales/` - Run `pnpm i18n` to generate translations (or manually translate zh-CN/en-US for dev preview) ## Key Naming Convention **Flat keys with dot notation** (not nested objects): ```typescript // ✅ 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 ```typescript 'alert.cloud.desc': '我们提供 {{credit}} 额度积分', ``` **Avoid key conflicts:** ```typescript // ❌ Conflict 'clientDB.solve': '自助解决', 'clientDB.solve.backup.title': '数据备份', // ✅ Solution 'clientDB.solve.action': '自助解决', 'clientDB.solve.backup.title': '数据备份', ``` ## Workflow 1. Add keys to `src/locales/default/{namespace}.ts` 2. Export new namespace in `src/locales/default/index.ts` 3. For dev preview: manually translate `locales/zh-CN/{namespace}.json` and `locales/en-US/{namespace}.json` 4. Remind the user to run `pnpm i18n` before creating PR — do NOT run it yourself (very slow) ## Usage ```tsx 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