skills.rest
andershi666
andershi666COMMUNITY
Explore all skills by this author →
GitHub

i18n

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
One-click install
npx skills add https://github.com/andershi666/lobehub-hr-demo --skill i18n-andershi666
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cute-baobaocute-baobao

i18n

Manage react-i18next translation keys and locale data for React applications.

Community
Intermediate
lobehublobehub
81.4k

i18n

Manage react-i18next translations and locale data in React applications.

Official
Intermediate
haomingzhaomingz
12

locale-guard

Audit i18n translation keys and locale JSON consistency across frontend codebases.

Community
Advanced
fredm00nfredm00n
134

framer-plugins

Build and debug Framer plugins using the Plugin SDK.

Community
Advanced