Ensures consistent i18n translation management for the NaiveTab extension.
Install
mkdir -p .claude/skills/add-i18n-locale && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/12211" && unzip -o skill.zip -d .claude/skills/add-i18n-locale && rm skill.zipInstalls to .claude/skills/add-i18n-locale
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
NaiveTab 浏览器扩展的 i18n 国际化开发指南。当用户要新增/修改翻译文本、添加多语言 key 时使用。涵盖中英文同步更新规则、变量替换模式等，防止遗漏或格式错误。Key capabilities
- →Add new i18n translation keys
- →Modify existing translation texts
- →Ensure synchronous updates across Chinese and English locale files
- →Enforce variable replacement patterns using `__key__` placeholders
- →Identify all user-facing texts that require i18n
How it works
The skill standardizes the process of adding or modifying i18n translation texts by enforcing file synchronization, key naming conventions, and specific variable replacement patterns.
Inputs & outputs
When to use add-i18n-locale
- →Add new translation keys
- →Update translated text
- →Manage localized UI strings
About this skill
NaiveTab Add i18n Locale
新增或修改 i18n 翻译文本需遵守以下规则。
文件位置
- 中文：
src/locales/zh-CN.json - 英文：
src/locales/en-US.json
两个文件必须同步更新，不能只改一个。
Key 命名规范
采用扁平嵌套结构，按功能分组：
{
"common": {
"save": "保存",
"cancel": "取消"
},
"setting": {
"group": {
"myPane": "我的面板"
}
}
}
引用方式：window.$t('common.save') 或模板中 $t('setting.group.myPane')。
变量替换
使用 __key__ 占位符 + .replace() 方式，禁止使用 vue-i18n 默认的 {key} 语法：
<!-- 正确 -->
{{ $t('key.xxx').replace('__n__', value) }}
<!-- 错误 -->
{{ $t('key.xxx', { n: value }) }}
// 正确
window.$t('key.xxx').replace('__count__', String(count))
覆盖范围
所有面向用户的文本都必须 i18n，包括但不限于：
- Dialog 的
title/content/positiveText/negativeText showToast/$notification文案placeholder、按钮文案- Setting 面板的
labelKey
注意事项
- 写代码时先想 i18n key，再写实现
- 不要因为"只是 dialog 文案"就跳过 i18n
- 完整规则见 no-hardcode.md
When not to use it
- →When only updating one locale file without synchronizing the other
- →When using Vue-i18n's default `{key}` syntax for variable replacement
Limitations
- →Both `zh-CN.json` and `en-US.json` files must be updated synchronously.
- →Vue-i18n's default `{key}` syntax for variable replacement is prohibited.
- →All user-facing texts must be internationalized.
How it compares
This skill ensures consistency and prevents errors in i18n development by mandating synchronous updates and specific syntax, unlike an unguided manual translation process.
Compared to similar skills
add-i18n-locale side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| add-i18n-locale (this skill) | 0 | 2mo | No flags | Beginner |
| browser-extension-developer | 4 | 6mo | No flags | Intermediate |
| vue-i18n-skilld | 0 | 3mo | No flags | Intermediate |
| i18n | 0 | 1mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
browser-extension-developer
yamadashy
Use this skill when developing or maintaining browser extension code in the `browser/` directory, including Chrome/Firefox/Edge compatibility, content scripts, background scripts, or i18n updates.
vue-i18n-skilld
skilld-dev
Internationalization plugin for Vue.js. ALWAYS use when writing code importing \"vue-i18n\". Consult for debugging, best practices, or modifying vue-i18n, vue i18n.
i18n
Project-N-E-K-O
i18n (internationalization) toolkit for projects using i18next. Provides three main functions: (1) i18n-check - Detect hardcoded Chinese text in HTML/JS files, (2) i18n-fix - Replace hardcoded text with i18n markers, (3) i18n-sync - Align translation keys across multiple languages (zh-CN, zh-TW, en,
harden
Aixbox
Improve interface resilience through better error handling, i18n support, text overflow handling, and edge case management. Makes interfaces robust and production-ready. Use when the user asks to harden, make production-ready, handle edge cases, add error states, or fix overflow and i18n issues.
zustand
lobehub
Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.
threejs-skills
sickn33
Three.js skills for creating 3D elements and interactive experiences