add-locale

Adds a new UI language to a react-i18next webview by creating translation JSON files and registering the locale.

104|25|Updated Jan 28, 2026
One-click install
npx skills add https://github.com/Swttch/swttch --skill add-locale-swttch
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-locale
Source: https://github.com/Swttch/swttch/tree/main/.claude/skills/add-locale
Command: npx skills add https://github.com/Swttch/swttch --skill add-locale-swttch

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Adding a new interface language to a react-i18next webview involves many error-prone details: mirroring key structures across namespace JSON files, preserving interpolation placeholders, handling plural suffixes, and registering the locale in the right code spots. This Skill walks contributors through the entire process consistently with how shipped locales are structured. ## Core Features & Use Cases - Translation File Scaffolding: Guides creation of per-namespace JSON catalogs under webview/src/i18n/locales/<locale>/ mirroring the English source of truth. - Locale Registration: Shows exactly where to register the language in languageMap.ts and the Settings page LANGUAGE_OPTIONS, while config.ts auto-loads files via Vite glob. - Parity Verification: Provides a Node.js key-parity script, type-check, and test commands to confirm the new locale matches English. - Use Case: A contributor wants to translate the UI into Italian. The Skill walks them through picking the it locale code, translating all ten namespace files, registering italian / Italiano, and verifying parity before submitting. ## Quick Start Add Italian as a new UI language to the webview i18n system and verify it has full key parity with English.

Frequently Asked Questions about add-locale

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

FAQPage Schema
How do I add a new language to a react-i18next app?

Create a folder of translated JSON files under the locales directory, one per namespace, mirroring the English key structure exactly. Then register the locale in the supported-locales list and the settings language dropdown; a Vite glob auto-loads the files.

How do I translate i18next plural keys in JSON files?

Keep the English plural suffix keys like `_one` and `_other`, and add the categories your language needs, such as `_few` or `_many` for Russian. Languages without plural distinction like Korean or Japanese reuse the same suffix keys with identical text.

What should not be translated in UI localization files?

Do not translate brand names, environment variables, file paths, URLs, acronyms like CLI or MCP, code identifiers, model names, shell commands, or keyboard shortcuts. Only translate natural-language string values while keeping keys and placeholders intact.

How do I verify translation key parity across locales?

Run the provided Node.js script that compares leaf keys in each locale namespace against the English source, normalizing plural suffixes. It reports missing keys or missing files, and you should also run the type check and test suite.

What happens if some translation keys are missing in a locale?

Untranslated keys fall back to English automatically, so the app still works with partial translations. However, full key parity with the English source is the goal before shipping a locale.