skills.rest
Dazlarus
DazlarusCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

internationalization

Implement multi-language support, locale formatting, and RTL layouts in web applications.

Updated Sep 2, 2026
Search Tags:#localization#translation#i18n#rtl#i18next#unicode#locale formatting
One-click install
npx skills add https://github.com/Dazlarus/karl-code --skill internationalization-dazlarus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: internationalization
Source: https://github.com/Dazlarus/karl-code/tree/main/.agents/skills/internationalization
Command: npx skills add https://github.com/Dazlarus/karl-code --skill internationalization-dazlarus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires i18next, react-i18next, @formatjs/intl.

What problem does it solve? Building applications for a global audience requires handling translations, locale-specific formatting, Unicode text, and right-to-left layouts, which is error-prone when done ad hoc. This Skill provides structured guidance for setting up internationalization correctly from the start. ## Core Features & Use Cases - i18n Framework Setup: Configure i18next with react-i18next, including translation resources, fallback languages, and interpolation. - Locale-Aware Formatting: Format numbers, currencies, and dates using the Intl API for any locale. - RTL and Direction Support: Detect text direction and render right-to-left layouts for languages like Arabic and Hebrew. - Use Case: You are adding Spanish and Arabic support to a React app. Use this Skill to wire up i18next, translate UI strings with interpolation, format prices per locale, and flip the layout direction for Arabic users. ## Quick Start Set up i18next with react-i18next in my React app with English and Spanish translations and locale-aware date formatting.

Frequently Asked Questions about internationalization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up i18next in a React application?▼

Install i18next and react-i18next, then call i18n.use(initReactI18next).init() with your translation resources, default language, and fallbackLng. Wrap components with useTranslation to access the t() function for rendering translated strings.

How to format dates and currencies for different locales in JavaScript?▼

Use the built-in Intl API: Intl.NumberFormat with style 'currency' for money values and Intl.DateTimeFormat for dates. Pass the locale string like 'es-ES' or 'en-US' and the formatter handles regional conventions automatically.

Does react-i18next support RTL languages like Arabic?▼

Yes, i18n.dir() returns the text direction for the active language. Set the dir attribute on your root element based on this value so the browser renders right-to-left layout for RTL locales.

When should I not use a full i18n framework?▼

Skip i18n setup for simple one-off string replacement, where plain string interpolation is enough. Database query localization also belongs in a data layer approach rather than a frontend translation framework.

Why do translated strings with variables show raw placeholders?▼

Placeholders like {{name}} only resolve when you pass matching values to t(), for example t('greeting', { name: 'John' }). Also ensure interpolation.escapeValue is set to false in React to avoid double-escaping.

Related Skills

Explore More Software Engineering Skills→
DriveConnect-alphaDriveConnect-alpha
1

i18n-localization

Identify hardcoded strings and replace them with locale-aware translations.

Official
Advanced
aroidoaroido

internationalization

Implement react-i18next internationalization in React applications with language detection and translation management.

Official
Intermediate
mkatoguimkatogui
3

i18n-and-rtl

Translate physical CSS to logical CSS for RTL and i18n support.

Community
Intermediate
elcoospelcoosp

lingui-js-macro

Implements LinguiJS i18n in JavaScript/TypeScript projects using @lingui/macro.

Community
Intermediate