software-localisation
Software Localisation guides you through implementing internationalisation and localisation across modern web frameworks. It covers library selection (react-i18next, react-intl, vue-i18n, @angular/localize, next-intl), ICU message formatting, character encoding standards, and CI/CD workflows to prevent mixed-language regressions.
Software Localisation helps you implement production-grade i18n/l10n for React, Vue, Angular, and Next.js applications.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-13
Software Localisation helps you implement production-grade i18n/l10n for React, Vue, Angular, and Next.js applications. Software Localisation guides you through implementing internationalisation and localisation across modern web frameworks. It covers library selection (react-i18next, react-intl, vue-i18n, @angular/localize, next-intl), ICU message formatting, character encoding standards, and CI/CD workflows to prevent mixed-language regressions.
Use it when
- Software Localisation notes that react-i18next vs react-intl differ in philosophy and feature set.
- Software Localisation recommends a multi-layer approach: first, enable fallback language chains (e.g.
Verify before relying
Read SKILL.md below before installing (14 files). Open directory: indexed for reading, not audited.
Install
vasilyu1983/AI-Agents-public/software-localisation · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I set up i18n in React?
Software Localisation recommends react-i18next or react-intl as the primary choices for React i18n. react-i18next integrates with i18next (a mature, framework-agnostic library) and offers hooks-based APIs; react-intl provides strong ICU message format support and component-driven translation. Both handle namespacing, lazy loading, and language switching. Start by installing your chosen library, defining translation JSON files organized by locale and namespace, initializing the i18n instance with your language configuration, and wrapping your app with the provider component. Use hooks like `useTranslation()` in functional components to access translations and language-switching functions.
What's the difference between react-i18next and react-intl?
Software Localisation notes that react-i18next vs react-intl differ in philosophy and feature set. react-i18next wraps the standalone i18next library, offering flexibility, plugin ecosystems, and backend integration for dynamic translation loading; it's lighter and favors simplicity. react-intl is Facebook's solution with deeper ICU message format support, plural rules, and date/number formatting built-in; it's heavier but more opinionated. Choose react-i18next for lightweight projects or multi-framework codebases; choose react-intl if you need robust pluralization, gender agreement, or complex number/date formatting across locales.
How do I fix translation key missing in production?
Software Localisation recommends a multi-layer approach: first, enable fallback language chains (e.g., en-GB → en → default) so missing keys gracefully degrade. Second, use namespacing to organize keys logically and catch gaps during review. Third, implement key validation in your build pipeline—scan all component files for translation calls and verify every key exists in all locale files; flag mismatches before deployment. Fourth, log missing keys at runtime with your i18n library's error handler, then monitor those logs. Finally, automate translation sync: use tools like i18next-scanner to detect new keys, and integrate with translation management systems (TMS) to prevent stale or incomplete locale files reaching production.
What localization setup works best for Next.js?
Software Localisation recommends next-intl for Next.js internationalization. It integrates seamlessly with App Router, supports static generation per locale, and handles URL-based routing (e.g., /en/about, /fr/about). Install next-intl, configure middleware to detect and route users to their preferred locale, organize translation files by language, and wrap pages with the i18n provider. next-intl also supports ICU message format and provides type-safe translation keys via TypeScript. For static export, pre-generate all locale variants; for dynamic content, use ISR or on-demand revalidation. Alternatively, use react-i18next with custom routing if you prefer framework-agnostic tooling.
How do I implement RTL support for Arabic and Hebrew websites?
Software Localisation advises that RTL (right-to-left) support requires both i18n library configuration and CSS/layout changes. In your i18n setup, detect the locale and set the `dir` attribute on the `<html>` element to 'rtl' or 'ltr'. Use CSS logical properties (margin-inline, padding-block, text-align: start/end) instead of directional ones (margin-left, padding-right) so they flip automatically. Test with pseudo-localization tools to catch hardcoded directional assumptions. Ensure form inputs, modals, and navigation reverse visually. Many i18n libraries (react-intl, vue-i18n) expose locale metadata; use it to toggle RTL classes or CSS variables. Validate with native speakers and screen readers to confirm reading order and accessibility remain correct.
What's the best locale detection strategy for multilingual apps?
Software Localisation recommends a priority-based detection chain: first check URL/route parameters (most explicit), then user account preferences (if authenticated), then browser language headers (Accept-Language), then geolocation (if privacy-acceptable), and finally fall back to a default locale. Store the user's choice in localStorage or a cookie so it persists across sessions. For server-side rendering (Next.js, Nuxt), detect locale in middleware before rendering to avoid hydration mismatches. Use libraries like accept-language-parser to parse browser headers reliably. Avoid geolocation alone—it's unreliable and raises privacy concerns. Always let users manually override detection via a language picker, and document your strategy so translators and QA understand the fallback order.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Software Localisation - Quick Reference
Production patterns for internationalisation (i18n) and localisation (l10n) in modern web applications. Covers library selection, translation management, ICU message format, RTL support, and CI/CD workflows.
Snapshot (2026-02): i18next 25.x, react-i18next 16.x, react-intl 8.x, vue-i18n 11.x, next-intl 4.x, @angular/localize 21.x. Always verify current versions in the target repo (see Currency Check Protocol).
Authoritative References: - i18next Documentation - FormatJS/react-intl - ICU Message Format - MDN Intl API
Quick Reference
| Task | Tool/Library | Command | When to Use |
|---|---|---|---|
| React i18n | react-i18next | npm i i18next react-i18next |
Most React apps, flexibility |
(truncated - see the full file via the links below)
File tree — 14 files
frameworks/shared-skills/skills/software-localisation/SKILL.md
frameworks/shared-skills/skills/software-localisation/assets/nextjs-i18n-setup.md
frameworks/shared-skills/skills/software-localisation/assets/react-i18next-setup.md
frameworks/shared-skills/skills/software-localisation/assets/vue-i18n-setup.md
frameworks/shared-skills/skills/software-localisation/data/sources.json
frameworks/shared-skills/skills/software-localisation/references/accessibility-i18n.md
frameworks/shared-skills/skills/software-localisation/references/content-management-patterns.md
frameworks/shared-skills/skills/software-localisation/references/framework-guides.md
frameworks/shared-skills/skills/software-localisation/references/icu-message-format.md
frameworks/shared-skills/skills/software-localisation/references/locale-handling.md
frameworks/shared-skills/skills/software-localisation/references/ops-runbook.md
frameworks/shared-skills/skills/software-localisation/references/rtl-support.md
frameworks/shared-skills/skills/software-localisation/references/testing-i18n.md
frameworks/shared-skills/skills/software-localisation/references/translation-workflows.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up production i18n/l10n for React, Vue, Angular, or Next.js”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Translate Craft delivers translation that reads naturally in the target language, not like a translation. It covers 8 languages with language-specific rules for formality, tone, and cultural nuance, plus i18n framework setup (react-intl, i18next, ICU), RTL layout implementation, and locale-aware formatting for dates, currencies, and numbers.
i18n-helper identifies hardcoded strings in your source files and automates the setup of internationalization across frameworks like react-intl, vue-i18n, i18next, and gettext. It generates language files in the format your project needs, replaces text with i18n function calls, and reports translation completeness to catch missing keys.
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.
Build truly global applications with framework-agnostic localization patterns covering the entire i18n pipeline. Learn locale detection strategies, ICU message formatting with proper pluralization rules, RTL layout techniques using CSS logical properties, and SEO best practices with hreflang tags. Includes practical guidance on choosing between compile-time and runtime i18n libraries, managing translation workflows, and avoiding common pitfalls in multilingual development.
Build multilingual Israeli applications with proper Hebrew language support. This skill covers plural forms, locale-aware date and number formatting, RTL-first CSS using logical properties, and bidirectional text algorithms for frameworks like React, Vue, Next.js, and Angular.
Manage translations across multiple locales in Lingui catalogs without altering source keys or compiled outputs. The skill enforces preservation of placeholders, ICU syntax, and technical terminology while providing verification scripts to catch missing translations and ensure consistency.
More skills i18n-localization (MIT) · internationalization-i18n (MIT) · Migrate I18next To Lingui (unlicensed) · localization-l10n (Apache-2.0) · Translate (NOASSERTION) · localization-toolkit (MIT) · i18n-expert (MIT) · lingui-best-practices (MIT)