medy-gribkovmedy-gribkov/arcana/skills/i18n-localization/SKILL.md

i18n-localization

Skill1 starsChanged 8 months agoApache-2.0View on GitHub

Internationalize and localize web applications with next-intl, react-intl, ICU MessageFormat, RTL layouts, locale routing, and dynamic locale loading. Use when adding translations or a new language, writing plural or select messages, supporting Hebrew or Arabic RTL, formatting dates, numbers, or currency per locale, or when the user mentions i18n, l10n, next-intl, or locale files.

We split this skill into the rules it gives an agent

6 rules. 0 are common, 2 are distinctive, and 4 are very specific to this project.

0
Common
Most of the 14 edited versions we read keep these.
2
Distinctive
This author's own choices. Worth a look.
4
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Distinctive:
Read the file that matches the task before writing code.
line 19
Very specific:
No user-visible string in code: Every label, error, placeholder, aria-label, and page title comes from a message file.
line 23
Very specific:
One message per sentence: Never concatenate fragments or build plurals with a ternary.
line 24
Very specific:
Logical CSS only: Use margin-inline-start, text-align: start, and Tailwind ms-*/pe-*.
line 27
Distinctive:
Load only the active locale: No static imports of every message file.
line 30
Very specific:
Use createNavigation(routing) wrappers (Link, useRouter, usePathname) so links keep the locale.
line 94

“Common” is measured: kept by at least 6 in 10 of the 14 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

i18n-localization

Internationalization (i18n) and localization (l10n) for web applications. Implements proper message formatting, locale routing, RTL support, and dynamic translation loading.

Where to look

Task	Read
next-intl routing, proxy.ts, layouts, locale switcher, loading messages, typed keys	references/next-intl-setup.md
ICU plural and select, rich text, dates, numbers, currency	references/icu-and-formatting.md
Hebrew, Arabic, or other RTL layouts, logical CSS, Tailwind	references/rtl-layout.md

Read the file that matches the task before writing code. The core rules below always apply.

Core rules

No user-visible string in code. Every label, error, placeholder, aria-label, and page title comes from a message file.
One message per sentence. Never concatenate fragments or build plurals with a ternary. Use ICU plural and select.
Always include the other branch in plural and select messages.
Format with Intl. Dates, numbers, currency, lists, and relative times go through Intl or the library formatter, never toFixed or a hardcoded pattern.
Logical CSS only. Use margin-inline-start, text-align: start, and Tailwind ms-*/pe-*. Never left or right for layout.
Set lang and dir on <html> from the active locale. Cover he, ar, fa, and ur as RTL.
Validate the locale at the boundary (route segment, cookie, header) against the configured list. Unknown locale means 404 or the default, never a thrown import error.
Load only the active locale. No static imports of every message file.
Keep locale files in sync. Same keys and same ICU placeholders in every language. Fail CI when they drift.
Do not translate by machine and ship unreviewed. Mark machine drafts and have a native speaker review user-facing copy.

Translation file structure

BAD: flat keys, mixed namespaces, layout in the name

{
  "welcomeMessage": "Welcome",
  "homePageTitle": "Home",
  "userProfileName": "Name",
  "checkoutButtonSubmit": "Submit Order"
}

GOOD: namespaced by feature, nested by meaning

// messages/en/common.json
{ "welcome": "Welcome", "loading": "Loading...", "error": "An error occurred" }

// messages/en/home.json
{ "title": "Home", "hero": { "heading": "Welcome to our platform", "subheading": "Build amazing things" } }

// messages/en/user.json
{ "profile": { "name": "Name", "email": "Email", "updatedAt": "Last updated {date}" } }

Name keys for what the text means (checkout.submit), not where it sits or what it says. Keep the source-language file as the reference and the type source.

Plurals in one line

BAD

const message = count === 1 ? `You have ${count} message` : `You have ${count} messages`;

GOOD

{ "count": "{count, plural, =0 {No messages} one {# message} other {# messages}}" }

More ICU, rich text, and Intl formatting in references/icu-and-formatting.md.

Logical CSS in one line

BAD

.sidebar { float: left; margin-right: 20px; text-align: left; }

GOOD

.sidebar { float: inline-start; margin-inline-end: 20px; text-align: start; }

Direction handling, icon mirroring, and mixed LTR/RTL text in references/rtl-layout.md.

Next.js 16 with next-intl in one screen

defineRouting({ locales, defaultLocale }) in src/i18n/routing.ts is the single source of locales.
src/proxy.ts runs createMiddleware(routing). Before Next.js 16 the file is middleware.ts.
src/i18n/request.ts uses getRequestConfig and validates the locale with hasLocale.
app/[locale]/layout.tsx awaits params (a Promise in Next.js 15 and 16), calls notFound() for bad locales, calls setRequestLocale(locale), and sets lang and dir.
Use createNavigation(routing) wrappers (Link, useRouter, usePathname) so links keep the locale.
Type message keys by augmenting AppConfig in next-intl.

Full code in references/next-intl-setup.md.

Review checklist

No hardcoded visible strings, including alt, title, placeholder, and aria-label
Plurals and selects use ICU with other
Dates, numbers, and currency use Intl with an explicit time zone on the server
No left, right, ml-*, mr-*, text-left in layout code
lang and dir set from the locale; Hebrew and Arabic both covered
hreflang alternates and a locale-aware sitemap for public pages
Every locale has the same keys as the source file
Locale switcher shows each language in its own name and sets lang on options

Download now (ZIP)

Other versions15 projects use a version of this.
Word for word · 0
None found.
Edited · 0
None found.
Wrote their own version · 15
rikkahub/rikkahub★ 8.6ksame name
vudovn/ag-kit★ 8.2ksame name
vudovn/antigravity-kit★ 8.2ksame name
xenitV1/Antigravity-Workflows★ 130same name
travisjneuman/.claude★ 106same name
VoDaiLocz/kilo-kit-mcp★ 28same name
felvieira/claude-skills-fv★ 27same name
iuliandita/skills★ 10same name
xfstudio/skills★ 9same name
SKB3002/agenthub★ 4same name
5 more not listed
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use intelligent-routing, nextjs-react-expert and 4 more.
Other files people use alongside this one.
- SKB3002Skill
  intelligent-routing
  Automatic agent selection and intelligent task routing. Analyzes user requests and automatically selects the best specialist agent(s) without requiring explicit user mentions.
  Also in 5 projects that use this
- SKB3002Skill
  nextjs-react-expert
  React and Next.js performance optimization from Vercel Engineering. Use when building React components, optimizing performance, eliminating waterfalls, reducing bundle size, reviewing code for performance issues, or implementing server/client-side optimizations.
  Also in 3 projects that use this
- xfstudioSkill
  rust-pro
  Master Rust 1.75+ with modern async patterns, advanced type system
  Also in 5 projects that use this
- jornalistainclusivoSkill
  design-spec
  How to author a DESIGN.md file — the machine-readable design-token + human-rationale format that must exist before any UI is built. YAML front-matter token schema (colors, typography, spacing, rounded, components), type system, token references, and canonical section order.
  Also in 3 projects that use this
- zzfancitizenSkill
  verify-changes
  Verify code changes do not break the project by running tests, linter checks, and import validation. Use after making any code changes, editing Python files, modifying imports, updating dependencies, or refactoring.
  Also in 3 projects that use this
- VercelSkill
  web-design-guidelines
  Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
  Also in 5 projects that use this
In this repository21 other files it gives its agents.
- accessibility-wcagSkill
- api-designSkill
- bugbounty-reportSkill
- ci-cd-pipelinesSkill
- codebase-analysisSkill
- database-designSkill
- design-docSkill
- docker-kubernetesSkill
- git-workflowSkill
- go-devSkill
- llm-integrationSkill
- nextjs-16Skill
- oauth-authSkill
- performance-optimizationSkill
- python-best-practicesSkill
- scraping-automationSkill
- security-reviewSkill
- seo-metaSkill
- tailwind-cssSkill
- testingSkill
- ts-devSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

It worked
Partly
It didn't

What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free

6 rules. 0 are common, 2 are distinctive, and 4 are very specific to this project.

i18n-localization

Where to look

Core rules

Translation file structure

Plurals in one line

Logical CSS in one line

Next.js 16 with next-intl in one screen

Review checklist

Word for word · 0

Edited · 0

Wrote their own version · 15

intelligent-routing

nextjs-react-expert

rust-pro

design-spec

verify-changes

web-design-guidelines

Does it work?

No reviews yet

Your trail

Now do this for your own.