Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.
Implements internationalization (i18n) in React applications. Covers user-facing strings, date/time handling, locale-aware formatting, ICU MessageFormat, and RTL support. Use when building multilingual UIs or formatting dates/currency.
This skill provides comprehensive guidance for implementing internationalization in React applications. It ensures ALL user-facing strings, date displays, currency, lists, and time calculations are locale-aware.
When to use this skill:
Adding ANY user-facing text to components
Formatting dates, times, currency, lists, or ordinals
Implementing complex pluralization
Embedding React components in translated text
Supporting RTL languages (Hebrew, Arabic)
Bundled Resources (load with Read("${CLAUDE_PLUGIN_ROOT}/skills/i18n-date-patterns/<path>")):
references/formatting-utilities.md - useFormatting hook API reference
references/ork-delta.md - House decisions and working config that upstream docs do not carry
checklists/i18n-checklist.md - Implementation and review checklist
examples/component-i18n-example.md - Complete component example
Canonical Reference: See docs/i18n-standards.md for the full i18n standards document.
Core Patterns
1. useTranslation Hook (All UI Strings)
Every visible string MUST use the translation function:
House rules for <Trans> live in rules/i18n-trans-component.md; the plural-plus-rich-text
ordering constraint lives in references/ork-delta.md. For the full component API see the
upstream table below.
Upstream coverage (do not restate)
These topics are owned by first-party docs. Read them there instead of re-deriving them here.
Topic
First-party source
House subset kept here
ICU plural, select, selectordinal, offset and nested message grammar
rules/i18n-icu-plurals.md keeps the house subset in full: no ternary pluralization, the mandatory other arm, =0 for zero states, Hebrew dual and Arabic categories
Which plural categories a given locale actually has
rules/i18n-trans-component.md keeps the house subset in full: never split a sentence across t() calls, never dangerouslySetInnerHTML, prefer named tags over indexed
// ❌ NEVER hardcode strings
<h1>מטופלים</h1> // Uset('patients:title')
<button>Save</button> // Uset('common:actions.save')
// ❌ NEVER use .join() for lists
items.join(', ') // Use formatList(items)// ❌ NEVER hardcode currency"₪" + price // Use formatILS(price)// ❌ NEVER use new Date() for formattingnewDate().toLocaleDateString() // Use formatDate() from @/lib/dates// ❌ NEVER use inline plural logic
count === 1 ? 'item' : 'items'// Use ICU MessageFormat// ❌ NEVER leave console.log in productionconsole.log('debug') // Remove before commit// ❌ NEVER use dangerouslySetInnerHTML for i18n
dangerouslySetInnerHTML // Use <Trans> component
Quick Reference
Need
Solution
UI text
t('namespace:key') from useTranslation
Currency
formatILS(amount) from useFormatting
Lists
formatList(items) from useFormatting
Ordinals
formatOrdinal(n) from useFormatting
Dates
formatDate(date) from @/lib/dates
Plurals
ICU MessageFormat in translation files
Rich text
<Trans> component
RTL check
isRTL from useFormatting
Checklist
Load Read("${CLAUDE_PLUGIN_ROOT}/skills/i18n-date-patterns/checklists/i18n-checklist.md") for complete implementation and review checklists.
Integration with Agents
Frontend UI Developer
Uses all i18n patterns for components
References this skill for formatting
Ensures no hardcoded strings
Code Quality Reviewer
Checks for anti-patterns (.join(), console.log, etc.)
Validates translation key coverage
Ensures RTL compatibility
Skill Version: 1.2.0
Last Updated: 2026-01-06
Maintained by: Yonatan Gross
Related Skills
ork:testing-e2e - E2E testing patterns including accessibility testing for i18n
ork:react-server-components-framework - Server-side locale detection and RSC i18n patterns
ork:accessibility - RTL-aware focus management for bidirectional UI navigation
