skills.rest
Ultra-Cube
Ultra-CubeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

i18n

Manages translation keys and locale files for react-i18next internationalization workflows.

Updated Sep 17, 2025
Search Tags:#typescript#localization#translation#i18n#internationalization#locale#react-i18next
One-click install
npx skills add https://github.com/Ultra-Cube/Ultra-AI --skill i18n-ultra-cube
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n
Source: https://github.com/Ultra-Cube/Ultra-AI/tree/main/external-integrations/AionUi/.claude/skills/i18n
Command: npx skills add https://github.com/Ultra-Cube/Ultra-AI --skill i18n-ultra-cube

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires react-i18next.

What problem does it solve? Adding user-facing text to a multilingual React application often leads to hardcoded strings, missing translations across locales, and stale type definitions that break CI checks. This Skill enforces a consistent i18n workflow so every string is translated, typed, and validated. ## Core Features & Use Cases - Translation Key Management: Defines namespaced dot-notation keys (e.g., common.save) with camelCase naming rules and module-based organization across locale JSON files. - Multi-Locale Synchronization: Ensures every new key is added to all supported languages defined in i18n-config.json, preventing CI failures from missing translations. - Type Generation and Validation: Regenerates i18n-keys.d.ts via bun run i18n:types and validates structure with node scripts/check-i18n.js before committing. - Use Case: When adding a new "Rename" button to a component, the Skill guides you to check existing keys, add the key to every locale directory, use t('common.rename') in JSX, and run the validation scripts. ## Quick Start Use the i18n skill to add a new translation key for a delete confirmation dialog across all supported locales and validate it.

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?▼

First read i18n-config.json to get current languages and modules, then check for existing similar keys. Add the new key to every locale's module JSON file, use t('module.key') in your component, then run bun run i18n:types and node scripts/check-i18n.js to validate.

How do I handle interpolation and HTML in i18n translations?▼

Use double-curly placeholders like {{count}} in JSON values and pass variables via t('key', { count: 5 }). For markup inside translations, use the Trans component from react-i18next with the i18nKey prop.

Why does the i18n CI check fail after adding a translation?▼

The check-i18n.js script fails when a key is missing from even one locale in supportedLanguages, or when i18n-keys.d.ts is stale. Run bun run i18n:types first, then re-run the validation script.

Can I hardcode text in JSX for internal-only strings?▼

Hardcoded text is prohibited for user-visible strings; exceptions are code comments, console.log debug output, and internal constants never shown to users. All visible text must use the t() function.

How do I add a new translation module to the project?▼

Add the module name to the modules array in i18n-config.json, create the module JSON file in every locale directory, add the import and export in each locale's index.ts, then regenerate types and run the validation script.

Related Skills

Explore More Software Engineering Skills→
bkywksjbkywksj
309

i18n-development

Integrate i18next for multilingual UI support in Tauri-based React applications.

Community
Intermediate
hackefellerhackefeller
1

docker-workflow

Automate Docker image building, tagging, and deployment workflows.

Official
Basic
jonsdoesch87-aijonsdoesch87-ai

language-checker

Detect hardcoded UI text and missing translation keys in React/Next.js components.

Community
Intermediate
elcoospelcoosp

lingui-js-macro

Implements LinguiJS i18n in JavaScript/TypeScript projects using @lingui/macro.

Community
Intermediate