Back to Skills

i18n

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 bun run i18n.

81,331stars15,776forksUpdated 8/6/2026

Security Assessment

Safe(95/100)
Security Score95/100

About i18n

This skill is a repository-specific internationalization convention guide for LobeHub's lobe-chat project, which uses react-i18next with English (en-US) as the default language. It documents exactly where and how to add and edit user-facing strings so that contributors and AI agents follow the project's established i18n workflow instead of hardcoding UI copy or editing the wrong files. The central rule is that only files in `packages/locales/src/default/` should be edited by hand, and generated locale JSON files under `locales/` should be left to automation.

The guide specifies the project's key-naming convention — flat keys with dot notation following a `{feature}.{context}.{action|status}` pattern rather than nested objects — and how to avoid key conflicts and use `{{variableName}}` interpolation parameters. Its workflow is concrete: add keys to the relevant default namespace file, export new namespaces in the default index, optionally hand-write en-US and zh-CN preview translations for development, and otherwise let the daily `auto-i18n.yml` GitHub workflow open an automated translation PR for all other locales. It notes that `bun run i18n` should be run manually only when translations are needed immediately, since it is slow and requires an `OPENAI_API_KEY`. Usage examples show the `useTranslation` hook, single- and multi-namespace access, and interpolation, along with a list of the most-used namespaces (common, chat, setting) and others.

The target users are contributors and coding agents working on the lobe-chat codebase who need to add or modify translatable strings correctly. It is a benign code-convention reference: it describes editing locale source files and running a project build/translation script, with no risky operations. The mention of an `OPENAI_API_KEY` is standard tooling configuration for the translation script.

FAQ

Which files should I edit for translations?

Only files in `packages/locales/src/default/`. You should never hand-edit the generated JSON files in `locales/`, except for hand-written en-US and zh-CN previews.

What key-naming convention does the project use?

Flat keys with dot notation following the pattern `{feature}.{context}.{action|status}`, not nested objects, with `{{variableName}}` syntax for interpolated parameters.

How do other locales get translated?

By default the daily `auto-i18n.yml` GitHub workflow runs and opens an automated translation PR. You only run `bun run i18n` manually when the branch needs those translations immediately.

What does running the manual i18n script require?

The `bun run i18n` command is slow and requires an `OPENAI_API_KEY` to be configured, so it is recommended only when translations are needed right away.

How do I use translations in components?

Import `useTranslation` from react-i18next, call `t('key')`, pass interpolation values as a second argument, and use namespace-prefixed keys (e.g. `common:save`) when loading multiple namespaces.

Install i18n

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill