i18n

Name: i18n
Availability: InStock
Author: andershi666

Automate React translation management with flat dot-notation keys and locale exports.

1|Updated Apr 14, 2026

Search Tags:#frontend #react #localization #i18n #translations #react-i18next

Ready to run

npx skills add https://github.com/andershi666/lobehub-hr-demo --skill i18n-andershi666

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/andershi666/lobehub-hr-demo/tree/main/lobehub/.agents/skills/i18n
Command: npx skills add https://github.com/andershi666/lobehub-hr-demo --skill i18n-andershi666

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Managing translations in React apps often leads to inconsistent keys, scattered locale files, and slow preview cycles. This guide standardizes i18n practices with react-i18next to ensure consistent locale management and keys.

Core Features & Use Cases

Flat keys with dot notation for scalable localization across components.
Guidance on adding translations, generating keys, and maintaining locale data (zh-CN, en-US).
Workflow steps to export namespaces and preview translations locally.

Quick Start

Add a translation key under src/locales/default/{namespace}.ts and run pnpm i18n to generate translations.

Frequently Asked Questions about i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I manage React i18n translation keys without them getting scattered?▼

Manage React i18n translation keys by enforcing flat dot-notation keys within a centralized src/locales/default directory. This standardizes localization data and prevents scattered locale files across UI components.

What is the workflow to add new translations in a react-i18next project?▼

The translation workflow involves adding a new key under src/locales/default/{namespace}.ts and running pnpm i18n. This automates translation generation and updates locale data for zh-CN and en-US.

Why should I use flat dot-notation keys for frontend localization?▼

Flat dot-notation keys provide scalable localization across React components. They prevent nested key conflicts and simplify translation management by ensuring consistent locale key structures.

How do I export namespaces and preview translations locally?▼

Export namespaces and preview translations locally by following the provided workflow steps to run pnpm i18n. This processes your locale definitions and generates the necessary translation files for local verification.

Can I edit locale files outside the default locales directory?▼

No, translation edits are restricted to the src/locales/default directory. This constraint ensures translation creation and i18n key generation remain consistent and prevent manual overrides to generated locale data.