skills.rest
OpenSourceAGI
OpenSourceAGIOFFICIAL
Explore all skills by this author →
GitHub

i18n

Manages LobeHub locale keys and translations using react-i18next conventions.

74|11|Updated Jul 4, 2024
Search Tags:#localization#translation#i18n#react-i18next#lobehub#locale keys#usetranslation
One-click install
npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill i18n-opensourceagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/OpenSourceAGI/qwksearch-research-agent/tree/main/apps/qwk-in-lobe/.agents/skills/i18n
Command: npx skills add https://github.com/OpenSourceAGI/qwksearch-research-agent --skill i18n-opensourceagi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-i18next.

What problem does it solve? Adding user-facing strings to a LobeHub codebase requires consistent locale key naming, correct namespace placement, and coordination with automated translation workflows, which is easy to get wrong manually. ## Core Features & Use Cases - Key Naming Conventions: Enforces flat dot-notation keys like feature.context.action with {{variable}} interpolation and conflict avoidance. - Namespace Management: Guides adding keys to packages/locales/src/default/{namespace}.ts and exporting new namespaces from the index file. - Translation Workflow: Coordinates manual zh-CN/en-US preview translations with the daily auto-i18n.yml workflow and the optional bun run i18n command. - Use Case: When adding a new settings panel, use this Skill to create properly named keys in the setting namespace, wire up useTranslation in the component, and preview the zh-CN and en-US strings before the automated translation PR handles other locales. ## Quick Start Add a new localized string for the chat feature following the i18n conventions and show me how to use it with useTranslation.

Frequently Asked Questions about i18n

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

FAQPage Schema
How do I add a new translation key in react-i18next?▼

Add a flat dot-notation key like `feature.context.action` to the appropriate namespace file in packages/locales/src/default, then call it with t('your.key') from useTranslation. Export new namespaces from the default index file.

How do I use multiple namespaces with useTranslation?▼

Pass an array to useTranslation, such as useTranslation(['common', 'chat']), then reference keys with the namespace prefix like t('common:save'). This lets one component consume strings from several locale namespaces.

Should I edit the JSON files in the locales directory directly?▼

No, only edit files in packages/locales/src/default. The locales directory JSON files are generated, except for hand-written zh-CN and en-US preview translations used during development.

How do I interpolate variables in react-i18next translation strings?▼

Use double curly brace syntax in the key value, such as 'We provide {{credit}} credits', then pass the value at call time with t('alert.cloud.desc', { credit: '1000' }).

When should I run bun run i18n manually?▼

Run it only when your branch needs translated locales immediately, since it is slow and requires an OPENAI_API_KEY. Otherwise the daily auto-i18n.yml workflow opens an automated translation PR for all other locales.

Related Skills

Explore More Software Engineering Skills→
TimeKastTimeKast

i18n-localization

Detect hardcoded strings and missing translation keys in locale JSON files.

Official
Intermediate
steedossteedos
1.6k

steedos-translations

Translate Steedos metadata into English and Simplified Chinese translation files.

Official
Intermediate
gelsonsimoesgelsonsimoes

i18n-localization

Detect hardcoded strings and validate locale consistency in React, Vue, and Python projects.

Community
Intermediate
langgeniuslanggenius

lingui-best-practices

Implement internationalization in React and JavaScript applications using Lingui macros and catalogs.

Official
Intermediate