造i18n技能：硬编码转多语言

---
description: Summarizes uncommitted changes and flags anything risky.
---
## Current changes
!`git diff HEAD`
## Instructions
Summarize the changes above in two or three bullet points...

~/.claude/skills/i18n-extract/
├── SKILL.md                      # 入口：流程总览 + 导航
├── references/
│   ├── extraction-rules.md       # 什么算「用户可见文案」
│   └── key-naming.md             # key 命名约定
├── data/
│   └── glossary.yml              # 通用术语中英对照
└── scripts/
    ├── extract_strings.py        # 硬编码字符串抽取器
    └── verify_keys.py            # 翻译文件缺 key 校验

mkdir -p ~/.claude/skills/i18n-extract/{references,data,scripts}

---
description: 抽取代码里的硬编码用户文案，生成 i18n 翻译 key 并改写调用。
---
扫描当前项目，找出所有写死的用户可见字符串，提议翻译 key。

---
description: >
  扫描前端源码中写死的用户可见文案（中文/英文），抽取为 i18n 翻译 key，
  把硬编码改写成 t('key') 调用，并按术语表播种多语言翻译文件。
  Use when the user wants to internationalize a project, extract hardcoded
  UI strings, add multi-language support, generate translation files,
  or translate user-facing text into other languages.
  Triggers: "国际化"、"i18n"、"多语言"、"这些文案翻译"、"硬编码文案"、"提取翻译 key"。
disable-model-invocation: false
allowed-tools: Bash(python3 *) Read Edit Write Grep Glob
---

# 用户可见文案判定规则
## 必须抽取
- JSX 文本节点：<button>提交</button>
- 表单属性：placeholder、title、aria-label、alt
- 弹窗/通知：alert(message)、toast(message)、console.warn 之外的用户提示
- 路由/菜单 label、表头、按钮文案

## 不要抽取
- console.log / 调试日志
- API 路径、CSS 类名、事件名
- 已在 t() / i18n() / $t() 内的 key
- 注释里的中文

# Key 命名约定
结构：scope.context.element[.state]
- common.button.submit
- auth.login.placeholder.email
- order.detail.status.pending
全小写，点分层级，禁止中文/空格。

submit: 提交
cancel: 取消
confirm: 确认
loading: 加载中
email: 邮箱
password: 密码
welcome: 欢迎

## 参考资料
- 判定哪些字符串算「用户可见」：见 [references/extraction-rules.md](references/extraction-rules.md)
- key 怎么命名：见 [references/key-naming.md](references/key-naming.md)
- 术语优先翻译：使用 [data/glossary.yml](data/glossary.yml)

#!/usr/bin/env python3
"""扫描前端源码，列出疑似硬编码的用户可见文案。"""
import re, json, sys
from pathlib import Path

SKIP_DIRS = {'.git', 'node_modules', 'dist', 'build', '.next', '__pycache__'}
EXTS = {'.js', '.jsx', '.ts', '.tsx', '.vue'}
# JSX 文本节点 / 常见用户可见属性
PATTERNS = [
    re.compile(r'>([\u4e00-\u9fa5][^<]{0,40})<'),                 # <tag>中文</tag>
    re.compile(r'placeholder="([^"]{1,60})"'),
    re.compile(r'title="([^"]{1,60})"'),
    re.compile(r'aria-label="([^"]{1,60})"'),
    re.compile(r'alt="([^"]{1,60})"'),
    re.compile(r"""alert\(['"]([^'"]{1,60})['"]\)"""),
]

def scan(root: Path):
    hits = []
    for p in root.rglob('*'):
        if any(part in SKIP_DIRS for part in p.parts):
            continue
        if p.suffix not in EXTS:
            continue
        for i, line in enumerate(p.read_text(encoding='utf-8', errors='ignore').splitlines(), 1):
            for pat in PATTERNS:
                for m in pat.finditer(line):
                    val = m.group(1).strip()
                    if val and not re.match(r'^[a-zA-Z0-9_\-/.]+$', val):  # 排除纯标识符
                        hits.append({'value': val, 'file': str(p), 'line': i})
    # 按值去重
    seen, uniq = set(), []
    for h in hits:
        if h['value'] not in seen:
            seen.add(h['value']); uniq.append(h)
    return uniq

if __name__ == '__main__':
    root = Path(sys.argv[1]).resolve()
    print(json.dumps(scan(root), ensure_ascii=False, indent=2))

## 第 1 步：扫描硬编码文案
先运行抽取脚本，结果已注入下方：

```!
python3 ${CLAUDE_SKILL_DIR}/scripts/extract_strings.py ${CLAUDE_PROJECT_DIR}
```

## 第 2 步：生成 key 并改写
- 对上面每条 `value`，按 [key-naming.md](references/key-naming.md) 生成 key
- 用 Edit 把对应位置的硬编码替换为 `t('scope.context.xxx')`
- 翻译时优先套用 [glossary.yml](data/glossary.yml) 中的固定译法

## 第 3 步：播种翻译文件
生成/更新 `locales/zh-CN.json` 与 `locales/en-US.json`，结构为 `{ "common.button.submit": "提交" }`。

## 第 4 步：校验完整性
```bash
python3 ${CLAUDE_SKILL_DIR}/scripts/verify_keys.py ${CLAUDE_PROJECT_DIR}/locales
```

allowed-tools: Bash(python3 *) Read Edit Write Grep Glob

/plugin install skill-creator@claude-plugins-official
/reload-plugins

export function Login() {
  return (
    <form>
      <h2>用户登录</h2>
      <input placeholder="请输入邮箱" />
      <input placeholder="请输入密码" type="password" />
      <button onClick={() => alert('登录成功')}>提交</button>
    </form>
  );
}

export function Login() {
  const { t } = useTranslation();
  return (
    <form>
      <h2>{t('auth.login.title')}</h2>
      <input placeholder={t('auth.login.placeholder.email')} />
      <input placeholder={t('auth.login.placeholder.password')} type="password" />
      <button onClick={() => alert(t('auth.login.success'))}>{t('common.button.submit')}</button>
    </form>
  );
}

// locales/zh-CN.json
{ "auth.login.title": "用户登录",
  "auth.login.placeholder.email": "请输入邮箱",
  "auth.login.placeholder.password": "请输入密码",
  "auth.login.success": "登录成功",
  "common.button.submit": "提交" }
// locales/en-US.json
{ "auth.login.title": "User Login",
  "auth.login.placeholder.email": "Enter your email",
  "auth.login.placeholder.password": "Enter your password",
  "auth.login.success": "Login successful",
  "common.button.submit": "Submit" }

flowchart TD
    A[会话启动] --> B[扫描 skills 目录]
    B --> C[只把 name+description 装进上下文<br/>正文暂不加载]
    C --> D{用户说话 / 输入斜杠命令}
    D -->|语义匹配 description| E[Claude 决定自动加载]
    D -->|/i18n-extract| F[手动加载]
    E --> G[注入一次 SKILL.md 正文]
    F --> G
    G --> H[先跑 !`...` 动态注入<br/>脚本扫描结果]
    H --> I[Claude 读 references/data 按需取用]
    I --> J[用 allowed-tools 免审批执行]
    J --> K[正文留在上下文<br/>后续轮次持续生效]
    K --> L{上下文压缩?}
    L -->|是| M[每个技能保留前 5000 token<br/>共享 25000 token 预算]
    L -->|否| K