How to add or edit localized UI copy in agent-native apps. Use when adding, removing, or changing user-visible interface text, prompts, toasts, labels, empty states, or date/number/list formatting.
78
100%
Does it follow best practices?
Run evals on this skill
Adds up to 20 points to the overall score
View guide
Passed
No findings from the security scan
Visible framework/template UI copy belongs in the app's i18n catalog, not inline in components. When you add or edit UI text, update the English source catalog first, update existing locale catalogs, and run the i18n guard.
Templates use app/i18n/:
en-US.ts is the canonical source tree and fallback.index.ts exports an AgentNativeI18nCatalog with English bundled and
non-English catalogs loaded by dynamic import.Use BCP-47 filenames from the supported set: en-US, zh-CN, es-ES,
fr-FR, de-DE, ja-JP, ko-KR, pt-BR, hi-IN, ar-SA.
AppProviders i18n={{ catalog: i18nCatalog }}.useT() and keep keys stable./settings route in the app sidebar. Put
<LanguagePicker /> in that settings page, usually in a Language or General
section, and keep the header language icon only as a quick-access shortcut.openAgentSettings() from @agent-native/core/client to open the right
agent sidebar's Settings tab. Localize the title, description, and button.useFormatters() for dates, numbers, relative time, and lists instead
of embedding formatted values in translation strings.Plural strings use i18next/CLDR suffixes. Do not force every locale to copy English plural categories:
_one and _other._other._zero, _one, _two, _few, _many, and _other.Keep interpolation placeholders identical across locales, such as
{{count}}, {{name}}, or ICU-style {count} arguments.
New UI should be RTL-safe. Prefer logical CSS utilities/properties such as
ms-*, me-*, ps-*, pe-*, start-*, end-*, text-start, and
text-end when direction matters. Avoid hardcoded left/right positioning for
new localized UI unless it is genuinely physical.
Run:
pnpm guard:i18n-catalogsFor broader changes, also run the affected template tests and pnpm typecheck.
Machine translation is only a starting point; high-visibility strings need
human review.
c1ee18b
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.