i18n-date-patterns

# 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_SKILL_DIR}/<path>")`): - `references/formatting-utilities.md` - useFormatting hook API reference - `references/icu-messageformat.md` - ICU plural/select syntax - `references/trans-component.md` - Trans component for rich text - `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: ```tsx 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) All locale-sensitive formatting...