i18n-localization
Expert guide for implementing global multilingual support, RTL routing, and localized formatting.
Install
mkdir -p .claude/skills/i18n-localization-harmitx7 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9738" && unzip -o skill.zip -d .claude/skills/i18n-localization-harmitx7 && rm skill.zipInstalls to .claude/skills/i18n-localization-harmitx7
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Internationalization (i18n) and localization mastery. Abstracting hardcoded strings, managing JSON/YAML translation dictionaries, bidirectional routing (RTL support for Arabic/Hebrew), Pluralization algorithms, date/currency formatting, and SSR locale detection in Next.js/React. Use when preparing an application for global multilingual scaling.Key capabilities
- →Abstract hardcoded strings
- →Manage translation dictionaries
- →Implement RTL support
- →Format dates and currencies
How it works
It uses translation dictionaries and native Intl APIs to provide locale-aware formatting and layout.
Inputs & outputs
When to use i18n-localization
- →Implementing multi-language support
- →Setting up RTL for Arabic/Hebrew
- →Localizing dates and currencies
- →Abstracting hardcoded UI strings
About this skill
i18n & Localization — Global Scale Mastery
Mandatory Pre-Flight Context Inspection
Before engineering multilingual or i18n features, you MUST inspect:
- Dictionary Interpolation (Section 15) → Use ICU parameter interpolation
t('greeting', { name })instead of string concatenation - Native
IntlAPI Formatting (Section 71) → Use nativeIntl.NumberFormatandIntl.DateTimeFormatwith active locale instead of third-party string parsers - Logical CSS Properties for RTL (Section 94) → Use logical properties (
margin-inline-start,ms-4) instead of physicalmarginLeft/marginRightfor Arabic/Hebrew support
Hallucination Traps (Read First)
- ❌ Concatenating translated strings (
'Hello ' + name) -> ✅ Use interpolation:t('greeting', { name })to handle word order differences - ❌ Hardcoding date/number formats -> ✅ Use
Intl.DateTimeFormatandIntl.NumberFormatwith the user's locale - ❌ Assuming all languages read left-to-right -> ✅ Arabic, Hebrew, Farsi are RTL; use CSS
dir='auto'and logical properties - ❌ Using string length for validation on translated text -> ✅ Translations can be 30-200% longer than English; design for expansion
i18n & Localization — Global Scale Mastery
1. The i18n Architecture (Next.js / React)
Do not hardcode strings inside UI components. Use a standardized library (e.g., next-intl or react-i18next).
Step 1: Dictionary Abstraction
// messages/en.json
{
"Dashboard": {
"welcomeMessage": "Welcome back, {name}!",
"unreadAlerts": "{count, plural, =0 {No unread alerts} one {You have 1 unread alert} other {You have # unread alerts}}"
}
}
Step 2: Component Implementation
// ❌ BAD: Hardcoded English text and manual variable interpolation
export function Header({ user, alertCount }) {
return (
<h1>
Welcome back, {user.name}! You have {alertCount} alerts.
</h1>
);
}
// ✅ GOOD: i18n Abstraction (using next-intl)
import { useTranslations } from "next-intl";
export function Header({ user, alertCount }) {
const t = useTranslations("Dashboard");
return (
<header>
<h1>{t("welcomeMessage", { name: user.name })}</h1>
<p>{t("unreadAlerts", { count: alertCount })}</p>
</header>
);
}
2. Advanced Native Formatting (Intl)
Do not install moment.js or write massive regex string parsers to format currencies in Euros vs Dollars. The browser handles this natively with the Intl API.
// Data/Currency Formatting correctly tied to the active locale
const locale = "de-DE";
// ✅ Currency
const price = new Intl.NumberFormat(locale, { style: "currency", currency: "EUR" }).format(1200.5);
// Output in Germany: "1.200,50 €"
// ✅ Dates
const date = new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(new Date());
// Output in Germany: "Freitag, 2. April 2026"
// ✅ Relative Time
const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
rtf.format(-2, "day"); // Output: "vorgestern" (the day before yesterday)
3. Bidirectional Architecture (RTL)
For languages like Arabic and Hebrew, the UI must fundamentally flip horizontally. Right-To-Left (RTL) breaks standard CSS marginLeft and marginRight.
The Solution: Logical CSS Properties. Tailwind v4 (and modern CSS) natively supports logical direction.
/* ❌ BAD: Hardcoded physical space */
.btn {
margin-left: 10px;
} /* Will break layout in Hebrew */
/* ✅ GOOD: Logical spacing (Tailwind: ms-4, me-4) */
.btn {
margin-inline-start: 10px;
} /* Automatically flips in RTL mode */
In React HTML tag: <html lang="ar" dir="rtl">
4. Routing and SSR Detection
Users should not face English UI natively in Japan. Detect their browser headers at the edge routing layer.
In Next.js Middleware:
- Parse the incoming
Accept-Languageheader. - Intercept requests to
/dashboard. - Rewrite URL to the detected locale (e.g.,
/ja/dashboard).
AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
- Over-engineering: Proposing complex abstractions or distributed systems when a simpler approach suffices.
- Hallucinated Libraries/Methods: Using non-existent methods or packages. Always
// VERIFYor checkpackage.json/requirements.txt. - Skipping Edge Cases: Writing the "happy path" and ignoring error handling, timeouts, or data validation.
- Context Amnesia: Forgetting the user's constraints and offering generic advice instead of tailored solutions.
- Silent Degradation: Catching and suppressing errors without logging or re-raising.
Slash command: /review or /tribunal-full
Active reviewers: logic-reviewer · security-auditor
❌ Forbidden AI Tropes
- Blind Assumptions: Never make an assumption without documenting it clearly with
// VERIFY: [reason]. - Silent Degradation: Catching and suppressing errors without logging or handling.
- Context Amnesia: Forgetting the user's constraints and offering generic advice instead of tailored solutions.
Review these questions before confirming output:
✅ Did I rely ONLY on real, verified tools and methods?
✅ Is this solution appropriately scoped to the user's constraints?
✅ Did I handle potential failure modes and edge cases?
✅ Have I avoided generic boilerplate that doesn't add value?
🛑 Verification-Before-Completion (VBC) Protocol
CRITICAL: You must follow a strict "evidence-based closeout" state machine.
- ❌ Forbidden: Declaring a task complete because the output "looks correct."
- ✅ Required: You are explicitly forbidden from finalizing any task without providing concrete evidence (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
Pre-Flight Checklist
- Have I reviewed the user's specific constraints and requests?
- Have I checked the environment for relevant existing implementations?
VBC Protocol (Verification-Before-Completion)
You MUST verify existing code signatures and variables before attempting to modify or call them. No hallucination is permitted.
🤖 LLM-Specific Traps
AI coding assistants often fall into specific bad habits when dealing with this domain. These are strictly forbidden:
- Over-engineering: Proposing complex abstractions or distributed systems when a simpler approach suffices.
- Hallucinated Libraries/Methods: Using non-existent methods or packages. Always
// VERIFYor checkpackage.json/requirements.txt. - Skipping Edge Cases: Writing the "happy path" and ignoring error handling, timeouts, or data validation.
- Context Amnesia: Forgetting the user's constraints and offering generic advice instead of tailored solutions.
- Silent Degradation: Catching and suppressing errors without logging or re-raising.
🏛️ Tribunal Integration (Anti-Hallucination)
Slash command: /review or /tribunal-full
Active reviewers: logic-reviewer · security-auditor
❌ Forbidden AI Tropes
- Blind Assumptions: Never make an assumption without documenting it clearly with
// VERIFY: [reason]. - Silent Degradation: Catching and suppressing errors without logging or handling.
- Context Amnesia: Forgetting the user's constraints and offering generic advice instead of tailored solutions.
✅ Pre-Flight Self-Audit
Review these questions before confirming output:
✅ Did I rely ONLY on real, verified tools and methods?
✅ Is this solution appropriately scoped to the user's constraints?
✅ Did I handle potential failure modes and edge cases?
✅ Have I avoided generic boilerplate that doesn't add value?
🛑 Verification-Before-Completion (VBC) Protocol
CRITICAL: You must follow a strict "evidence-based closeout" state machine.
- ❌ Forbidden: Declaring a task complete because the output "looks correct."
- ✅ Required: You are explicitly forbidden from finalizing any task without providing concrete evidence (terminal output, passing tests, compile success, or equivalent proof) that your output works as intended.
When not to use it
- →For single-language applications
- →When manual string concatenation is preferred
Prerequisites
Limitations
- →Translations can be longer than English
- →Requires RTL-aware CSS
How it compares
It enforces architectural abstraction instead of manual string handling.
Compared to similar skills
i18n-localization side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| i18n-localization (this skill) | 0 | 1mo | Review | Intermediate |
| localize | 0 | 3mo | No flags | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| landing-page-guide-v2 | 48 | 8mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Harmitx7
View all by Harmitx7 →You might also like
localize
aladicf
Plan, implement, or improve an internationalization and localization strategy for UI content, formatting, and regional adaptation. Use when the user asks to add i18n, localize, translate, support multiple languages, handle regional formats, manage locale switching, or build a multilingual product.
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
landing-page-guide-v2
bear2u
Create distinctive, high-converting landing pages that combine proven conversion elements with exceptional design quality. Build beautiful, memorable landing pages using Next.js 14+ and ShadCN UI that avoid generic AI aesthetics while following the 11 essential elements framework.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
frontend-code-review
langgenius
Trigger when the user requests a review of frontend files (e.g., `.tsx`, `.ts`, `.js`). Support both pending-change reviews and focused file reviews while applying the checklist rules.