Skip to content

SKILL.md

Latest commit

 

History

History
159 lines (116 loc) · 3.17 KB

SKILL.md

File metadata and controls

159 lines (116 loc) · 3.17 KB
name i18n-localization
description Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
risk safe
source community
date_added 2026-02-27

i18n & Localization

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

1. Core Concepts

Term Meaning
i18n Internationalization - making app translatable
L10n Localization - actual translations
Locale Language + Region (en-US, tr-TR)
RTL Right-to-left languages (Arabic, Hebrew)

2. When to Use i18n

Project Type i18n 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

Issue Solution
Missing translation Fallback to default language
Hardcoded strings Use linter/checker script
Date format Use Intl.DateTimeFormat
Number format Use Intl.NumberFormat
Pluralization Use 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

Script Purpose Command
scripts/i18n_checker.py Detect hardcoded strings & missing translations python scripts/i18n_checker.py <project_path>

When to Use

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