i18n-date-patterns

name	i18n-date-patterns
license	MIT
compatibility	Claude Code 2.1.220+.
description	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.
context	inherit
agent	frontend-ui-developer
version	1.2.0
author	Yonatan Gross
tags	["i18n","internationalization","dayjs","dates","react-i18next","localization","rtl","useTranslation","useFormatting","ICU","Trans"]
user-invocable	false
disable-model-invocation	true
complexity	low
persuasion-type	reference
effort	low
targets	[{"library":"react-i18next","version":">=13.0.0"},{"library":"dayjs","version":">=1.11.0"}]
model	haiku
metadata	{"category":"document-asset-creation"}
allowed-tools	["Read","Glob","Grep","WebFetch","WebSearch"]
path_patterns	["**/i18n/**","**/locales/**","**/translations/**","*.locale.*"]

i18n and Localization Patterns

Overview

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:

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation(['patients', 'common']);
  
  return (
    <div>
      <h1>{t('patients:title')}</h1>
      <button>{t('common:actions.save')}</button>
    </div>
  );
}

2. useFormatting Hook (Locale-Aware Data)