skills.rest
Staysr
StaysrCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

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
One-click install
npx skills add https://github.com/Staysr/lobe-windos-build --skill i18n-staysr
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
lobehublobehub
81.4k

i18n

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

Official
Intermediate
monarch-initiativemonarch-initiative
18

gene-set-enrichment

Identify enriched pathways, GO terms, and disease associations from gene lists.

Official
Intermediate
helderbertohelderberto
12

setup-pre-commit

Configure Husky pre-commit hooks with lint-staged and Prettier for JavaScript/TypeScript projects.

Community
Intermediate
HankanmanHankanman
1

next-intl-dot-notation-error

Convert flat next-intl translation keys with literal dots into nested objects.

Community
Basic