About internationalization-i18n
An internationalization and localization skill for developers building applications for multiple locales. It covers translation, locale-aware formatting, RTL layouts, and workflows, with guides for several i18n libraries and approaches.
Key features
- 01Translation and message management
- 02Pluralization and ICU messages
- 03Locale-aware date and number formatting
- 04Right-to-left language support
- 05Locale detection and switching
- 06Translation workflow guidance
Use cases
- 01Adding multiple languages to an application
- 02Formatting dates and numbers by locale
- 03Supporting Arabic or Hebrew layouts
- 04Managing translation strings and workflows
Install
Copy the command and run it in a terminal.
$
npx skills add https:/ / github.com/ aj-geddes/ useful-ai-prompts --skill internationalization-i18nAfter installing, type/internationalization-i18nin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/date-and-time-formatting.mdi18next-javascripttypescript.mdlocale-detection.mdnumber-and-currency-formatting.mdpluralization-rules.mdpython-i18n-gettext.mdreact-intl-formatjs.mdrtl-right-to-left-language-support.mdserver-side-i18n.mdtranslation-management.mdtemplates/component-template.tsxDetails
From the project READMEInternationalization (i18n) & Localization
Table of Contents
Overview
Comprehensive guide to implementing internationalization and localization in applications. Covers message translation, pluralization, date/time/number formatting, RTL languages, and integration with popular i18n libraries.
When to Use
- Building multi-language applications
- Supporting international users
- Implementing language switching
- Formatting dates, times, and numbers for different locales
- Supporting RTL (right-to-left) languages
- Extracting and managing translation strings
- Implementing pluralization rules
- Setting up translation workflows
Quick Start
Minimal working example:
// i18n.ts
import i18next from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
await i18next
.use(Backend)
.use(LanguageDetector)
.init({
fallbackLng: "en",
debug: process.env.NODE_ENV === "development",
interpolation: {
escapeValue: false, // React already escapes
},
backend: {
loadPath: "/locales/{{lng}}/{{ns}}.json",
},
detection: {
order: ["querystring", "cookie", "localStorage", "navigator"],
caches: ["localStorage", "cookie"],
},
});
// ... (see reference guides for full implementation)
Reference Guides
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| i18next (JavaScript/TypeScript) | i18next (JavaScript/TypeScript) |
| React-Intl (Format.js) | React-Intl (Format.js) |
| Python i18n (gettext) | Python i18n (gettext) |
| Date and Time Formatting | Date and Time Formatting |
| Number and Currency Formatting | Number and Currency Formatting |
| Pluralization Rules | Pluralization Rules |
| RTL (Right-to-Left) Language Support | RTL (Right-to-Left) Language Support |
| Translation Management | Translation Management |
| Locale Detection | Locale Detection |
| Server-Side i18n | Server-Side i18n |
Best Practices
✅ DO
- Extract all user-facing strings to translation files
- Use ICU message format for complex messages
- Support pluralization correctly for each language
- Use locale-aware date/time/number formatting
- Implement RTL support for Arabic, Hebrew, etc.
- Provide fallback language (usually English)
- Use namespaces to organize translations
- Test with pseudo-localization (ääçćëńţś)
- Store locale preference (cookie, localStorage)
- Use professional translators for production
- Implement translation management workflow
- Support dynamic locale switching
- Use translation memory tools
❌ DON'T
- Hardcode user-facing strings in code
- Concatenate translated strings
- Assume English grammar rules apply to all languages
- Use generic plural forms (one/many) for all languages
- Forget about text expansion (German is ~30% longer)
- Store dates/times in locale-specific formats
- Use flags to represent languages (flag ≠ language)
- Translate technical terms without context
- Mix translation keys with UI strings
- Forget to translate alt text, titles, placeholders
- Assume left-to-right layout
Comments
Markdown supported