localization-toolkit

Configure i18n frameworks and audit locale key parity in React, Next.js, and Vue codebases.

4.6k|462|Updated Jun 21, 2025
One-click install
npx skills add https://github.com/zebbern/claude-code-guide --skill localization-toolkit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: localization-toolkit
Source: https://github.com/zebbern/claude-code-guide/tree/main/skills/localization-toolkit
Command: npx skills add https://github.com/zebbern/claude-code-guide --skill localization-toolkit

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

UI codebases often ship with hard-coded strings, missing translations, and inconsistent locale files. This Skill sets up an internationalization framework, replaces raw user-facing text with translation keys, and validates key parity across en-US and zh-CN locale files.

Core Features & Use Cases

  • Framework Setup: Installs and configures i18n libraries such as react-i18next, next-intl, or vue-i18n, including provider wiring, language switchers, and locale persistence.
  • Automated Key Auditing: Runs scripts/i18n_audit.py to extract t('key') usage from source files and report missing, unused, and parity-mismatched keys across locale JSON files.
  • String Replacement & Error Localization: Converts hard-coded JSX text, aria-labels, and placeholders into namespaced keys, and maps error codes to localized messages instead of exposing raw error.message values.
  • Use Case: A React app preparing to launch in China needs full zh-CN coverage. Use this Skill to wire up react-i18next, replace all hard-coded strings, generate zh-CN translations, and verify zero missing keys before release.

Quick Start

Audit my React src directory for missing i18n keys against my en-US and zh-CN locale files and replace any hard-coded UI strings with translation keys.

Frequently Asked Questions about localization-toolkit

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

FAQPage Schema
How do I find missing i18n translation keys in my React app?

Run the i18n_audit.py script with your source root and locale JSON files as arguments. It extracts all t('key') calls from ts, tsx, js, and jsx files and reports keys missing from each locale, unused keys, and parity gaps between locales.

Which i18n library should I use for React, Next.js, or Vue?

Use react-i18next for React, next-intl for Next.js, and vue-i18n for Vue projects. The Skill installs the framework-appropriate package, wires the provider at the app root, and sets up locale resource loading.

How do I handle pluralization in i18next locale files?

Use t('key', { count }) in code and define _one and _other suffixed keys in locale JSON files. The audit script recognizes plural suffixes like _zero, _one, _few, and _other when checking key coverage.

Should raw error messages be shown to users in localized apps?

No, raw error.message values should never appear in the UI. Map error codes to localized translation keys, display only localized strings, and log raw error details separately with a localized fallback for unknown codes.

Does the i18n audit script detect dynamically constructed translation keys?

No, the script only matches static string literals in t() calls via regex patterns. Dynamic keys like t(variable) require manual verification as noted in the audit workflow.