internationalization
Master the distinction between internationalization (i18n) and localization (l10n) to build globally-ready applications. This skill covers architecture patterns for organizing translation files, naming conventions for translation keys, and implementation examples across React, Vue, and Next.js frameworks. You'll also learn to handle complex scenarios like pluralization, date/number/currency formatting using the Intl API, and support for right-to-left languages.
Internationalization helps you architect multi-language support with translation management, locale handling, and formatting best practices.
AI-generated summary based on this skill's SKILL.md
Install
miles990/claude-software-skills/internationalization · repository language: TypeScript
git clone https://github.com/miles990/claude-software-skills
cp -r claude-software-skills/software-engineering/internationalization ~/.claude/skills/internationalizationFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I add multiple languages to my app using internationalization?
internationalization enables multi-language support through a structured i18n/l10n architecture. Start by separating your translation strings into locale-specific files (e.g., en.json, es.json), then use a framework library like react-i18next, vue-i18n, or Next.js built-in i18n routing. Define translation keys with clear naming conventions, load the appropriate locale based on user preference or browser detection, and render translated content dynamically. This approach keeps your codebase clean and makes adding new languages straightforward.
What's the difference between i18n and l10n in internationalization?
internationalization (i18n) refers to designing your application architecture to support multiple languages and regions—extracting strings, organizing translation files, and implementing locale switching. Localization (l10n) is the actual process of translating content and adapting it culturally for specific locales, including date/number/currency formatting, RTL language support, and regional conventions. i18n is the technical foundation; l10n is the cultural customization built on top of it.
How should I handle date, currency, and number formatting across locales?
internationalization leverages the Intl API for locale-aware formatting without manual conversion logic. Use Intl.DateTimeFormat for dates, Intl.NumberFormat for numbers, and Intl.NumberFormat with currency style for currency values. Pass your active locale as the first argument: `new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(1234.56)`. This ensures dates, numbers, and currencies automatically respect regional conventions—separators, symbols, and ordering—without hardcoding locale-specific rules.
What are internationalization best practices for translation management workflow?
internationalization best practices include: use consistent, hierarchical translation key naming (e.g., `common.button.submit`); store translations in version-controlled JSON or YAML files; detect hardcoded strings with ESLint rules; implement pseudo-localization for testing coverage; use tools like Crowdin or Lokalise for collaborative translation workflows; validate missing keys before deployment; and organize locale files by feature or domain. Separate translation logic from UI components, keep keys descriptive, and establish clear naming conventions across your team.
How do I implement RTL language support and cultural adaptation?
internationalization supports RTL languages like Arabic and Hebrew by setting the `dir` attribute on your root element based on locale (`dir="rtl"` for RTL locales, `dir="ltr"` for LTR). Use CSS logical properties (margin-inline, padding-block) instead of directional ones (margin-left, margin-right) so styles flip automatically. Adjust text alignment, icon positioning, and layout direction conditionally. Test with actual RTL content, ensure form inputs and navigation work correctly in reverse direction, and validate date/number formatting respects cultural conventions.
How can I optimize translation loading and ensure quality assurance?
internationalization optimization involves lazy-loading translation files per locale to reduce initial bundle size, caching translations in localStorage or service workers, and using code splitting for large translation sets. For quality assurance, implement automated checks for missing translation keys, use pseudo-localization to catch untranslated strings, run visual regression tests across locales, and validate Intl formatting output. Monitor translation completeness in your CI/CD pipeline and integrate with translation management platforms for collaborative review before deployment.
SKILL.md
rendered from the published skill — quoted content, verbatim
國際化與本地化 Internationalization & Localization
> 讓你的應用程式走向全世界
核心概念
``` ┌─────────────────────────────────────────────────────────────────┐ │ i18n vs l10n │ │ │ │ 國際化 (Internationalization - i18n) │ │ ├─ 設計支援多語言的架構 │ │ ├─ 抽離可翻譯的字串 │ │ ├─ 處理日期、數字、貨幣格式 │ │ └─ 一次性工程工作 │ │ │ │ 本地化 (Localization - l10n)
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
software-engineering/internationalization/SKILL.md