Internationalization Agent Skill
next-intl and react-i18next patterns, locale routing, message extraction, pluralization, RTL, and Intl API formatting.
The Skill
Full content, every format. Copy it, download it, or install with one command.
---
description: next-intl and react-i18next patterns, locale routing, message extraction, pluralization, RTL, and Intl API formatting.
homepage: https://yepapi.com/skills/i18n
metadata:
tags: [i18n, localization, next-intl, react-i18next]
---
# i18n
## Rules
- Next.js App Router: use `next-intl` — `useTranslations()` hook, `NextIntlClientProvider`, middleware for locale detection
- React SPA: use `react-i18next` — `useTranslation()` hook, `i18n.init()` with `i18next-http-backend` for lazy loading
- Locale-aware routing: `/en/about`, `/fr/about` — use middleware to detect `Accept-Language` header and redirect
- Translation files: JSON per locale per namespace — `messages/en/common.json`, `messages/fr/common.json`
- Namespace splitting: one namespace per feature/page — `auth.json`, `dashboard.json`, `settings.json` — load only what the page needs
- Pluralization: use ICU message format — `{count, plural, one {# item} other {# items}}`
- Interpolation: `t('greeting', { name })` — never concatenate translated strings
- Date/number/currency: use `Intl.DateTimeFormat`, `Intl.NumberFormat` — never hardcode formats
- RTL support: use `dir="rtl"` on `<html>`, CSS logical properties (`margin-inline-start` not `margin-left`), test with Arabic/Hebrew
## Patterns
\`\`\`tsx
// next-intl: middleware.ts
import createMiddleware from "next-intl/middleware";
export default createMiddleware({
locales: ["en", "fr", "de", "ar"],
defaultLocale: "en",
});
// next-intl: component usage
import { useTranslations } from "next-intl";
function ProductCard({ price, date }: { price: number; date: Date }) {
const t = useTranslations("products");
const format = useFormatter();
return (
<div>
<h2>{t("title")}</h2>
<p>{format.number(price, { style: "currency", currency: "USD" })}</p>
<p>{format.dateTime(date, { dateStyle: "medium" })}</p>
</div>
);
}
\`\`\`
## Avoid
- Hardcoding user-facing strings — every string must go through `t()`
- String concatenation for translated text — use interpolation or ICU format
- Loading all locales upfront — lazy-load per locale and namespace
- CSS `left`/`right` for layout — use logical properties for RTL compatibility
- Storing locale in localStorage only — use URL-based locale for SEO and shareabilityInstall
Why Use the Internationalization Skill?
Without this skill, your AI guesses at internationalization patterns. It might hallucinate deprecated APIs, use outdated conventions, or miss best practices entirely. With it, your AI follows a proven ruleset — every suggestion aligns with current standards.
Drop this skill into your project and your AI instantly knows the rules. Better code suggestions, fewer errors, faster shipping.
Try These Prompts
These prompts work better with the Internationalization skill installed. Your AI knows the context and writes code that fits.
"Set up next-intl with locale routing, middleware, and translation files"
"Add pluralization and date/number formatting with ICU message format"
"Configure RTL support with CSS logical properties for Arabic and Hebrew"
Works Great With
Internationalization skill — FAQ
It provides rules for next-intl and react-i18next, locale-aware routing, namespace splitting, ICU pluralization, Intl API formatting for dates/numbers/currency, and RTL support with CSS logical properties.
Run `npx skills add YepAPI/skills --skill i18n` in your project root. This copies the skill file into your repo where your AI coding tool can read it automatically.
Use next-intl for Next.js App Router projects — it integrates with server components and middleware for locale detection. Use react-i18next for React SPAs or non-Next.js projects.