i18n-date-patterns by yonatangross/orchestkit
npx skills add https://github.com/yonatangross/orchestkit --skill i18n-date-patterns此技能为在 React 应用程序中实现国际化提供了全面的指导。它确保所有面向用户的字符串、日期显示、货币、列表和时间计算都具备区域感知能力。
何时使用此技能:
捆绑资源(使用 Read("${CLAUDE_SKILL_DIR}/<path>") 加载):
references/formatting-utilities.md - useFormatting 钩子 API 参考references/icu-messageformat.md - ICU 复数/选择语法references/trans-component.md - 用于富文本的 Trans 组件checklists/i18n-checklist.md - 实现和审查清单examples/component-i18n-example.md - 完整组件示例广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
规范参考: 完整的 i18n 标准文档请参见 docs/i18n-standards.md。
所有可见字符串必须使用翻译函数:
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>
);
}
所有区域敏感的格式化必须使用集中化的钩子:
import { useFormatting } from '@/hooks';
function PriceDisplay({ amount, items }) {
const { formatILS, formatList, formatOrdinal } = useFormatting();
return (
<div>
<p>价格: {formatILS(amount)}</p> {/* ₪1,500.00 */}
<p>项目: {formatList(items)}</p> {/* "a, b, and c" */}
<p>位置: {formatOrdinal(3)}</p> {/* "3rd" */}
</div>
);
}
完整 API 请加载 Read("${CLAUDE_SKILL_DIR}/references/formatting-utilities.md")。
所有日期必须使用集中化的 @/lib/dates 库:
import { formatDate, formatDateShort, calculateWaitTime } from '@/lib/dates';
const date = formatDate(appointment.date); // "Jan 6, 2026"
const waitTime = calculateWaitTime('09:30'); // "15 min"
在翻译文件中使用 ICU 语法处理复数形式:
{
"patients": "{count, plural, =0 {No patients} one {# patient} other {# patients}}"
}
t('patients', { count: 5 }) // → "5 patients"
完整语法请加载 Read("${CLAUDE_SKILL_DIR}/references/icu-messageformat.md")。
用于在翻译文本中嵌入 React 组件:
import { Trans } from 'react-i18next';
<Trans
i18nKey="richText.welcome"
values={{ name: userName }}
components={{ strong: <strong /> }}
/>
模式请加载 Read("${CLAUDE_SKILL_DIR}/references/trans-component.md")。
frontend/src/i18n/locales/
├── en/
│ ├── common.json # 共享:操作、状态、时间
│ ├── patients.json # 患者相关字符串
│ ├── dashboard.json # 仪表板字符串
│ ├── owner.json # 所有者门户字符串
│ └── invoices.json # 发票字符串
└── he/
└── (same structure)
// ❌ 切勿硬编码字符串
<h1>מטופלים</h1> // 应使用 t('patients:title')
<button>Save</button> // 应使用 t('common:actions.save')
// ❌ 切勿使用 .join() 处理列表
items.join(', ') // 应使用 formatList(items)
// ❌ 切勿硬编码货币
"₪" + price // 应使用 formatILS(price)
// ❌ 切勿使用 new Date() 进行格式化
new Date().toLocaleDateString() // 应使用 @/lib/dates 中的 formatDate()
// ❌ 切勿使用内联复数逻辑
count === 1 ? 'item' : 'items' // 应使用 ICU MessageFormat
// ❌ 切勿在生产环境中留下 console.log
console.log('debug') // 提交前移除
// ❌ 切勿使用 dangerouslySetInnerHTML 处理 i18n
dangerouslySetInnerHTML // 应使用 <Trans> 组件
| 需求 | 解决方案 |
|---|---|
| 用户界面文本 | 来自 useTranslation 的 t('namespace:key') |
| 货币 | 来自 useFormatting 的 formatILS(amount) |
| 列表 | 来自 useFormatting 的 formatList(items) |
| 序数 | 来自 useFormatting 的 formatOrdinal(n) |
| 日期 | 来自 @/lib/dates 的 formatDate(date) |
| 复数形式 | 翻译文件中的 ICU MessageFormat |
| 富文本 | <Trans> 组件 |
| 从右到左检查 | 来自 useFormatting 的 isRTL |
完整的实现和审查清单请加载 Read("${CLAUDE_SKILL_DIR}/checklists/i18n-checklist.md")。
.join()、console.log 等)技能版本 : 1.2.0 最后更新 : 2026-01-06 维护者 : Yonatan Gross
ork:testing-e2e - 端到端测试模式,包括 i18n 的无障碍测试type-safety-validation - 用于验证翻译键结构和区域配置的 Zod 模式ork:react-server-components-framework - 服务器端区域检测和 RSC i18n 模式ork:accessibility - 用于双向用户界面导航的从右到左感知焦点管理| 决策 | 选择 | 理由 |
|---|---|---|
| 翻译库 | react-i18next | React-native 钩子、命名空间支持、ICU 格式 |
| 日期库 | dayjs | 轻量级、区域插件、不可变 API |
| 消息格式 | ICU MessageFormat | 行业标准、支持复杂复数/选择 |
| 区域存储 | 按命名空间的 JSON | 代码分割、按功能懒加载 |
| 从右到左检测 | CSS 逻辑属性 | 原生浏览器支持、无 JavaScript 开销 |
关键词: useTranslation, t(), i18n hook, translation hook 解决的问题:
关键词: useFormatting, formatCurrency, formatList, formatOrdinal 解决的问题:
关键词: ICU, MessageFormat, plural, select, pluralization 解决的问题:
关键词: date format, time format, dayjs, locale date, calendar 解决的问题:
关键词: RTL, right-to-left, hebrew, arabic, direction 解决的问题:
关键词: Trans, rich text, embedded JSX, interpolation 解决的问题:
每周安装次数
79
代码仓库
GitHub 星标数
132
首次出现
Jan 22, 2026
安全审计
安装于
gemini-cli72
opencode72
codex69
claude-code68
github-copilot68
cursor68
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:
Bundled Resources (load with Read("${CLAUDE_SKILL_DIR}/<path>")):
references/formatting-utilities.md - useFormatting hook API referencereferences/icu-messageformat.md - ICU plural/select syntaxreferences/trans-component.md - Trans component for rich textchecklists/i18n-checklist.md - Implementation and review checklistexamples/component-i18n-example.md - Complete component exampleCanonical Reference: See docs/i18n-standards.md for the full i18n standards document.
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>
);
}
All locale-sensitive formatting MUST use the centralized hook:
import { useFormatting } from '@/hooks';
function PriceDisplay({ amount, items }) {
const { formatILS, formatList, formatOrdinal } = useFormatting();
return (
<div>
<p>Price: {formatILS(amount)}</p> {/* ₪1,500.00 */}
<p>Items: {formatList(items)}</p> {/* "a, b, and c" */}
<p>Position: {formatOrdinal(3)}</p> {/* "3rd" */}
</div>
);
}
Load Read("${CLAUDE_SKILL_DIR}/references/formatting-utilities.md") for the complete API.
All dates MUST use the centralized @/lib/dates library:
import { formatDate, formatDateShort, calculateWaitTime } from '@/lib/dates';
const date = formatDate(appointment.date); // "Jan 6, 2026"
const waitTime = calculateWaitTime('09:30'); // "15 min"
Use ICU syntax in translation files for pluralization:
{
"patients": "{count, plural, =0 {No patients} one {# patient} other {# patients}}"
}
t('patients', { count: 5 }) // → "5 patients"
Load Read("${CLAUDE_SKILL_DIR}/references/icu-messageformat.md") for full syntax.
For embedded React components in translated text:
import { Trans } from 'react-i18next';
<Trans
i18nKey="richText.welcome"
values={{ name: userName }}
components={{ strong: <strong /> }}
/>
Load Read("${CLAUDE_SKILL_DIR}/references/trans-component.md") for patterns.
frontend/src/i18n/locales/
├── en/
│ ├── common.json # Shared: actions, status, time
│ ├── patients.json # Patient-related strings
│ ├── dashboard.json # Dashboard strings
│ ├── owner.json # Owner portal strings
│ └── invoices.json # Invoice strings
└── he/
└── (same structure)
// ❌ NEVER hardcode strings
<h1>מטופלים</h1> // Use t('patients:title')
<button>Save</button> // Use t('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 formatting
new Date().toLocaleDateString() // Use formatDate() from @/lib/dates
// ❌ NEVER use inline plural logic
count === 1 ? 'item' : 'items' // Use ICU MessageFormat
// ❌ NEVER leave console.log in production
console.log('debug') // Remove before commit
// ❌ NEVER use dangerouslySetInnerHTML for i18n
dangerouslySetInnerHTML // Use <Trans> component
| Need | Solution |
|---|---|
| UI text | t('namespace:key') from useTranslation |
| Currency | formatILS(amount) from useFormatting |
| Lists | formatList(items) from useFormatting |
| Ordinals | formatOrdinal(n) from useFormatting |
Load Read("${CLAUDE_SKILL_DIR}/checklists/i18n-checklist.md") for complete implementation and review checklists.
.join(), console.log, etc.)Skill Version : 1.2.0 Last Updated : 2026-01-06 Maintained by : Yonatan Gross
ork:testing-e2e - E2E testing patterns including accessibility testing for i18ntype-safety-validation - Zod schemas for validating translation key structures and locale configsork:react-server-components-framework - Server-side locale detection and RSC i18n patternsork:accessibility - RTL-aware focus management for bidirectional UI navigation| Decision | Choice | Rationale |
|---|---|---|
| Translation Library | react-i18next | React-native hooks, namespace support, ICU format |
| Date Library | dayjs | Lightweight, locale plugins, immutable API |
| Message Format | ICU MessageFormat | Industry standard, complex plural/select support |
| Locale Storage | Per-namespace JSON | Code-splitting, lazy loading per feature |
| RTL Detection | CSS logical properties | Native browser support, no JS overhead |
Keywords: useTranslation, t(), i18n hook, translation hook Solves:
Keywords: useFormatting, formatCurrency, formatList, formatOrdinal Solves:
Keywords: ICU, MessageFormat, plural, select, pluralization Solves:
Keywords: date format, time format, dayjs, locale date, calendar Solves:
Keywords: RTL, right-to-left, hebrew, arabic, direction Solves:
Keywords: Trans, rich text, embedded JSX, interpolation Solves:
Weekly Installs
79
Repository
GitHub Stars
132
First Seen
Jan 22, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
gemini-cli72
opencode72
codex69
claude-code68
github-copilot68
cursor68
前端开发AI工具 | 5大专业能力构建生产级前端页面 | 设计工程与动效系统
733 周安装
Claude 视觉多模态技能:图像分析、文档处理、OCR文本提取与多模态理解
158 周安装
临床试验精准匹配工具 - 基于分子谱和临床特征推荐个性化试验
154 周安装
电子邮件服务集成指南:SMTP、SendGrid、Mailgun、AWS SES 与 Python/Node.js 实现
156 周安装
命名诊断与优化指南:解决品牌、产品命名难题,提升名称记忆度与功能性
157 周安装
Lighthouse 性能审计与优化指南:CLI、Node API、CI/CD 集成与性能预算
78 周安装
TextKit 2 完整参考指南:架构、迁移与 SwiftUI 集成 | iOS 文本处理
156 周安装
| Dates | formatDate(date) from @/lib/dates |
| Plurals | ICU MessageFormat in translation files |
| Rich text | <Trans> component |
| RTL check | isRTL from useFormatting |