skills.rest
duwenji
duwenjiCOMMUNITY
Explore all skills by this author →
GitHub

i18n

Standardize react-i18next UI string translations with flat dot-notation keys.

1|Updated May 9, 2026
Search Tags:#frontend#i18n#namespace#locales#react-i18next#translation keys
One-click install
npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill i18n-duwenji
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/duwenji/generative-ai-oss-tutorials/tree/main/sandbox/lobe-chat/.agents/skills/i18n
Command: npx skills add https://github.com/duwenji/generative-ai-oss-tutorials --skill i18n-duwenji

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents hardcoded UI strings from getting stuck in one language by guiding you to store translations using consistent, collision-resistant i18next key patterns.

Core Features & Use Cases

  • React i18next localization guidance: Supports using useTranslation, t(...), and namespace-driven translations for user-facing text in .tsx/.ts.
  • Flat dot-notation key convention: Enforces {feature}.{context}.{action|status} keys (with {{variable}} interpolation) to keep translations organized and avoid key conflicts.
  • Development workflow for multi-language preview: Ensures new keys and namespaces are wired into src/locales/default/index.ts and that zh-CN/en-US preview JSON can be updated for review.

Quick Start

Use i18n to add new UI strings by creating or updating keys in src/locales/default/{namespace}.ts, exporting the namespace in src/locales/default/index.ts, then run pnpm i18n to generate translations before you open a PR.

Frequently Asked Questions about i18n

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

FAQPage Schema
How do I extract hardcoded UI strings into react-i18next translation keys?▼

To extract hardcoded UI strings into react-i18next translation keys, move text from `.tsx`/`.ts` files into `src/locales/default/{namespace}.ts` using flat dot-notation keys, then export the namespace in `src/locales/default/index.ts` to wire it for multi-language preview.

What naming convention should I use for react-i18next translation keys to avoid conflicts?▼

For react-i18next translation keys, use flat dot-notation with the pattern `{feature}.{context}.{action|status}` to keep translations organized and avoid key conflicts, while using `{{variableName}}` for dynamic interpolation.

How do I add a new namespace in react-i18next for frontend localization?▼

To add a new namespace in react-i18next, create or update keys in `src/locales/default/{namespace}.ts`, export the namespace in `src/locales/default/index.ts`, then run `pnpm i18n` to generate zh-CN/en-US translations before opening a PR.

Can I use `useTranslation` and `t(...)` for user-facing text in TypeScript React components?▼

Yes, you can use `useTranslation` and `t(...)` for user-facing text in `.tsx`/`.ts` files to implement namespace-driven translations that prevent hardcoded UI strings from getting stuck in one language.

Why do I need to run `pnpm i18n` before opening a pull request?▼

You need to run `pnpm i18n` before opening a pull request to generate the required zh-CN/en-US preview JSON files from your updated `src/locales/default/` definitions, ensuring translations are ready for development review.

Related Skills

Explore More Software Engineering Skills→
mDevsLabsmDevsLabs
1

i18n

Manage UI strings across React locales with react-i18next keys and namespaces.

Community
Intermediate
lobehublobehub
81.4k

i18n

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

Official
Intermediate
messebmesseb

api-layer

Create typed fetch wrappers and custom error classes for frontend API layers.

Community
Advanced
yonatangrossyonatangross
217

i18n-date-patterns

Implement React i18n with react-i18next, ICU MessageFormat, and RTL support.

Community
Intermediate