Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
lobehub avatar

I18n

  • 1.6k installs
  • 81.3k repo stars
  • Updated August 5, 2026
  • lobehub/lobe-chat

This is a copy of i18n by lobehub - installs and ranking accrue to the original listing.

i18n is a LobeHub agent skill that extracts, names, and wires user-facing strings into react-i18next locale namespaces for developers working on the Lobe Chat frontend without breaking existing locales.

About

i18n is the LobeHub internationalization skill for lobe-chat using react-i18next with default language en-US. Developers edit only files in src/locales/default/ and never edit JSON files in locales/ directly; run pnpm i18n to generate translations or manually update zh-CN and en-US for dev preview. Keys use flat dot notation such as alert.cloud.action rather than nested objects. The skill triggers on user-facing strings, locale keys, namespaces, useTranslation, t(), interpolation, hardcoded UI copy, or pnpm i18n commands. Reach for i18n when adding or refactoring Lobe Chat UI text to avoid key conflicts and preserve locale consistency across zh-CN and en-US previews.

  • Enforces flat dot-notation keys using {feature}.{context}.{action|status} pattern
  • Only modifies files inside src/locales/default/ and index.ts
  • Triggers on useTranslation, t('foo.bar'), hardcoded strings, and commands like 'add i18n' or '翻译'
  • Runs pnpm i18n to auto-generate zh-CN and en-US JSON files
  • Prevents nested objects and key collisions across namespaces

I18n by the numbers

  • 1,595 all-time installs (skills.sh)
  • +85 installs in the week ending Aug 5, 2026 (Skillselion tracking)
  • Security screen: MEDIUM risk (skills.sh audit)
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/lobehub/lobe-chat --skill i18n

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs1.6k
repo stars81.3k
Security audit3 / 3 scanners passed
Last updatedAugust 5, 2026
Repositorylobehub/lobe-chat

How do you add i18n keys in Lobe Chat?

Correctly extract, name, and wire every user-facing string into a shared translation system without creating key conflicts or breaking existing locales.

Who is it for?

Developers contributing to LobeHub lobe-chat who need react-i18next key conventions, namespace rules, and pnpm i18n workflow guidance.

Skip if: Projects outside Lobe Chat, generic i18n without react-i18next flat keys, or teams editing locales/ JSON files directly against LobeHub rules.

When should I use this skill?

A user adds hardcoded UI copy, locale keys, useTranslation hooks, interpolation, or runs pnpm i18n in the Lobe Chat codebase.

What you get

Flat dot-notation locale keys in src/locales/default/, wired useTranslation calls, and generated zh-CN/en-US translation files via pnpm i18n.

  • src/locales/default/ key definitions
  • pnpm i18n generated locale files
  • wired useTranslation UI strings

Files

SKILL.mdMarkdownGitHub ↗

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):

// ✅ 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

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

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

Related skills

FAQ

Which files does the LobeHub i18n skill edit?

The LobeHub i18n skill edits only files in src/locales/default/. Developers must not edit JSON files in locales/ directly; run pnpm i18n to generate translations or manually update zh-CN and en-US for preview.

What key format does LobeHub i18n use?

LobeHub i18n uses flat dot-notation keys such as alert.cloud.action with react-i18next, not nested locale objects. The default language is en-US and the skill covers useTranslation, t(), and interpolation.

Is I18n safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

Frontend Developmentfrontendintegrations

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.