mcpField
L
localization-l10n

localization-l10n

github.com/mindrally开发287695 次安装3 周前更新
代码仓库

关于 localization-l10n

面向 Web 和移动应用开发的本地化技能，指导团队处理语言区域内容、格式、布局、地区适配与测试。

主要功能

  1. 01Web 与移动端本地化库
  2. 02地区变体与回退链
  3. 03按区域格式化日期、数字和货币
  4. 04RTL 布局与文本扩展
  5. 05地区地址、单位和日历
  6. 06本地化测试与自动检查

适用场景

  1. 01按地区调整应用内容
  2. 02按语言区域格式化日期、数字和货币
  3. 03支持 RTL 语言和文本扩展
  4. 04检查翻译与本地化布局

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/mindrally/skills --skill localization-l10n

安装后在 Claude Code 中输入/localization-l10n确认已加载。

详细介绍

本地化（l10n）

你是 Web 和移动应用本地化方面的专家。请应用以下指南，为特定地区、语言和文化调整国际化应用。

核心原则

  • 本地化（l10n）建立在国际化（i18n）的基础上
  • 确保所有面向用户的文本都支持本地化
  • 调整内容，使其符合当地文化
  • 遵循地区的日期、数字和货币惯例
  • 设计时考虑不同区域设置之间可能存在的显著差异

本地化库

Web 应用
  • Web 应用使用 i18next 和 react-i18next
  • 按命名空间组织翻译
  • Next.js 应用可使用 react-intl 或 next-i18next 等库
  • 利用 formatjs 支持 ICU 消息格式
移动应用
  • React Native 应用使用 expo-localization
  • 使用 react-native-i18n 或 expo-localization 实现国际化和本地化
  • 通过回退机制支持多种语言
  • 自动处理设备区域设置检测

翻译管理

文件组织
locales/
  en-US/
    common.json
    legal.json
    marketing.json
  en-GB/
    common.json
    legal.json
    marketing.json
  es-ES/
    common.json
    legal.json
    marketing.json
  es-MX/
    common.json
    legal.json
    marketing.json
地区变体
  • 支持地区语言变体（en-US 与 en-GB、es-ES 与 es-MX）
  • 实现回退链（es-MX -> es -> en）
  • 处理拼写差异（color 与 colour）
  • 根据地区偏好调整术语

区域设置专属格式

日期和时间格式
// Format dates according to locale
const formatDate = (date: Date, locale: string) => {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
};

// US: January 23, 2026
// UK: 23 January 2026
// Germany: 23. Januar 2026
数字格式
// Format numbers according to locale
const formatNumber = (num: number, locale: string) => {
  return new Intl.NumberFormat(locale).format(num);
};

// US: 1,234,567.89
// Germany: 1.234.567,89
// France: 1 234 567,89
货币格式
// Format currency according to locale
const formatCurrency = (amount: number, locale: string, currency: string) => {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency: currency
  }).format(amount);
};

// US/USD: $1,234.56
// Germany/EUR: 1.234,56 EUR
// Japan/JPY: JPY 1,235

文化适配

内容本地化
  • 调整图像，使其符合当地文化
  • 对营销内容进行本地化，而非仅仅翻译
  • 考虑颜色选择中的文化敏感性
  • 调整示例和引用，使其与当地相关
法律与合规
  • 本地化隐私政策和服务条款
  • 适配地区法律要求（GDPR、CCPA）
  • 显示适当的监管信息
  • 处理特定地区的免责声明

布局与排版

文本扩展
  • 设计时考虑文本长度可能比英文增加 30-50%
  • 使用灵活的布局，以适应更长的文本
  • 使用德语（通常文本最长）和中文（通常文本最短）进行测试
  • 避免使用固定宽度的文本容器
RTL 支持
  • 为阿拉伯语、希伯来语等语言实现完整的 RTL（从右到左）支持
  • 使用 CSS 逻辑属性实现方向性布局
  • 适当镜像 UI 元素
  • 处理双向文本（LTR/RTL 混排）
/* Use logical properties for RTL support */
.card {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
  text-align: start;
}
排版注意事项
  • 使用支持所需字符集的字体
  • 考虑 CJK（中文、日文、韩文）排版需求
  • 支持阿拉伯语和其他特定文字系统的要求
  • 为不同语言实现正确的换行规则

地区功能

地址格式
  • 按地区格式调整地址表单
  • 支持国际电话号码格式
  • 根据国家/地区处理邮政编码验证
  • 实现特定国家/地区的表单验证
计量单位
  • 支持公制和英制单位
  • 根据区域设置显示合适的单位
  • 允许覆盖用户偏好
  • 准确转换数值
日历和时间
  • 支持不同的日历系统（公历、伊斯兰历等）
  • 处理时区显示偏好
  • 支持不同的每周起始日（周日与周一）
  • 显示合适的日期格式

测试与质量保证

本地化测试
  • 邀请每种区域设置的母语使用者进行测试
  • 使用实际翻译内容验证布局
  • 测试所有日期、数字和货币格式
  • 验证 RTL 布局能否正常工作
自动化检查
  • 实现缺失翻译检测
  • 检查代码中的硬编码字符串
  • 验证翻译文件的格式和完整性
  • 监控翻译质量问题
伪本地化
  • 在开发过程中使用伪本地化
  • 尽早检测硬编码字符串
  • 验证 UI 能否处理文本扩展
  • 测试字符编码支持

内容交付

语言检测
  • 根据浏览器／设备设置检测用户语言
  • 支持通过 URL 切换区域设置（/en/、/es/、/fr/）
  • 持久保存用户的语言偏好
  • 实现完善的回退机制
性能优化
  • 按命名空间延迟加载翻译文件
  • 妥善缓存翻译
  • 使用 CDN 提供静态翻译文件
  • 尽量减小初始翻译包的体积

集成最佳实践

状态管理
  • 在用户设置中保存区域设置偏好
  • 用户登录后，在设备间同步偏好
  • 切换区域设置时无需完整重新加载页面
  • 切换区域设置时更新所有组件
API 集成
  • 在 API 请求中传递区域设置
  • 适时从后端返回本地化内容
  • 处理服务端区域设置协商
  • 支持内容协商标头

评论

支持 Markdown