i18n-localization

Implements internationalization with translation dictionaries, RTL support, and locale-aware formatting in React and Next.js.

Updated Apr 13, 2026
One-click install
npx skills add https://github.com/JenilRevaliya/ARGUS --skill i18n-localization-jenilrevaliya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: i18n-localization
Source: https://github.com/JenilRevaliya/ARGUS/tree/main/.agent/skills/i18n-localization
Command: npx skills add https://github.com/JenilRevaliya/ARGUS --skill i18n-localization-jenilrevaliya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Hardcoded strings, broken RTL layouts, and inconsistent translation keys block applications from scaling to global multilingual audiences, and manual audits of locale files are error-prone. ## Core Features & Use Cases - String Abstraction & Dictionaries: Replace hardcoded UI text with interpolation-based translation keys using next-intl or react-i18next, including ICU pluralization rules. - Native Locale Formatting: Format dates, currencies, and relative time with the Intl API instead of heavy libraries like moment.js. - RTL & SSR Locale Detection: Apply logical CSS properties for Arabic/Hebrew layouts and detect locales from Accept-Language headers in Next.js middleware. - Automated i18n Auditing: Run the included checker script to detect hardcoded strings and missing translation keys across locales. - Use Case: Preparing a React dashboard for launch in Germany and Saudi Arabia—abstract all strings into JSON dictionaries, flip the layout with logical CSS properties, and verify key parity between en.json, de.json, and ar.json. ## Quick Start Audit my project for hardcoded strings and missing translation keys, then refactor the dashboard components to use next-intl.

Frequently Asked Questions about i18n-localization

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

FAQPage Schema
How do I internationalize a Next.js application?▼

Use next-intl or react-i18next to abstract strings into JSON dictionaries, then call useTranslations in components with interpolation like t('key', { name }). Add middleware to detect the Accept-Language header and rewrite URLs to locale-prefixed routes.

How to detect hardcoded strings in React code?▼

Run the included i18n_checker.py script against your project root. It scans JSX, Vue, and Python files for text literals in elements and attributes, then reports files lacking i18n patterns like t() or useTranslations.

next-intl vs react-i18next for React localization?▼

Both are supported patterns in this Skill. next-intl integrates with Next.js App Router and server components, while react-i18next is framework-agnostic with a larger plugin ecosystem. Choose based on your routing and SSR needs.

Does CSS support RTL layouts for Arabic and Hebrew?▼

Yes, use logical CSS properties like margin-inline-start instead of margin-left so spacing flips automatically in RTL mode. Set dir="rtl" on the html element; Tailwind v4 supports this via ms-4 and me-4 utilities.

Why do translations break my UI layout?▼

Translated text can be 30-200% longer than English, overflowing fixed-width containers. Design for text expansion, avoid string concatenation that breaks word order, and use interpolation so translators control full sentences.

How do I check missing translation keys across locales?▼

The i18n_checker.py script flattens keys in each locale JSON file and compares them against a base language. It reports missing and extra keys per namespace and exits with a nonzero code when mismatches exist.