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.zip

Installs 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.
177 chars✓ has a “when” trigger
Intermediate

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

You give it
UI string or translation key
You get back
Localized string or implementation code

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 in locales/ (except hand-written en-US/zh-CN previews)
  • Leave generated locales to the daily auto-i18n.yml workflow by default; run bun run i18n manually 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

  1. Add keys to packages/locales/src/default/{namespace}.ts
  2. Export new namespace in packages/locales/src/default/index.ts
  3. For dev preview: manually translate locales/zh-CN/{namespace}.json and locales/en-US/{namespace}.json
  4. Leave all other locales to .github/workflows/auto-i18n.yml, which runs daily and opens an automated translation PR
  5. Run bun run i18n manually only when the branch needs those translations immediately; it is slow and requires OPENAI_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

react-i18next

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.

SkillInstallsUpdatedSafetyDifficulty
i18n (this skill)52moNo flagsIntermediate
review-frontend03moReviewIntermediate
React + Ant Design Frontend05moReviewIntermediate
add-locale01moNo flagsBeginner

Try saying

Example prompts that trigger this skill in your AI assistant.

drizzle

lobehub

Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.

238873

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.

113434

react

lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

3480

typescript

lobehub

TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.

2877

project-overview

lobehub

Complete project architecture and structure guide. Use when exploring the codebase, understanding project organization, finding files, or needing comprehensive architectural context. Triggers on architecture questions, directory navigation, or project overview needs.

1548

linear

lobehub

Linear issue management guide. Use when working with Linear issues, creating issues, updating status, or adding comments. Triggers on Linear issue references (LOBE-xxx), issue tracking, or project management tasks. Requires Linear MCP tools to be available.

10117

Search skills

Search the agent skills registry