i18n

Generate React localization translations from flat dot-notation keys with react-i18next.

Updated Mar 2, 2026

Search Tags:#workflow #react #localization #i18n #translations #keys #react-i18next

Ready to run

npx skills add https://github.com/Staysr/lobe-windos-build --skill i18n-staysr

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/Staysr/lobe-windos-build/tree/main/.agents/skills/i18n
Command: npx skills add https://github.com/Staysr/lobe-windos-build --skill i18n-staysr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Localization is essential for building inclusive React apps, but managing translation keys and locale data across files can become error-prone and hard to scale.

Core Features & Use Cases

Centralized key management using flat dot notation, ensuring consistent naming across components.
Seamless integration with react-i18next for runtime language switching and exposure of translation hooks.
Use Case: Add new languages to an app by extending src/locales/default and regenerating translations with pnpm i18n.

Quick Start

Update keys in 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-i18next translation keys consistently across a large app?▼

Manage react-i18next translation keys by centralizing them in a default locale structure at src/locales/default using flat dot notation. This approach ensures consistent naming across components and scales localization without key duplication.

What's the best way to add a new language to a React app using react-i18next?▼

Add a new language by extending the default locale files in src/locales/default and running pnpm i18n to generate translations. This regenerates locale data and integrates seamlessly with useTranslation for runtime language switching.

Does this React localization workflow support dynamic runtime language switching?▼

This React localization workflow supports dynamic runtime language switching by integrating directly with react-i18next. It exposes translation hooks within components, allowing users to change languages instantly without reloading the application.

How do I generate translations for React localization keys?▼

Generate translations for React localization keys by updating the namespace files in src/locales/default and executing the pnpm i18n command. This tooling command processes the default keys and outputs the required locale data.

Why use flat dot notation for React i18n translation keys?▼

Use flat dot notation for React i18n translation keys to standardize and automate localization management. This method prevents nested object complexity, ensuring consistent naming across component libraries and scalable multi-language applications.

Can I use this i18n workflow for component libraries that require multiple languages?▼

You can use this i18n workflow for component libraries requiring multiple languages. It standardizes localization by managing translation keys and locale data centrally, making it suitable for both component libraries and full applications.