skills.rest
find-xposed-magisk
find-xposed-magiskCOMMUNITY
Explore all skills by this author →
GitHub

i18n

Manage UI translation keys across locales in React with react-i18next.

30|10|Updated Aug 5, 2024
Search Tags:#react#localization#i18n#translations#react-i18next
One-click install
npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill i18n-find-xposed-magisk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/find-xposed-magisk/lobe-chat/tree/main/.agents/skills/i18n
Command: npx skills add https://github.com/find-xposed-magisk/lobe-chat --skill i18n-find-xposed-magisk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Internationalization of UI text in React apps can be error-prone and hard to manage across locales. This guide helps standardize translation keys, locale management, and integration with react-i18next.

Core Features & Use Cases

  • Centralized translation keys under src/locales/default to support zh-CN, en-US, and additional locales.
  • Clear key naming conventions and workflow for adding new translations.
  • Use Case: Localize a new feature by adding keys and regenerating languages with pnpm i18n.

Quick Start

Add translation keys to src/locales/default and run pnpm i18n to generate all languages.

Frequently Asked Questions about i18n

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

FAQPage Schema
How do I manage UI text localization in React with react-i18next?▼

To manage UI text localization in React, centralize translation keys under src/locales/default and run pnpm i18n to generate languages for locales like zh-CN and en-US.

What is the best way to standardize translation keys for a React application?▼

Standardizing translation keys involves maintaining them centrally in src/locales/default and establishing clear naming conventions to support multiple locales through react-i18next.

How do I add new translations for a feature using react-i18next?▼

To add new translations for a feature, insert the required translation keys into src/locales/default and execute pnpm i18n to regenerate all language files.

Does this localization workflow support both .tsx components and preview environments?▼

Yes, the localization workflow covers development, preview, and localization processes for projects using react-i18next, handling both .tsx components and locale keys.

Why do I need to run pnpm i18n when localizing UI text?▼

Running pnpm i18n is necessary to generate all language translations from the centralized default locale keys, ensuring UI text is synchronized across supported locales.

Related Skills

Explore More Software Engineering Skills→
Nick777-PixelNick777-Pixel

i18n

Manage localized text in React apps using react-i18next and pnpm i18n.

Community
Intermediate
lobehublobehub
81.4k

i18n

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

Official
Intermediate
andershi666andershi666
1

i18n

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

Community
Intermediate
pckienuitpckienuit

i18n-localization

Detect hardcoded user-facing strings and missing translation keys in React, Vue, and Python projects.

Community
Intermediate