i18n-expert_skill

Overview

This skill provides a production-ready internationalization (i18n) setup and audit workflow for UI codebases. It covers installing and wiring an i18n library, replacing hard-coded user-facing strings with stable keys, ensuring parity between en-US and zh-CN locales, and validating pluralization and formatting. The outcome is consistent, testable, and secure localized UI text across the app.

How this skill works

I inspect the project to detect framework and existing i18n state, then install and configure a framework-appropriate library (e.g., react-i18next, next-intl, vue-i18n). I replace visible strings with translation keys, map error codes to localized messages, and run automated audits to detect missing keys, parity gaps, and raw strings. Finally, I validate pluralization, placeholders, and formatting, and provide locale files and wiring to load and persist language selection.

When to use it

• Setting up i18n for the first time in a React/Next/Vue app
• Auditing a codebase for missing translations or hard-coded UI strings
• Adding or enforcing en-US and zh-CN locale parity
• Localizing error messages and mapping error codes to user-facing text
• Validating pluralization, placeholders, and Intl-based formatting

Best practices

• Use structured namespaces (errors.*, common.buttons.*, workspace.*) and one source of truth per locale
• Preserve placeholders exactly ({name} or {{name}}) and keep key names stable across updates
• Treat missing keys and raw UI strings as blockers; re-run audits until zero issues
• Lazy-load large locale bundles and split by namespace for performance
• Never show raw error.message to users; map codes to localized strings and log raw details

Example use cases

• Convert all JSX hard-coded labels, placeholders, and aria-labels to t('namespace.key') calls
• Run the audit script to find parity gaps between en-US.json and zh-CN.json and add missing keys
• Add a language switcher that persists selection via route segment or localStorage
• Map service error codes to errors.* keys and provide localized fallbacks for unknown codes
• Validate plural rules by adding _one/_other keys and testing count-based rendering