i18n_skill

Overview

This skill is an i18n guide for React projects using react-i18next, focused on adding and managing translations in TypeScript (.tsx) components. It enforces file locations, key naming conventions, and a repeatable workflow so localized text stays consistent and conflict-free. Use it when creating translation keys, updating default language content, or integrating localized strings into components.

How this skill works

It inspects translation tasks and suggests edits only for files under src/locales/default/, following a flat key, dot-notation convention. The guide explains how to add namespaces, export them, preview translations, and run pnpm i18n to generate language bundles. It also shows how to call t() in components and pass parameters safely.

When to use it

• Adding new translation keys or namespaces in src/locales/default/
• Localizing React (.tsx) components with react-i18next
• Resolving key conflicts and designing consistent key patterns
• Preparing translations for CI or running pnpm i18n locally
• Previewing or manually translating zh-CN/en-US for development

Best practices

• Only edit files in src/locales/default/; do not modify generated locales/ JSON files
• Use flat keys with dot notation: {feature}.{context}.{action|status}
• Avoid nested objects in exports; prefer string-key objects to prevent conflicts
• Use {{variableName}} for interpolation and pass values via t(key, {value})
• Keep common UI strings in a common namespace (common) and group feature-specific text by namespace

Example use cases

• Add a new namespace file src/locales/default/notifications.ts and export it from src/locales/default/index.ts
• Create keys like 'sync.actions.sync' and use t('sync.actions.sync') in a button component
• Localize a message with parameters: 'alert.cloud.desc' -> t('alert.cloud.desc', { credit: 1000 })
• Resolve conflicting keys by refactoring to more specific names (e.g., change clientDB.solve to clientDB.solve.action)
• Run pnpm i18n after edits so CI or build processes generate locales for zh-CN and en-US