skills.rest
xkl2013
xkl2013COMMUNITY
Explore all skills by this author →
GitHub

i18n

Integrate react-i18next to add locale keys and generate translations.

Updated Jul 5, 2026
Search Tags:#web development#localization#translation#internationalization#react-i18next
One-click install
npx skills add https://github.com/xkl2013/lobe --skill i18n-xkl2013
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/xkl2013/lobe/tree/main/.agents/skills/i18n
Command: npx skills add https://github.com/xkl2013/lobe --skill i18n-xkl2013

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-i18next, react-router, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of internationalizing LobeHub applications, ensuring that user-facing strings are properly localized across different languages.

Core Features & Use Cases

  • react-i18next Integration: Seamlessly integrate with the popular i18next library for efficient localization.
  • Flat Key Naming: Simplifies key management by using flat keys with dot notation.
  • Translation Workflow: Offers a clear workflow for adding new keys, translating, and reviewing changes.
  • Use Case: For a multilingual application, this Skill ensures that UI text, alerts, and other user-facing elements are accurately translated into the desired language(s).

Quick Start

Add new internationalization keys in the 'src/locales/default/' directory 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 add internationalization to a LobeHub web application?▼

To add internationalization to a LobeHub web application, integrate react-i18next to manage locale keys and namespaces. You can add new keys in the 'src/locales/default/' directory and run 'pnpm i18n' to generate language-specific previews.

What is the recommended workflow for translating user-facing text in react-i18next?▼

The recommended workflow for translating user-facing text in react-i18next involves using flat key naming with dot notation. You simplify key management by adding new keys, providing translations, and generating previews using the 'pnpm i18n' command.

Do I need react-router to configure localization in my web application?▼

Yes, you need react-router configured in your web application to use this internationalization Skill. react-router is a required dependency alongside react-i18next to properly handle locales configuration and generate language-specific previews.

How do I generate new translation keys and namespaces for my multilingual application?▼

To generate new translation keys and namespaces for a multilingual application, add your internationalization keys in the 'src/locales/default/' directory. Running 'pnpm i18n' will then process these keys and generate the required translations and previews.

What's the best way to manage locale keys to avoid conflicts in web development?▼

The best way to manage locale keys in web development is by using flat key naming with dot notation. This approach simplifies key management and prevents conflicts when adding new namespaces and translations in react-i18next.

Related Skills

Explore More Software Engineering Skills→
MadAppGangMadAppGang
278

tanstack-router

Configure type-safe file-based routes for React with TanStack Router.

Official
Intermediate
githubgithub
37.6k

vscode-ext-localization

Localize VS Code extension resources across languages in package.json, walkthroughs, and code messages.

Official
Basic
xkl2013xkl2013

react

Standardizes React component conventions within the LobeHub framework.

Community
Intermediate
lobehublobehub
81.4k

i18n

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

Official
Intermediate