Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
sickn33 avatar

I18n Localization

  • 2.4k installs
  • 44k repo stars
  • Updated July 27, 2026
  • sickn33/antigravity-awesome-skills

i18n-localization covers translation key patterns, locale files, RTL support, and hardcoded string checking for web apps.

About

i18n-localization teaches internationalization and localization patterns for making apps translatable across locales. Core concepts distinguish i18n as translatable structure from L10n as actual translations, with locale codes like en-US and RTL languages such as Arabic and Hebrew. Implementation patterns cover react-i18next useTranslation hooks, next-intl useTranslations, and Python gettext wrappers. File structure namespaces translations per feature under locales/en, locales/tr, and locales/ar directories. Best practices mandate translation keys over raw text, feature namespaces, pluralization, Intl date and number formatting, RTL planning from the start, and ICU message format for complex strings. Anti-patterns warn against hardcoded strings, concatenating translations, assuming text length, and mixing languages per file. RTL support uses CSS logical properties like margin-inline-start instead of margin-left. A bundled i18n_checker.py script detects hardcoded strings and missing translations. The pre-ship checklist verifies keys, locale files, Intl formatting, RTL tests, and fallback language configuration.

  • i18n versus L10n concepts with locale and RTL terminology.
  • React react-i18next, Next.js next-intl, and Python gettext patterns.
  • Locale file structure with per-feature JSON namespaces.
  • RTL CSS logical properties and dir rtl layout guidance.
  • i18n_checker.py script for hardcoded string detection.

I18n Localization by the numbers

  • 2,432 all-time installs (skills.sh)
  • +49 installs in the week ending Jul 28, 2026 (Skillselion tracking)
  • Ranked #200 of 2,277 Frontend Development skills by installs in the Skillselion catalog
  • Security screen: LOW risk (skills.sh audit)
  • Data as of Jul 28, 2026 (Skillselion catalog sync)
At a glance

i18n-localization capabilities & compatibility

Capabilities
translation key and namespace organization · react and next.js i18n library integration patte · python gettext usage examples · rtl css logical property guidance · hardcoded string detection via i18n_checker.py
Use cases
frontend · translation
Platforms
macOS · Linux · Windows
Runs
Runs locally
Pricing
Free
From the docs

What i18n-localization says it does

Use translation keys, not raw text
SKILL.md
margin-inline-start: 1rem; /* Not margin-left */
SKILL.md
python scripts/i18n_checker.py <project_path>
SKILL.md
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill i18n-localization

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs2.4k
repo stars44k
Security audit3 / 3 scanners passed
Last updatedJuly 27, 2026
Repositorysickn33/antigravity-awesome-skills

How do I structure an app for multiple languages with RTL support and no hardcoded UI strings?

Implement internationalization with translation keys, locale files, RTL support, and hardcoded string detection.

Who is it for?

Teams adding multi-language support to public web apps or SaaS products.

Skip if: Skip for single-language internal tools where translation is explicitly out of scope.

When should I use this skill?

User adds translations, detects hardcoded strings, configures RTL, or sets up react-i18next or next-intl.

What you get

Namespaced locale files, ICU-ready keys, Intl formatting, and passing i18n_checker validation.

  • Hardcoded string report
  • Missing translation key list

Files

SKILL.mdMarkdownGitHub ↗

i18n & Localization

Internationalization (i18n) and Localization (L10n) best practices.

---

1. Core Concepts

TermMeaning
i18nInternationalization - making app translatable
L10nLocalization - actual translations
LocaleLanguage + Region (en-US, tr-TR)
RTLRight-to-left languages (Arabic, Hebrew)

---

2. When to Use i18n

Project Typei18n Needed?
Public web app✅ Yes
SaaS product✅ Yes
Internal tool⚠️ Maybe
Single-region app⚠️ Consider future
Personal project❌ Optional

---

3. Implementation Patterns

React (react-i18next)

import { useTranslation } from 'react-i18next';

function Welcome() {
  const { t } = useTranslation();
  return <h1>{t('welcome.title')}</h1>;
}

Next.js (next-intl)

import { useTranslations } from 'next-intl';

export default function Page() {
  const t = useTranslations('Home');
  return <h1>{t('title')}</h1>;
}

Python (gettext)

from gettext import gettext as _

print(_("Welcome to our app"))

---

4. File Structure

locales/
├── en/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
├── tr/
│   ├── common.json
│   ├── auth.json
│   └── errors.json
└── ar/          # RTL
    └── ...

---

5. Best Practices

DO ✅

  • Use translation keys, not raw text
  • Namespace translations by feature
  • Support pluralization
  • Handle date/number formats per locale
  • Plan for RTL from the start
  • Use ICU message format for complex strings

DON'T ❌

  • Hardcode strings in components
  • Concatenate translated strings
  • Assume text length (German is 30% longer)
  • Forget about RTL layout
  • Mix languages in same file

---

6. Common Issues

IssueSolution
Missing translationFallback to default language
Hardcoded stringsUse linter/checker script
Date formatUse Intl.DateTimeFormat
Number formatUse Intl.NumberFormat
PluralizationUse ICU message format

---

7. RTL Support

/* CSS Logical Properties */
.container {
  margin-inline-start: 1rem;  /* Not margin-left */
  padding-inline-end: 1rem;   /* Not padding-right */
}

[dir="rtl"] .icon {
  transform: scaleX(-1);
}

---

8. Checklist

Before shipping:

  • [ ] All user-facing strings use translation keys
  • [ ] Locale files exist for all supported languages
  • [ ] Date/number formatting uses Intl API
  • [ ] RTL layout tested (if applicable)
  • [ ] Fallback language configured
  • [ ] No hardcoded strings in components

---

Script

ScriptPurposeCommand
scripts/i18n_checker.pyDetect hardcoded strings & missing translationspython scripts/i18n_checker.py <project_path>

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

Limitations

  • Use this skill only when the task clearly matches the scope described above.
  • Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
  • Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Related skills

How it compares

Pick i18n-localization for codebase string audits; use a translation management platform skill for TMS workflow integration.

FAQ

Should I concatenate translated strings?

No. Concatenation breaks grammar in many languages; use ICU message format instead.

How do I handle RTL layouts?

Use CSS logical properties like margin-inline-start and test with dir rtl on icon transforms.

Is there an automated hardcoded string check?

Yes. Run python scripts/i18n_checker.py on the project path.

Is I18n Localization safe to install?

skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.