skills.rest
hontauadrian
hontauadrianCOMMUNITY
Explore all skills by this author →
GitHub

localization-patterns

Implements localization patterns for resolving user-facing labels in UIModel mappers across web and mobile.

Updated Apr 7, 2026
Search Tags:#react#localization#i18n#translations#internationalization#mapper#uimodel
One-click install
npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill localization-patterns-hontauadrian
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: localization-patterns
Source: https://github.com/hontauadrian/sfx-app-empty-test/tree/main/.overstory/claude-profiles/merger/skills/localization-patterns
Command: npx skills add https://github.com/hontauadrian/sfx-app-empty-test --skill localization-patterns-hontauadrian

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Inconsistent handling of user-facing strings leads to hardcoded text in JSX, scattered i18n calls, and untranslatable UI. This Skill enforces a single rule: all labels are resolved in the UIModel mapper, never inline in components. ## Core Features & Use Cases - Typed Label Constants (Web): Define per-feature label objects like authLabels with nested validation messages, imported from a shared localization package. - scopedTranslate and useTranslations (Mobile): Use scopedTranslate for pure mapper functions and useTranslations for React hooks, with translate[Namespace] naming conventions. - Anti-Pattern Detection: Identifies inline i18n.t() calls, t() in JSX, and hardcoded strings, replacing them with UIModel-driven labels. - Use Case: When building a login page, the mapper returns submitButtonLabel, loginHeading, and placeholders from typed constants or scoped translations, so the page component only renders uiModel values. ## Quick Start Apply the localization patterns skill to refactor this login screen so all labels come from the UIModel mapper instead of inline translation calls.

Frequently Asked Questions about localization-patterns

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

FAQPage Schema
How do I handle translations in React components without inline t() calls?▼

Resolve all labels in the UIModel mapper and pass them through the uiModel object. Components render values like uiModel.loginHeading instead of calling t() or i18n.t() directly in JSX.

What is the difference between scopedTranslate and useTranslations?▼

scopedTranslate is used in pure functions and mappers outside React's hook lifecycle, while useTranslations is a hook for React components and custom hooks. Both take a namespace like "auth" and return a translate function.

How do I structure typed label constants for web localization?▼

Export a const object per feature, such as authLabels, with nested groups for validation messages, marked with as const for type safety. Import them from the shared localization package inside your mapper functions.

Why should labels not be hardcoded or translated inline in JSX?▼

Inline translations and hardcoded strings bypass the UIModel contract, making components responsible for localization logic and breaking consistency. Centralizing labels in mappers keeps pages as pure renderers of the UIModel.

When should I use useTranslations instead of scopedTranslate?▼

Use useTranslations inside React hooks and components where hook rules apply, such as a useSettings hook. Use scopedTranslate in plain mapper functions that run outside the React render cycle.

Related Skills

Explore More Software Engineering Skills→
OmidZamaniOmidZamani
120

dspy-signature-designer

Design type-safe DSPy signatures with InputField, OutputField, and Python typing.

Community
Advanced
Negentropy-LabyNegentropy-Laby
3

localize

Coordinate localization workflows from string extraction through QA validation across locales.

Official
Advanced
nocobasenocobase
9

nocobase-app-plugin-i18n

Adds and translates user-facing text in NocoBase applications and plugins using locale files and namespaces.

Official
Intermediate
Layer-FiLayer-Fi
10

design-system

Enforces UI primitive conventions for React components built on react-aria-components.

Official
Intermediate