Extract hardcoded strings and set up internationalization with locale-aware formatting
Scanned 9/3/2026
Install to Claude Code
Skills Directorynpx -y skills add black141312/ada --skill i18n --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of I18n?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/black141312-i18n)More formats (shields.io, HTML) on the badges page.
---
name: i18n
description: Extract hardcoded strings and set up internationalization with locale-aware formatting
category: frontend
---
# I18n
Use when preparing an app for multiple languages: pulling hardcoded copy into message catalogs and wiring up locale switching and formatting.
1. Pick or confirm the i18n library that fits the framework (e.g. i18next, react-intl, next-intl, vue-i18n) and set a default locale plus a fallback.
2. Sweep the UI for user-facing strings and replace each with a translation call keyed by a stable, namespaced id (e.g. `cart.checkout.button`), not the English text.
3. Externalize all strings into per-locale catalog files; seed the default locale and leave other locales as keys to be translated.
4. Handle plurals, gender, and variables through the library's interpolation/ICU features — never build sentences by string concatenation.
5. Use locale-aware formatting (`Intl.NumberFormat`, `Intl.DateTimeFormat`, currency, relative time) for all numbers, dates, and money instead of manual formatting.
6. Wire a locale provider/switcher, persist the choice, set `<html lang>`/`dir` (including RTL), and lazy-load the active locale's catalog.
## Rules
- Never concatenate translated fragments; pass variables into a single parameterized message.
- Use stable semantic keys, not English copy, as ids so wording changes don't break lookups.
- Keep pluralization in the catalog (ICU/plural rules), not in component conditionals.
- Format every date, number, and currency via `Intl`/the i18n layer, never hand-rolled.
- Support RTL: set `dir`, avoid left/right-only CSS, and prefer logical properties (`margin-inline-start`).
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!
