skills.rest
openchamber
openchamberOFFICIAL
Explore all skills by this author →
GitHub

locale-ui-patterns

Enforces i18n patterns for user-facing UI strings across OpenChamber locale dictionaries.

9.5k|1.0k|Updated Sep 11, 2025
Search Tags:#translation#locale#pluralization#ui text#reAct#Localization#I18n
One-click install
npx skills add https://github.com/openchamber/openchamber --skill locale-ui-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: locale-ui-patterns
Source: https://github.com/openchamber/openchamber/tree/main/.agents/skills/locale-ui-patterns
Command: npx skills add https://github.com/openchamber/openchamber --skill locale-ui-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Hardcoded English strings and untranslated placeholder keys in UI components create visible bugs for non-English users. This Skill enforces a consistent internationalization workflow so every user-facing string is routed through the i18n system and fully translated in all supported locales.

Core Features & Use Cases

  • Mandatory Translation Flow: Requires adding keys to the English dictionary and real translations to every non-English dictionary (es, fr, ko, pl, pt-BR, uk, zh-CN, zh-TW) with no English placeholders.
  • Key Naming Conventions: Defines semantic key patterns like settings.appearance.language.label instead of using English text as keys.
  • Pluralization and Parameter Rules: Requires separate complete-message keys for singular/plural and optional clauses, reserving {name} placeholders for real values only.
  • Use Case: When adding a new settings toggle label, the Skill guides you to add the key to all dictionaries, call t('key') via useI18n() inside the component, and keep locale state out of shared stores.

Quick Start

Add a translated label for the new export button in the settings panel following the locale UI patterns.

Frequently Asked Questions about locale-ui-patterns

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

FAQPage Schema
How do I add a new translated string to a React component?▼

Add a semantic key to the English dictionary in packages/ui/src/lib/i18n/messages/en.ts, then add fully translated values to every non-English dictionary. In the component, call useI18n() from @/lib/i18n and render the text with t('your.key').

How to handle plural forms in i18n translation strings?▼

Create separate complete-message keys for singular and plural forms, such as descriptionSingle and descriptionPlural, and select between them with a conditional in the component. Never pass grammar fragments like suffixes as translation parameters.

Can I leave untranslated keys in English as placeholders?▼

No. Every key added to a non-English dictionary must contain a real translation in that language. Copying the English source into other locale files is treated as a defect because all locales ship together.

What text should not be translated in UI localization?▼

Keep product names like OpenChamber and GitHub, protocol acronyms like MCP and API, model and provider names, file paths, command names, environment variables, and user-generated content as literal untranslated values.

Why does my translated text not update when the language changes?▼

Translation calls must stay inside React render or hook scope so locale changes trigger re-renders. Resolving translated text at module scope or storing it in static variables prevents updates when the locale switches.

Related Skills

Explore More Software Engineering Skills→
reeinhardddreeinharddd

i18n-translation

Detect hardcoded strings and enforce ngx-translate key conventions in UI components.

Community
Intermediate
nearainearai
12.6k

local-test

Build and run a Dockerized IronClaw web gateway test environment with Chrome MCP browser automation.

Official
Intermediate
lushly-devlushly-dev
4

design-content

Guide UX writing for user-facing interface text and terminology.

Official
Basic
EliasOulkadiEliasOulkadi
110

translate-craft

Generate professional translations and app localization across eight languages with ICU syntax.

Community
Advanced