Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
A direct command skips the review prompt. Inspect the source before running it.
Loaded automatically when its description matches the active task. Detect the framework first (Next.js vs Nuxt/Vue), then open the matching reference. Read only the section you need.
Use this skill when
Adding a second language to a Next.js or Nuxt app for the first time
Picking between next-intl, vue-i18n and @nuxtjs/i18n for a greenfield project
Wiring locale-prefixed routing (/en/..., /de/...) with hreflang and sitemap
Writing ICU-format messages with plurals, gender, dates, numbers, currency
Switching between Server Components and Client Components for translations in App Router
Lazy-loading locale messages to reduce bundle size
Building a locale switcher that preserves the current path and query
Integrating a translation management platform (Crowdin, Lokalise, Phrase, Tolgee)
Internationalization spans framework, routing, message format, build pipeline, SEO, and translator workflow. A framework-only skill misses the cross-cutting decisions: which library to pick, how to map ICU plurals to JSON, when to lazy-load messages, how to wire hreflang correctly. This skill is the single navigator for the i18n surface across our React/Next.js and Vue/Nuxt projects.
The two pinned libraries cover ~95% of our work: next-intl for Next.js App Router (Server Components first-class, ICU built-in, type-safe keys) and vue-i18n for Vue/Nuxt (Composition API, useI18n, Nuxt module). The remaining 5% (i18next, FormatJS, lingui) is referenced only when a project already uses them. Hands off to framework skills (nextjs, nuxt, react, vue) for non-i18n concerns.
Capabilities
Each capability below points to the canonical reference file. References own the code, edge cases, and gotchas — do not duplicate them here.
Library decision and framework routing
Map task → library: Next.js App Router → next-intl. Nuxt → @nuxtjs/i18n (wraps vue-i18n). Plain Vue SPA → vue-i18n directly. Decision table with tradeoffs and when to escape to i18next. → references/REFERENCE.md
next-intl integration (Next.js 16 App Router)
defineRouting + createMiddleware, [locale] segment, setRequestLocale for static rendering, getTranslations in async Server Components, useTranslations in Client Components, NextIntlClientProvider, localized Link/navigation, pathnames for translated URLs. → references/next-intl.md
vue-i18n integration (Vue 3.5 + Nuxt 4)
createI18n with Composition mode (default in v11+), useI18n composable, t/n/d for messages/numbers/dates, Composer instance, global vs local scope, SFC <i18n> blocks. Nuxt module @nuxtjs/i18n vs raw vue-i18n — when to use which. → references/vue-i18n.md
Translation file structure
JSON vs YAML, namespace organization (by feature vs by page), ICU message format (plural, select, ordinal), date/number/currency formatters, nested keys vs flat keys, type generation from message files. → references/translation-files.md
How to use: pick the framework (Next.js → next-intl.md, Nuxt/Vue → vue-i18n.md), then read cross-cutting files (translation-files.md, seo-and-routing.md) as needed.
