国际化与本地化技能Skill：把 i18n 从"上线前补丁"变成"架构默认项"
- 它是什么：一个专注于国际化（i18n）与本地化（l10n）的 AI 技能，覆盖翻译文件格式、复数化规则、日期/数字/货币格式化、RTL 布局、语言检测与切换等完整链路。
- 解决什么：把"字符串硬编码、日期格式写死、阿拉伯语界面错位、翻译键命名混乱"这些常见返工点，在编码阶段就按行业模式处理。
- 怎么用：在支持 AI 技能的客户端或插件中检索技能名或技能 ID 添加后，用自然语言描述技术栈与目标区域，即可获得结构化方案与可直接参考的代码。
- 适合谁：正在做多语言版本的前端团队、需要出海的后端与全栈开发者、以及负责国际化改造的技术负责人。
- 边界：它是"模式与方案型"技能，提供架构思路与代码参考，不替代专业译员的翻译质量把关。
1. 该技能叫什么？如何一键安装 AI 技能提升开发效率？
技能基本信息
| 项目 | 内容 |
|---|---|
| 技能中文名 | 国际化与本地化技能Skill |
| 技能英文名 | i18n |
| 技能ID | 13499 |
| 技能类型 | 开发模式与工程实践类技能 |
| 覆盖技术栈 | React / Vue / Angular、Node.js、Python、Ruby 等 |
它到底解决什么问题
国际化最容易出问题的从来不是"翻译"本身，而是"翻译之外"的部分：字符串散落在组件里无法抽取、德语长文案把按钮撑破、de-AT 用户看到英文界面、阿拉伯语页面布局整体错位、1 item 和 1 items 的复数规则在俄语里要拆成三种形式、金额在不同区域显示成 $1,234.56 还是 1.234,56 €。这个技能把这些问题的标准解法沉淀成一套可复用的模式库：架构分层、区域标识符（如 en-US、zh-Hans）、回退链、命名空间、ICU MessageFormat 复数化、Intl 系列 API 格式化、CSS 逻辑属性做 RTL。
"一键安装"的思路与步骤
所谓"一键安装"，本质是把一套领域知识挂载到你的 AI 编码助手上下文里，使它在你写多语言相关代码时自动按最佳实践输出，而不是每次都要你去翻文档。
- 确认安装前提：你使用的客户端、IDE 插件或 Agent 平台需要支持加载外部 AI 技能（Skill）。若平台不支持技能机制，则只能以普通对话方式咨询，效果会打折扣。
- 找到技能入口：通常在平台的"技能市场 / Skill 商店 / 插件中心"中，用技能名"国际化与本地化技能Skill"、英文名"i18n"或技能ID 13499 检索。具体的安装命令、仓库地址与入口路径请以官方说明为准。
- 执行添加并确认已启用：添加后在技能列表中应能看到该技能处于开启状态；部分平台支持按项目级别启用。
- 验证是否生效：新建一次对话，问一个需要专业模式判断的问题，例如"React 项目接入 i18next 时，
de-AT如何回退到de再到en？请给出配置"。若回答中包含fallbackLng、supportedLngs、命名空间等结构化内容，说明技能已正常加载。 - 进入日常开发流：之后在写翻译文件、切换语言、处理 RTL 样式时直接提问或让助手改代码即可，不必每次手动指定上下文。
2. 该技能的主要功能和特点
- 多语言架构模式：给出
locales/按语言 + 命名空间分目录的组织方式，以及包含code、language、region、direction、dateFormat、numberFormat、currency的区域配置结构，让"新增一种语言"变成加配置而不是改代码。 - 四种主流翻译文件格式：JSON（i18next / react-intl）、带命名空间的嵌套 JSON、YAML、以及 gettext 的 PO/POT 格式，能按团队技术栈给出对应写法。
- 真复数化能力：用 ICU MessageFormat 处理英语 2 种、俄语 3 种、阿拉伯语 6 种复数形式，并支持
select（如性别分支）与selectordinal（如第 1st / 2nd / 3rd 名）。 - 区域感知格式化：基于
Intl.NumberFormat、Intl.DateTimeFormat、Intl.RelativeTimeFormat、Intl.ListFormat，把数字、货币、日期、相对时间、列表连接词都交给运行环境按区域处理，而非手写格式化字符串。 - RTL 从右到左完整方案：用
margin-inline-start、padding-inline、text-align: start等 CSS 逻辑属性替代物理属性，配合:dir(rtl)伪类做图标翻转、unicode-bidi: isolate处理双向文本，并提供 React 的DirectionProvider上下文写法。 - 语言检测与回退：完整给出"URL 参数 → Cookie →
Accept-Language请求头 → 默认区域"的优先级检测流程，以及Accept-Language中q权重解析的实现。 - 流行库的落地配置：i18next（含 HTTP 后端、浏览器语言检测、
load: "currentOnly"、escapeValue: false、自定义插值格式化）、react-intl（IntlProvider、FormattedMessage、useIntl）、Python gettext（translation、gettext、ngettext）。 - 工程化收尾：翻译键提取脚本（基于 Babel 解析
t()调用）、伪本地化测试思路、用德语长文案测 UI 溢出、用真实 RTL 内容而非镜像 LTR 做验证。 - 与普通工具的区别：普通工具解决"单点问题"，例如只告诉你某个 API 怎么用；这个技能解决"体系问题"——把翻译键命名、回退策略、格式化、方向性、测试串成一条可执行的工程路径。
3. 如何使用该技能？
以下步骤可直接作为日常使用流程参考。
第 1 步：交代清楚上下文
输入示例：
我的项目是 React 18 + TypeScript + Vite，准备上线德语、法语、阿拉伯语三个市场。请给出 i18next 的完整接入方案，包含目录结构、命名空间划分、回退链和 RTL 处理。
输出说明：技能会返回按语言分目录的结构（locales/en/common.json 等）、区域配置对象、i18n 初始化代码，以及方向切换时的 document.documentElement.dir 设置。
第 2 步：生成翻译文件骨架
输入示例：
帮我按
common、products、errors三个命名空间生成英文和德语的基础 JSON，要求使用描述性分层键，比如products.card.addToCart。
输出说明：得到嵌套 JSON 结构，键名可追踪、可检索，占位符统一用 {{name}} 这类插值语法，并提示记录占位符含义。
第 3 步：处理复数与复杂文案
输入示例：
购物车文案"您有 N 件商品"需要用 ICU MessageFormat 同时支持英语、俄语、阿拉伯语。
输出说明：给出 {count, plural, =0 {...} one {...} other {...}} 的写法，俄语补 few、many，阿拉伯语补 zero、two 等分支。
第 4 步：统一日期、数字、货币格式化
输入示例：
帮我写一个
LocaleFormatter工具类，支持de-DE下的数字、货币、日期、相对时间和列表格式化。
输出说明：返回基于 Intl.* 的实现，并给出示例结果，例如 de-DE 下 1234567.89 显示为 1.234.567,89，99.99 EUR 显示为 99,99 €。
第 5 步：改造 RTL 布局
输入示例：
现有卡片组件用了
margin-left、border-left和text-align: left，如何改成方向无关的写法？
输出说明：给出逻辑属性替换方案（margin-inline-start、border-inline-start、text-align: start），并提示用 :dir(rtl) 处理需要翻转的图标。
第 6 步：接入语言检测与切换
输入示例：
服务端如何决定用户语言？优先级想按 URL 参数、Cookie、Accept-Language、默认值来。
输出说明：返回带优先级判断的 detectLocale 函数与 parseAcceptLanguage 解析逻辑，同时给出前端的 LocaleSwitcher 下拉组件写法。
第 7 步：收尾做质量检查
输入示例：
帮我写一个脚本，扫描
src下所有t()调用，把翻译键提取成一份待翻译清单。
输出说明：返回基于 Babel 解析的提取脚本，输出键集合与数量统计，便于交给翻译流程。
4. 同类型竞品对比分析
| 方案名称 | 定位 | 核心功能 | 安装/使用门槛 | 适用场景 | 优势与不足 |
|---|---|---|---|---|---|
| 国际化与本地化技能Skill（i18n） | AI 技能：国际化模式与工程实践知识库 | 架构分层、四种翻译文件格式、ICU 复数化、Intl 格式化、RTL、语言检测、库配置、提取脚本 | 需在支持技能的平台添加，检索技能名或技能ID即可；具体入口以官方说明为准 | 需要一次性把多语言方案设计正确的新项目；存量项目国际化改造 | 优势：跨库跨语言、给的是体系而非单点答案；不足：翻译文案质量仍需人工或译员把关 |
| i18next 官方文档 + 手动接入 | 成熟的开源国际化框架 | 翻译加载、命名空间、插值、语言检测插件、React 绑定 | 需自行读文档、装依赖、写配置，学习曲线中等 | 中大型 React / Node 项目 | 优势：生态成熟、可控性高；不足：需要自己拼装 RTL、格式化、测试等周边方案 |
| react-intl / FormatJS | 以 ICU MessageFormat 为核心的国际化库 | IntlProvider、FormattedMessage、formatNumber、formatDate |
需理解 ICU 语法，配置相对集中 | 强依赖 ICU 文案规范的前端项目 | 优势：复数与格式化能力强、规范统一；不足：非 React 场景适配成本高 |
| gettext + Babel（Python 后端） | 传统后端本地化工具链 | PO/POT 文件、ngettext 复数、提取工作流 |
需要维护 .po 编译流程，工具链偏重 |
Django / Flask 等后端服务、CLI 工具 | 优势：译者友好、生态历史悠久；不足：与现代前端 JSON 方案需桥接 |
选择建议：新项目、跨栈团队、需要同时处理 RTL 与格式化的场景，优先用本技能先把方案定下来；已有成熟框架的项目，可以把本技能当作"方案审阅者"和"疑难问题解答者"。
5. 该技能的典型应用场景与实际体验情况
场景一：前端团队首次进入中东市场
角色是前端负责人，痛点是阿拉伯语上线前发现整个页面方向混乱、图标指向相反、表单对齐错位。使用方式是让技能输出一套 RTL 改造清单：哪些物理属性要换逻辑属性、哪些图标需要 scaleX(-1)、双向文本段落如何隔离。实际体验是上手难度低，因为它给的是可直接替换的 CSS 片段，而不是抽象原则；注意事项是要用真实阿拉伯语内容测试，仅把 LTR 页面镜像过去会掩盖问题。
场景二：SaaS 产品出海，需要多币种多时区展示
角色是全栈开发者，痛点是价格、账单日期、订阅周期在不同区域显示不一致，用户投诉"金额看不懂"。使用方式是让技能生成统一的 LocaleFormatter，把数字、货币、日期、相对时间全部收口到一个工具类。实际体验是效果直观，de-DE 与 en-US 的差异一眼可验证；注意事项是货币代码与展示区域要分开配置，不要用区域反推币种。
场景三：存量项目国际化改造审计
角色是技术负责人，痛点是代码里到处是硬编码中文，没人说得清到底有多少待抽取文案。使用方式是让技能给出翻译键提取脚本与伪本地化验证思路，先量化再改造。实际体验是"先测量后动刀"的路径清晰，能避免改到一半发现遗漏；注意事项是伪本地化只用于发现硬编码，不能替代真实翻译验收。
场景四：后端 Python 服务的文案本地化
角色是后端工程师，痛点是接口返回的提示语需要支持多语言，还要处理复数。使用方式是让技能给出 gettext 的 translation、gettext、ngettext 用法与 PO 文件结构。实际体验是概念解释到位，能把 msgid / msgstr / Plural-Forms 讲清楚；注意事项是 .po 需要编译为 .mo 才生效，构建流程要一并配置。
6. 该技能能为用户带来的价值
- 效率提升：把"查文档、拼配置、试错格式化"的循环压缩成几轮对话。以接入一个 React 项目的国际化为例，目录结构、i18n 初始化、语言切换组件、RTL 处理通常涉及翻阅多个库的多篇文档，技能可以一次性给出可运行骨架，减少来回检索的时间。
- 降低门槛：复数化规则、
Accept-Language权重解析、CSS 逻辑属性这些知识点对初次出海的团队并不直观，技能把它们转成"照着改就行"的代码片段，让不具备国际化经验的开发者也能做出符合规范的实现。 - 减少返工：RTL 错位和格式化错误往往在测试后期才暴露，修复成本高。把方向性、格式化、回退链在编码阶段就写对，可以显著减少上线前的集中返工。
- 长期价值：翻译键命名规范、命名空间划分、回退链策略一旦统一，后续每新增一种语言都是"加文件、加配置"的增量动作，而不是结构性改造。这种一致性会随着语言数量增长而持续放大收益。
7. 常见问题 FAQ
Q1：这个技能怎么安装？需要付费吗？
A：在支持 AI 技能的平台中，通常通过技能市场或插件中心检索技能名"国际化与本地化技能Skill"、英文名"i18n"或技能ID 13499 后添加即可，具体命令、入口和是否收费请以官方说明为准。安装后建议先用一个"i18next 回退链怎么配"的问题验证是否生效。
Q2：它会不会自动帮我把文案翻译成外语？
A：不会。这个技能的定位是国际化与本地化的模式与工程实践支持，负责字符串抽取、翻译文件结构、复数化规则、格式化与 RTL 布局等工程侧问题。译文质量仍需要专业译员或翻译平台把关，技能负责让翻译内容"装得进去、显示正确"。
Q3：它只支持 React 吗？Vue 和 Python 项目能用吗？
A：覆盖面较广。技能内容涉及 React 生态（i18next、react-i18next、react-intl / FormatJS）、Vue 的 vue-i18n、Node.js 侧的 i18next 与 node-polyglot、Python 的 gettext 与 Babel、Ruby 的 i18n gem 与 Rails I18n，使用时在提问中说明技术栈即可获得对应写法。
Q4：和直接看 i18next 或 react-intl 的官方文档相比，优势在哪？
A：官方文档解决"这个库怎么用"，这个技能解决"整套国际化怎么做"。它会把翻译文件格式选型、命名空间划分、复数分支、日期货币格式化、RTL 逻辑属性、语言检测优先级、伪本地化测试串成一条链路。框架文档更新更权威，技能则更贴近"一次问清一个完整方案"，两者结合使用效果最好。
Q5：适合什么阶段使用？项目已经上线了还用得上吗？
A：新项目立项时用它定架构收益最大，能避免后期结构性返工。已上线项目同样适用，典型用法是让技能输出改造清单与翻译键提取脚本，先把硬编码字符串量化，再按命名空间逐步迁移；同时用它审阅现有 RTL 样式与格式化逻辑，找出方向属性和手写格式化字符串的问题点。