[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ESKG5XTXNPSYWBESQFNVFE":3,"skill-same:01M6ESKG5XTXNPSYWBESQFNVFE":86},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":40,"linkOnly":41,"markdownContent":42,"markdownBody":43,"frontMatter":44,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":6,"ownerDescription":54,"updatedAt":55,"install":56,"resources":69},"01M6ESKG5XTXNPSYWBESQFNVFE","i18n-automation",null,"Automate internationalization and localization workflows for web applications with translation, key generation, and library setup","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",66,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdnyoussef\u002Fi18n-automation\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39],"automation","i18n","i18n automation","web","workflows","react","setup","library","nextjs","applications","automate","translation","internationalization","generation","localization","with","2026-11-10 10:12:30",false,"---\nname: i18n-automation\ndescription: Automate internationalization and localization workflows for web applications with translation, key generation, and library setup\ntags: [i18n, translation, localization, automation, react, nextjs]\nversion: 1.0.0\n---\n\n# i18n Automation\n\n## Purpose\nAutomate complete internationalization workflows including translation, key-value generation, library installation, and locale configuration for web applications.\n\n## Specialist Agent\n\nI am an internationalization specialist with expertise in:\n- i18n library selection and configuration (react-i18n, next-intl, i18next)\n- Translation key architecture and organization\n- Locale file formats (JSON, YAML, PO, XLIFF)\n- RTL (Right-to-Left) language support\n- SEO and metadata localization\n- Dynamic content translation strategies\n\n### Methodology (Plan-and-Solve Pattern)\n\n1. **Analyze Project**: Detect framework, existing i18n setup, content to translate\n2. **Design i18n Architecture**: Choose library, key structure, file organization\n3. **Extract Content**: Identify all translatable strings and create keys\n4. **Generate Translations**: Create locale files with translations\n5. **Configure Integration**: Set up routing, language detection, switcher component\n6. **Validate**: Test all locales, check RTL, verify SEO metadata\n\n### Framework Support\n\n**Next.js (Recommended: next-intl)**:\n```javascript\n\u002F\u002F Installation\nnpm install next-intl\n\n\u002F\u002F Configuration: next.config.js\nconst createNextIntlPlugin = require('next-intl\u002Fplugin');\nconst withNextIntl = createNextIntlPlugin();\n\nmodule.exports = withNextIntl({\n  i18n: {\n    locales: ['en', 'ja', 'es', 'fr'],\n    defaultLocale: 'en'\n  }\n});\n\n\u002F\u002F File structure\n\u002Fmessages\n  \u002Fen.json\n  \u002Fja.json\n  \u002Fes.json\n  \u002Ffr.json\n```\n\n**React (Recommended: react-i18next)**:\n```javascript\n\u002F\u002F Installation\nnpm install react-i18next i18next\n\n\u002F\u002F Configuration: i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources: {\n      en: { translation: require('.\u002Flocales\u002Fen.json') },\n      ja: { translation: require('.\u002Flocales\u002Fja.json') }\n    },\n    lng: 'en',\n    fallbackLng: 'en',\n    interpolation: { escapeValue: false }\n  });\n```\n\n**Vue (Recommended: vue-i18n)**:\n```javascript\n\u002F\u002F Installation\nnpm install vue-i18n\n\n\u002F\u002F Configuration\nimport { createI18n } from 'vue-i18n';\n\nconst i18n = createI18n({\n  locale: 'en',\n  messages: {\n    en: require('.\u002Flocales\u002Fen.json'),\n    ja: require('.\u002Flocales\u002Fja.json')\n  }\n});\n```\n\n### Translation Key Architecture\n\n**Namespace Organization**:\n```json\n{\n  \"common\": {\n    \"buttons\": {\n      \"submit\": \"Submit\",\n      \"cancel\": \"Cancel\",\n      \"save\": \"Save\"\n    },\n    \"errors\": {\n      \"required\": \"This field is required\",\n      \"invalid_email\": \"Invalid email address\"\n    }\n  },\n  \"landing\": {\n    \"hero\": {\n      \"title\": \"Welcome to Our Product\",\n      \"subtitle\": \"The best solution for your needs\",\n      \"cta\": \"Get Started\"\n    },\n    \"features\": {\n      \"feature1_title\": \"Fast Performance\",\n      \"feature1_desc\": \"Lightning-fast response times\"\n    }\n  },\n  \"pricing\": {\n    \"tiers\": {\n      \"free\": \"Free\",\n      \"pro\": \"Pro\",\n      \"enterprise\": \"Enterprise\"\n    }\n  }\n}\n```\n\n**Flat vs Nested Keys**:\n```json\n\u002F\u002F Nested (Recommended for organization)\n{\n  \"user\": {\n    \"profile\": {\n      \"title\": \"Profile\",\n      \"edit\": \"Edit Profile\"\n    }\n  }\n}\n\n\u002F\u002F Flat (Simpler, some libraries prefer)\n{\n  \"user.profile.title\": \"Profile\",\n  \"user.profile.edit\": \"Edit Profile\"\n}\n```\n\n### Translation Strategies\n\n**Strategy 1: Professional Translation**\n- Extract keys to XLIFF or JSON\n- Send to translation service (Locize, Crowdin, Phrase)\n- Import translated files\n- High quality, costs money\n\n**Strategy 2: AI Translation (Good for MVP)**\n- Use Claude\u002FGPT to translate\n- Review by native speaker recommended\n- Fast and cost-effective\n- May miss cultural nuances\n\n**Strategy 3: Community Translation**\n- Open source projects\n- Contributor PRs with translations\n- Review process for quality\n- Builds community engagement\n\n**Strategy 4: Hybrid**\n- AI for initial translation\n- Professional review for key pages\n- Community contributions for edge cases\n- Best balance of speed\u002Fquality\u002Fcost\n\n### Language-Specific Considerations\n\n**Japanese (ja)**:\n```json\n{\n  \"formality\": {\n    \"casual\": \"ありがとう\",\n    \"polite\": \"ありがとうございます\",\n    \"honorific\": \"ありがとうございました\"\n  },\n  \"context_matters\": \"Japanese uses different words based on context\",\n  \"character_counts\": \"Japanese characters more information-dense than English\"\n}\n```\n\n**Spanish (es)**:\n```json\n{\n  \"variants\": {\n    \"es-ES\": \"Spain Spanish\",\n    \"es-MX\": \"Mexican Spanish\",\n    \"es-AR\": \"Argentine Spanish\"\n  },\n  \"formality\": {\n    \"informal_you\": \"tú\",\n    \"formal_you\": \"usted\"\n  }\n}\n```\n\n**Arabic (ar) - RTL**:\n```json\n{\n  \"direction\": \"rtl\",\n  \"text_align\": \"right\",\n  \"special_handling\": \"Needs RTL CSS and mirrored layouts\"\n}\n```\n\n**German (de)**:\n```json\n{\n  \"compound_words\": \"German combines words: Datenschutzerklärung\",\n  \"formal_vs_informal\": {\n    \"informal\": \"du\",\n    \"formal\": \"Sie\"\n  }\n}\n```\n\n### SEO and Metadata Localization\n\n**Next.js Metadata**:\n```typescript\n\u002F\u002F app\u002F[locale]\u002Flayout.tsx\nexport async function generateMetadata({ params: { locale } }) {\n  const t = await getTranslations({ locale, namespace: 'metadata' });\n\n  return {\n    title: t('title'),\n    description: t('description'),\n    keywords: t('keywords'),\n    openGraph: {\n      title: t('og_title'),\n      description: t('og_description'),\n      images: [t('og_image')]\n    },\n    alternates: {\n      canonical: `https:\u002F\u002Fexample.com\u002F${locale}`,\n      languages: {\n        'en': 'https:\u002F\u002Fexample.com\u002Fen',\n        'ja': 'https:\u002F\u002Fexample.com\u002Fja',\n        'es': 'https:\u002F\u002Fexample.com\u002Fes'\n      }\n    }\n  };\n}\n```\n\n**Sitemap Localization**:\n```xml\n\u003C!-- sitemap.xml -->\n\u003Curlset xmlns=\"http:\u002F\u002Fwww.sitemaps.org\u002Fschemas\u002Fsitemap\u002F0.9\"\n        xmlns:xhtml=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\">\n  \u003Curl>\n    \u003Cloc>https:\u002F\u002Fexample.com\u002Fen\u002F\u003C\u002Floc>\n    \u003Cxhtml:link rel=\"alternate\" hreflang=\"ja\" href=\"https:\u002F\u002Fexample.com\u002Fja\u002F\"\u002F>\n    \u003Cxhtml:link rel=\"alternate\" hreflang=\"es\" href=\"https:\u002F\u002Fexample.com\u002Fes\u002F\"\u002F>\n  \u003C\u002Furl>\n\u003C\u002Furlset>\n```\n\n### Language Switcher Component\n\n**Next.js Example**:\n```typescript\n\u002F\u002F components\u002FLanguageSwitcher.tsx\nimport { useLocale } from 'next-intl';\nimport { usePathname, useRouter } from 'next\u002Fnavigation';\n\nconst languages = {\n  en: { name: 'English', flag: '??' },\n  ja: { name: '日本語', flag: '??' },\n  es: { name: 'Español', flag: '??' },\n  fr: { name: 'Français', flag: '??' }\n};\n\nexport default function LanguageSwitcher() {\n  const locale = useLocale();\n  const router = useRouter();\n  const pathname = usePathname();\n\n  const switchLanguage = (newLocale: string) => {\n    const newPath = pathname.replace(`\u002F${locale}`, `\u002F${newLocale}`);\n    router.push(newPath);\n  };\n\n  return (\n    \u003Cselect value={locale} onChange={(e) => switchLanguage(e.target.value)}>\n      {Object.entries(languages).map(([code, { name, flag }]) => (\n        \u003Coption key={code} value={code}>\n          {flag} {name}\n        \u003C\u002Foption>\n      ))}\n    \u003C\u002Fselect>\n  );\n}\n```\n\n### RTL Support\n\n**CSS for RTL**:\n```css\n\u002F* Automatic RTL with logical properties *\u002F\n.container {\n  margin-inline-start: 1rem;  \u002F* Left in LTR, Right in RTL *\u002F\n  padding-inline-end: 2rem;   \u002F* Right in LTR, Left in RTL *\u002F\n}\n\n\u002F* Direction-specific overrides *\u002F\n[dir=\"rtl\"] .special-element {\n  transform: scaleX(-1);  \u002F* Mirror icons\u002Fimages *\u002F\n}\n```\n\n**Next.js RTL Detection**:\n```typescript\n\u002F\u002F middleware.ts\nimport { NextRequest, NextResponse } from 'next\u002Fserver';\n\nconst rtlLocales = ['ar', 'he', 'fa'];\n\nexport function middleware(request: NextRequest) {\n  const locale = request.nextUrl.pathname.split('\u002F')[1];\n  const response = NextResponse.next();\n\n  if (rtlLocales.includes(locale)) {\n    response.headers.set('dir', 'rtl');\n  }\n\n  return response;\n}\n```\n\n### Automation Workflow\n\n**Step 1: Extract Strings**\n```javascript\n\u002F\u002F Scan all components for hardcoded strings\n\u002F\u002F Generate translation keys automatically\n\u002F\u002F Create skeleton locale files\n```\n\n**Step 2: Generate Translations**\n```javascript\n\u002F\u002F For each target language:\n\u002F\u002F   - Translate using AI or service\n\u002F\u002F   - Preserve placeholders: {name}, {count}\n\u002F\u002F   - Handle pluralization rules\n\u002F\u002F   - Format dates\u002Fnumbers correctly\n```\n\n**Step 3: Install & Configure**\n```javascript\n\u002F\u002F Install i18n library\n\u002F\u002F Create configuration files\n\u002F\u002F Set up routing (if Next.js)\n\u002F\u002F Add language detection\n```\n\n**Step 4: Replace Strings**\n```javascript\n\u002F\u002F Replace hardcoded strings with t('key') calls\n\u002F\u002F Update components to use translations\n\u002F\u002F Add language switcher component\n```\n\n**Step 5: Validate**\n```javascript\n\u002F\u002F Test each locale\n\u002F\u002F Check RTL languages\n\u002F\u002F Verify SEO metadata\n\u002F\u002F Test language switching\n```\n\n## Input Contract\n\n```yaml\nproject_info:\n  framework: nextjs | react | vue | other\n  existing_i18n: boolean\n  pages_to_translate: array[string]\n\ntranslation_config:\n  target_languages: array[string]  # ['ja', 'es', 'fr']\n  translation_method: ai | professional | manual\n  include_metadata: boolean\n  include_errors: boolean\n\nrouting_strategy:\n  type: subdirectory | subdomain | query_param  # \u002Fja\u002F, ja.site.com, ?lang=ja\n  default_locale: string\n\nquality_requirements:\n  review_needed: boolean\n  formality_level: casual | polite | formal\n  cultural_adaptation: boolean\n```\n\n## Output Contract\n\n```yaml\ndeliverables:\n  installed_packages: array[string]\n  config_files: array[{path, content}]\n  locale_files: array[{language, path, content}]\n  components_modified: array[string]\n  new_components: array[{name, path, code}]\n\ntranslation_summary:\n  languages_added: array[string]\n  keys_created: number\n  strings_translated: number\n  rtl_support: boolean\n\nvalidation_report:\n  all_keys_present: boolean\n  no_missing_translations: boolean\n  seo_configured: boolean\n  switcher_working: boolean\n\ndocumentation:\n  usage_guide: markdown\n  adding_new_language: markdown\n  adding_new_keys: markdown\n```\n\n## Integration Points\n\n- **Cascades**: Integrates with landing page creation, feature development\n- **Commands**: `\u002Ftranslate-site`, `\u002Fadd-language`, `\u002Fi18n-setup`\n- **Other Skills**: Works with web-cli-teleport (good for Web), seo-optimization\n\n## Usage Examples\n\n**Complete Landing Page Translation**:\n```\nUse i18n-automation to translate the Next.js landing page to Japanese, Spanish, and French.\nInclude SEO metadata and create a language switcher in the header.\n```\n\n**Add New Language**:\n```\nAdd German (de) support to existing i18n setup. Use AI translation for initial version.\n```\n\n**Full i18n Setup**:\n```\nSet up complete internationalization for React app:\n- Install react-i18next\n- Support English, Japanese, Arabic (RTL)\n- Extract all strings from components\n- Generate translation keys\n- Create language switcher\n- Configure SEO metadata\n```\n\n## Best Practices\n\n**Key Naming**:\n1. Use descriptive, hierarchical keys: `landing.hero.title`\n2. Group by page\u002Fcomponent: `pricing.tier.pro.price`\n3. Separate common strings: `common.buttons.submit`\n4. Version keys if changing meaning: `welcome_v2`\n\n**File Organization**:\n1. One file per language: `en.json`, `ja.json`\n2. OR namespace split: `en\u002Fcommon.json`, `en\u002Flanding.json`\n3. Keep files in sync (same keys across languages)\n4. Use TypeScript for type safety\n\n**Translation Quality**:\n1. Preserve placeholders exactly: `{name}`, `{count}`\n2. Handle pluralization: `{count} item` vs `{count} items`\n3. Format dates\u002Fnumbers per locale\n4. Consider cultural context, not just literal translation\n\n**Performance**:\n1. Lazy-load translations per route\n2. Split large translation files by namespace\n3. Cache translations in production\n4. Use dynamic imports for rare languages\n\n## Failure Modes & Mitigations\n\n- **Missing translations**: Use fallback locale, log warnings\n- **RTL layout breaks**: Use logical CSS properties, test thoroughly\n- **SEO not working**: Verify alternate links, sitemap, hreflang tags\n- **Wrong formality level**: Document target audience, review by native speaker\n- **Placeholders broken**: Validate translation files, check for {variable} syntax\n\n## Validation Checklist\n\n- [ ] All target languages have complete locale files\n- [ ] No missing translation keys\n- [ ] Language switcher works on all pages\n- [ ] SEO metadata translated\n- [ ] RTL languages display correctly (if applicable)\n- [ ] Pluralization works correctly\n- [ ] Date\u002Fnumber formatting locale-aware\n- [ ] No hardcoded strings remain\n- [ ] Fallback locale configured\n- [ ] Documentation updated\n\n## Neural Training Integration\n\n```yaml\ntraining:\n  pattern: program-of-thought\n  feedback_collection: true\n  success_metrics:\n    - translation_accuracy\n    - user_engagement_by_locale\n    - seo_performance_by_language\n    - completeness_score\n```\n\n---\n\n**Quick Commands**:\n- Next.js: `npm install next-intl`\n- React: `npm install react-i18next i18next`\n- Vue: `npm install vue-i18n`\n\n**Pro Tips**:\n- Use Claude Code Web for translation tasks (well-defined, one-off)\n- AI translations good for MVP, professional for production\n- Test RTL languages early if supporting Arabic\u002FHebrew\n- Keep translation keys synchronized across all locales\n- Consider loading translations from CMS for non-developers to update\n","# i18n Automation\n\n## Purpose\nAutomate complete internationalization workflows including translation, key-value generation, library installation, and locale configuration for web applications.\n\n## Specialist Agent\n\nI am an internationalization specialist with expertise in:\n- i18n library selection and configuration (react-i18n, next-intl, i18next)\n- Translation key architecture and organization\n- Locale file formats (JSON, YAML, PO, XLIFF)\n- RTL (Right-to-Left) language support\n- SEO and metadata localization\n- Dynamic content translation strategies\n\n### Methodology (Plan-and-Solve Pattern)\n\n1. **Analyze Project**: Detect framework, existing i18n setup, content to translate\n2. **Design i18n Architecture**: Choose library, key structure, file organization\n3. **Extract Content**: Identify all translatable strings and create keys\n4. **Generate Translations**: Create locale files with translations\n5. **Configure Integration**: Set up routing, language detection, switcher component\n6. **Validate**: Test all locales, check RTL, verify SEO metadata\n\n### Framework Support\n\n**Next.js (Recommended: next-intl)**:\n```javascript\n\u002F\u002F Installation\nnpm install next-intl\n\n\u002F\u002F Configuration: next.config.js\nconst createNextIntlPlugin = require('next-intl\u002Fplugin');\nconst withNextIntl = createNextIntlPlugin();\n\nmodule.exports = withNextIntl({\n  i18n: {\n    locales: ['en', 'ja', 'es', 'fr'],\n    defaultLocale: 'en'\n  }\n});\n\n\u002F\u002F File structure\n\u002Fmessages\n  \u002Fen.json\n  \u002Fja.json\n  \u002Fes.json\n  \u002Ffr.json\n```\n\n**React (Recommended: react-i18next)**:\n```javascript\n\u002F\u002F Installation\nnpm install react-i18next i18next\n\n\u002F\u002F Configuration: i18n.js\nimport i18n from 'i18next';\nimport { initReactI18next } from 'react-i18next';\n\ni18n\n  .use(initReactI18next)\n  .init({\n    resources: {\n      en: { translation: require('.\u002Flocales\u002Fen.json') },\n      ja: { translation: require('.\u002Flocales\u002Fja.json') }\n    },\n    lng: 'en',\n    fallbackLng: 'en',\n    interpolation: { escapeValue: false }\n  });\n```\n\n**Vue (Recommended: vue-i18n)**:\n```javascript\n\u002F\u002F Installation\nnpm install vue-i18n\n\n\u002F\u002F Configuration\nimport { createI18n } from 'vue-i18n';\n\nconst i18n = createI18n({\n  locale: 'en',\n  messages: {\n    en: require('.\u002Flocales\u002Fen.json'),\n    ja: require('.\u002Flocales\u002Fja.json')\n  }\n});\n```\n\n### Translation Key Architecture\n\n**Namespace Organization**:\n```json\n{\n  \"common\": {\n    \"buttons\": {\n      \"submit\": \"Submit\",\n      \"cancel\": \"Cancel\",\n      \"save\": \"Save\"\n    },\n    \"errors\": {\n      \"required\": \"This field is required\",\n      \"invalid_email\": \"Invalid email address\"\n    }\n  },\n  \"landing\": {\n    \"hero\": {\n      \"title\": \"Welcome to Our Product\",\n      \"subtitle\": \"The best solution for your needs\",\n      \"cta\": \"Get Started\"\n    },\n    \"features\": {\n      \"feature1_title\": \"Fast Performance\",\n      \"feature1_desc\": \"Lightning-fast response times\"\n    }\n  },\n  \"pricing\": {\n    \"tiers\": {\n      \"free\": \"Free\",\n      \"pro\": \"Pro\",\n      \"enterprise\": \"Enterprise\"\n    }\n  }\n}\n```\n\n**Flat vs Nested Keys**:\n```json\n\u002F\u002F Nested (Recommended for organization)\n{\n  \"user\": {\n    \"profile\": {\n      \"title\": \"Profile\",\n      \"edit\": \"Edit Profile\"\n    }\n  }\n}\n\n\u002F\u002F Flat (Simpler, some libraries prefer)\n{\n  \"user.profile.title\": \"Profile\",\n  \"user.profile.edit\": \"Edit Profile\"\n}\n```\n\n### Translation Strategies\n\n**Strategy 1: Professional Translation**\n- Extract keys to XLIFF or JSON\n- Send to translation service (Locize, Crowdin, Phrase)\n- Import translated files\n- High quality, costs money\n\n**Strategy 2: AI Translation (Good for MVP)**\n- Use Claude\u002FGPT to translate\n- Review by native speaker recommended\n- Fast and cost-effective\n- May miss cultural nuances\n\n**Strategy 3: Community Translation**\n- Open source projects\n- Contributor PRs with translations\n- Review process for quality\n- Builds community engagement\n\n**Strategy 4: Hybrid**\n- AI for initial translation\n- Professional review for key pages\n- Community contributions for edge cases\n- Best balance of speed\u002Fquality\u002Fcost\n\n### Language-Specific Considerations\n\n**Japanese (ja)**:\n```json\n{\n  \"formality\": {\n    \"casual\": \"ありがとう\",\n    \"polite\": \"ありがとうございます\",\n    \"honorific\": \"ありがとうございました\"\n  },\n  \"context_matters\": \"Japanese uses different words based on context\",\n  \"character_counts\": \"Japanese characters more information-dense than English\"\n}\n```\n\n**Spanish (es)**:\n```json\n{\n  \"variants\": {\n    \"es-ES\": \"Spain Spanish\",\n    \"es-MX\": \"Mexican Spanish\",\n    \"es-AR\": \"Argentine Spanish\"\n  },\n  \"formality\": {\n    \"informal_you\": \"tú\",\n    \"formal_you\": \"usted\"\n  }\n}\n```\n\n**Arabic (ar) - RTL**:\n```json\n{\n  \"direction\": \"rtl\",\n  \"text_align\": \"right\",\n  \"special_handling\": \"Needs RTL CSS and mirrored layouts\"\n}\n```\n\n**German (de)**:\n```json\n{\n  \"compound_words\": \"German combines words: Datenschutzerklärung\",\n  \"formal_vs_informal\": {\n    \"informal\": \"du\",\n    \"formal\": \"Sie\"\n  }\n}\n```\n\n### SEO and Metadata Localization\n\n**Next.js Metadata**:\n```typescript\n\u002F\u002F app\u002F[locale]\u002Flayout.tsx\nexport async function generateMetadata({ params: { locale } }) {\n  const t = await getTranslations({ locale, namespace: 'metadata' });\n\n  return {\n    title: t('title'),\n    description: t('description'),\n    keywords: t('keywords'),\n    openGraph: {\n      title: t('og_title'),\n      description: t('og_description'),\n      images: [t('og_image')]\n    },\n    alternates: {\n      canonical: `https:\u002F\u002Fexample.com\u002F${locale}`,\n      languages: {\n        'en': 'https:\u002F\u002Fexample.com\u002Fen',\n        'ja': 'https:\u002F\u002Fexample.com\u002Fja',\n        'es': 'https:\u002F\u002Fexample.com\u002Fes'\n      }\n    }\n  };\n}\n```\n\n**Sitemap Localization**:\n```xml\n\u003C!-- sitemap.xml -->\n\u003Curlset xmlns=\"http:\u002F\u002Fwww.sitemaps.org\u002Fschemas\u002Fsitemap\u002F0.9\"\n        xmlns:xhtml=\"http:\u002F\u002Fwww.w3.org\u002F1999\u002Fxhtml\">\n  \u003Curl>\n    \u003Cloc>https:\u002F\u002Fexample.com\u002Fen\u002F\u003C\u002Floc>\n    \u003Cxhtml:link rel=\"alternate\" hreflang=\"ja\" href=\"https:\u002F\u002Fexample.com\u002Fja\u002F\"\u002F>\n    \u003Cxhtml:link rel=\"alternate\" hreflang=\"es\" href=\"https:\u002F\u002Fexample.com\u002Fes\u002F\"\u002F>\n  \u003C\u002Furl>\n\u003C\u002Furlset>\n```\n\n### Language Switcher Component\n\n**Next.js Example**:\n```typescript\n\u002F\u002F components\u002FLanguageSwitcher.tsx\nimport { useLocale } from 'next-intl';\nimport { usePathname, useRouter } from 'next\u002Fnavigation';\n\nconst languages = {\n  en: { name: 'English', flag: '??' },\n  ja: { name: '日本語', flag: '??' },\n  es: { name: 'Español', flag: '??' },\n  fr: { name: 'Français', flag: '??' }\n};\n\nexport default function LanguageSwitcher() {\n  const locale = useLocale();\n  const router = useRouter();\n  const pathname = usePathname();\n\n  const switchLanguage = (newLocale: string) => {\n    const newPath = pathname.replace(`\u002F${locale}`, `\u002F${newLocale}`);\n    router.push(newPath);\n  };\n\n  return (\n    \u003Cselect value={locale} onChange={(e) => switchLanguage(e.target.value)}>\n      {Object.entries(languages).map(([code, { name, flag }]) => (\n        \u003Coption key={code} value={code}>\n          {flag} {name}\n        \u003C\u002Foption>\n      ))}\n    \u003C\u002Fselect>\n  );\n}\n```\n\n### RTL Support\n\n**CSS for RTL**:\n```css\n\u002F* Automatic RTL with logical properties *\u002F\n.container {\n  margin-inline-start: 1rem;  \u002F* Left in LTR, Right in RTL *\u002F\n  padding-inline-end: 2rem;   \u002F* Right in LTR, Left in RTL *\u002F\n}\n\n\u002F* Direction-specific overrides *\u002F\n[dir=\"rtl\"] .special-element {\n  transform: scaleX(-1);  \u002F* Mirror icons\u002Fimages *\u002F\n}\n```\n\n**Next.js RTL Detection**:\n```typescript\n\u002F\u002F middleware.ts\nimport { NextRequest, NextResponse } from 'next\u002Fserver';\n\nconst rtlLocales = ['ar', 'he', 'fa'];\n\nexport function middleware(request: NextRequest) {\n  const locale = request.nextUrl.pathname.split('\u002F')[1];\n  const response = NextResponse.next();\n\n  if (rtlLocales.includes(locale)) {\n    response.headers.set('dir', 'rtl');\n  }\n\n  return response;\n}\n```\n\n### Automation Workflow\n\n**Step 1: Extract Strings**\n```javascript\n\u002F\u002F Scan all components for hardcoded strings\n\u002F\u002F Generate translation keys automatically\n\u002F\u002F Create skeleton locale files\n```\n\n**Step 2: Generate Translations**\n```javascript\n\u002F\u002F For each target language:\n\u002F\u002F   - Translate using AI or service\n\u002F\u002F   - Preserve placeholders: {name}, {count}\n\u002F\u002F   - Handle pluralization rules\n\u002F\u002F   - Format dates\u002Fnumbers correctly\n```\n\n**Step 3: Install & Configure**\n```javascript\n\u002F\u002F Install i18n library\n\u002F\u002F Create configuration files\n\u002F\u002F Set up routing (if Next.js)\n\u002F\u002F Add language detection\n```\n\n**Step 4: Replace Strings**\n```javascript\n\u002F\u002F Replace hardcoded strings with t('key') calls\n\u002F\u002F Update components to use translations\n\u002F\u002F Add language switcher component\n```\n\n**Step 5: Validate**\n```javascript\n\u002F\u002F Test each locale\n\u002F\u002F Check RTL languages\n\u002F\u002F Verify SEO metadata\n\u002F\u002F Test language switching\n```\n\n## Input Contract\n\n```yaml\nproject_info:\n  framework: nextjs | react | vue | other\n  existing_i18n: boolean\n  pages_to_translate: array[string]\n\ntranslation_config:\n  target_languages: array[string]  # ['ja', 'es', 'fr']\n  translation_method: ai | professional | manual\n  include_metadata: boolean\n  include_errors: boolean\n\nrouting_strategy:\n  type: subdirectory | subdomain | query_param  # \u002Fja\u002F, ja.site.com, ?lang=ja\n  default_locale: string\n\nquality_requirements:\n  review_needed: boolean\n  formality_level: casual | polite | formal\n  cultural_adaptation: boolean\n```\n\n## Output Contract\n\n```yaml\ndeliverables:\n  installed_packages: array[string]\n  config_files: array[{path, content}]\n  locale_files: array[{language, path, content}]\n  components_modified: array[string]\n  new_components: array[{name, path, code}]\n\ntranslation_summary:\n  languages_added: array[string]\n  keys_created: number\n  strings_translated: number\n  rtl_support: boolean\n\nvalidation_report:\n  all_keys_present: boolean\n  no_missing_translations: boolean\n  seo_configured: boolean\n  switcher_working: boolean\n\ndocumentation:\n  usage_guide: markdown\n  adding_new_language: markdown\n  adding_new_keys: markdown\n```\n\n## Integration Points\n\n- **Cascades**: Integrates with landing page creation, feature development\n- **Commands**: `\u002Ftranslate-site`, `\u002Fadd-language`, `\u002Fi18n-setup`\n- **Other Skills**: Works with web-cli-teleport (good for Web), seo-optimization\n\n## Usage Examples\n\n**Complete Landing Page Translation**:\n```\nUse i18n-automation to translate the Next.js landing page to Japanese, Spanish, and French.\nInclude SEO metadata and create a language switcher in the header.\n```\n\n**Add New Language**:\n```\nAdd German (de) support to existing i18n setup. Use AI translation for initial version.\n```\n\n**Full i18n Setup**:\n```\nSet up complete internationalization for React app:\n- Install react-i18next\n- Support English, Japanese, Arabic (RTL)\n- Extract all strings from components\n- Generate translation keys\n- Create language switcher\n- Configure SEO metadata\n```\n\n## Best Practices\n\n**Key Naming**:\n1. Use descriptive, hierarchical keys: `landing.hero.title`\n2. Group by page\u002Fcomponent: `pricing.tier.pro.price`\n3. Separate common strings: `common.buttons.submit`\n4. Version keys if changing meaning: `welcome_v2`\n\n**File Organization**:\n1. One file per language: `en.json`, `ja.json`\n2. OR namespace split: `en\u002Fcommon.json`, `en\u002Flanding.json`\n3. Keep files in sync (same keys across languages)\n4. Use TypeScript for type safety\n\n**Translation Quality**:\n1. Preserve placeholders exactly: `{name}`, `{count}`\n2. Handle pluralization: `{count} item` vs `{count} items`\n3. Format dates\u002Fnumbers per locale\n4. Consider cultural context, not just literal translation\n\n**Performance**:\n1. Lazy-load translations per route\n2. Split large translation files by namespace\n3. Cache translations in production\n4. Use dynamic imports for rare languages\n\n## Failure Modes & Mitigations\n\n- **Missing translations**: Use fallback locale, log warnings\n- **RTL layout breaks**: Use logical CSS properties, test thoroughly\n- **SEO not working**: Verify alternate links, sitemap, hreflang tags\n- **Wrong formality level**: Document target audience, review by native speaker\n- **Placeholders broken**: Validate translation files, check for {variable} syntax\n\n## Validation Checklist\n\n- [ ] All target languages have complete locale files\n- [ ] No missing translation keys\n- [ ] Language switcher works on all pages\n- [ ] SEO metadata translated\n- [ ] RTL languages display correctly (if applicable)\n- [ ] Pluralization works correctly\n- [ ] Date\u002Fnumber formatting locale-aware\n- [ ] No hardcoded strings remain\n- [ ] Fallback locale configured\n- [ ] Documentation updated\n\n## Neural Training Integration\n\n```yaml\ntraining:\n  pattern: program-of-thought\n  feedback_collection: true\n  success_metrics:\n    - translation_accuracy\n    - user_engagement_by_locale\n    - seo_performance_by_language\n    - completeness_score\n```\n\n---\n\n**Quick Commands**:\n- Next.js: `npm install next-intl`\n- React: `npm install react-i18next i18next`\n- Vue: `npm install vue-i18n`\n\n**Pro Tips**:\n- Use Claude Code Web for translation tasks (well-defined, one-off)\n- AI translations good for MVP, professional for production\n- Test RTL languages early if supporting Arabic\u002FHebrew\n- Keep translation keys synchronized across all locales\n- Consider loading translations from CMS for non-developers to update\n",{"name":5,"tags":45,"version":46,"description":7},[25,35,38,24,29,32],"1.0.0","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Faiskillstore\u002Fmarketplace\u002Fdnyoussef\u002Fi18n-automation",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill i18n-automation",{"tool":62,"command":63},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill i18n-automation",{"tool":65,"command":66},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill i18n-automation","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdnyoussef\u002Fi18n-automation\u002FSKILL.md",true,[70,76,82],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"agents\u002Fopenai.yaml","REFERENCE","参考文档",229,"https:\u002F\u002Fgithub.com\u002Flinora-u\u002FAgentLoom\u002Fblob\u002Fmain\u002Fapplications\u002Fbrowser_harness_probe\u002Fskills\u002Fbrowser-harness-agentloom\u002Fagents\u002Fopenai.yaml",{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"i18n-automation-process.dot","OTHER","其他",7696,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdnyoussef\u002Fi18n-automation\u002Fi18n-automation-process.dot",{"path":83,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":84,"sourceHtmlUrl":85},"skill-report.json",18994,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Faiskillstore\u002Fmarketplace\u002Fdnyoussef\u002Fi18n-automation\u002Fskill-report.json",[87,97,107,116,122,129],{"skillNo":88,"name":89,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":90,"categories":91,"keywords":93,"publishedAt":40},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[92],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[94,95,96],"model","model hierarchy","model hierarchy skill",{"skillNo":98,"name":99,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":100,"categories":101,"keywords":103,"publishedAt":40},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[102],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[104,105,106],"MCP","zoom","zoom mcp",{"skillNo":108,"name":109,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":40},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[113,114,115,105],"sdk","zoom apps sdk","apps",{"skillNo":117,"name":118,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":119,"categories":120,"keywords":121,"publishedAt":40},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[118],{"skillNo":123,"name":124,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":128,"publishedAt":40},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[127],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[124],{"skillNo":130,"name":131,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":40},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[131]]