Our review

This skill provides patterns and best practices for internationalizing and localizing software, including string extraction, translation management, locale file organization, and RTL support.

Strengths

Covers multiple frameworks (React, Next.js, Python) with concrete code examples
Includes a checklist and common issues table for quick reference
Provides guidance on RTL layout using CSS logical properties
Offers a script to detect hardcoded strings and missing translations

Limitations

Does not cover mobile or desktop platform specific i18n
Lacks detailed setup instructions for each library
No mention of translation management tools or services

When to use it

Use this skill when starting a new project that needs to support multiple languages or when refactoring an existing app to add internationalization.

When not to use it

Do not use if your project is a single-region internal tool with no plans for multilingual support, or if you need deep guidance on a specific i18n library's advanced features.

Examples

Detect hardcoded strings

Run the i18n checker script on the project at /path to find any hardcoded user-facing strings and missing translations.

Set up i18n with react-i18next

Show me how to set up internationalization in a React app using react-i18next, including locale file structure and translation usage.

Add RTL support

Explain how to add right-to-left (RTL) support to a web application using CSS logical properties and the dir attribute.

name: i18n-localization description: Internationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support. allowed-tools: Read, Glob, Grep

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> |

Internationalization and Localization (i18n)

Recommended for