i18n-localization
starsforks
How to install i18n-localization?
one-man-company/skills-contextmanager/i18n-localization
$npx -y skills add One-Man-Company/Skills-ContextManager --skill i18n-localizationInternationalization and localization patterns. Detecting hardcoded strings, managing translations, locale files, RTL support.
SKILL.md
| 1 | # i18n & Localization |
| 2 | |
| 3 | > Internationalization (i18n) and Localization (L10n) best practices. |
| 4 | |
| 5 | --- |
| 6 | |
| 7 | ## 1. Core Concepts |
| 8 | |
| 9 | | Term | Meaning | |
| 10 | |------|---------| |
| 11 | | **i18n** | Internationalization - making app translatable | |
| 12 | | **L10n** | Localization - actual translations | |
| 13 | | **Locale** | Language + Region (en-US, tr-TR) | |
| 14 | | **RTL** | Right-to-left languages (Arabic, Hebrew) | |
| 15 | |
| 16 | --- |
| 17 | |
| 18 | ## 2. When to Use i18n |
| 19 | |
| 20 | | Project Type | i18n Needed? | |
| 21 | |--------------|--------------| |
| 22 | | Public web app | ✅ Yes | |
| 23 | | SaaS product | ✅ Yes | |
| 24 | | Internal tool | ⚠️ Maybe | |
| 25 | | Single-region app | ⚠️ Consider future | |
| 26 | | Personal project | ❌ Optional | |
| 27 | |
| 28 | --- |
| 29 | |
| 30 | ## 3. Implementation Patterns |
| 31 | |
| 32 | ### React (react-i18next) |
| 33 | |
| 34 | ```tsx |
| 35 | import { useTranslation } from 'react-i18next'; |
| 36 | |
| 37 | function Welcome() { |
| 38 | const { t } = useTranslation(); |
| 39 | return <h1>{t('welcome.title')}</h1>; |
| 40 | } |
| 41 | ``` |
| 42 | |
| 43 | ### Next.js (next-intl) |
| 44 | |
| 45 | ```tsx |
| 46 | import { useTranslations } from 'next-intl'; |
| 47 | |
| 48 | export default function Page() { |
| 49 | const t = useTranslations('Home'); |
| 50 | return <h1>{t('title')}</h1>; |
| 51 | } |
| 52 | ``` |
| 53 | |
| 54 | ### Python (gettext) |
| 55 | |
| 56 | ```python |
| 57 | from gettext import gettext as _ |
| 58 | |
| 59 | print(_("Welcome to our app")) |
| 60 | ``` |
| 61 | |
| 62 | --- |
| 63 | |
| 64 | ## 4. File Structure |
| 65 | |
| 66 | ``` |
| 67 | locales/ |
| 68 | ├── en/ |
| 69 | │ ├── common.json |
| 70 | │ ├── auth.json |
| 71 | │ └── errors.json |
| 72 | ├── tr/ |
| 73 | │ ├── common.json |
| 74 | │ ├── auth.json |
| 75 | │ └── errors.json |
| 76 | └── ar/ # RTL |
| 77 | └── ... |
| 78 | ``` |
| 79 | |
| 80 | --- |
| 81 | |
| 82 | ## 5. Best Practices |
| 83 | |
| 84 | ### DO ✅ |
| 85 | |
| 86 | - Use translation keys, not raw text |
| 87 | - Namespace translations by feature |
| 88 | - Support pluralization |
| 89 | - Handle date/number formats per locale |
| 90 | - Plan for RTL from the start |
| 91 | - Use ICU message format for complex strings |
| 92 | |
| 93 | ### DON'T ❌ |
| 94 | |
| 95 | - Hardcode strings in components |
| 96 | - Concatenate translated strings |
| 97 | - Assume text length (German is 30% longer) |
| 98 | - Forget about RTL layout |
| 99 | - Mix languages in same file |
| 100 | |
| 101 | --- |
| 102 | |
| 103 | ## 6. Common Issues |
| 104 | |
| 105 | | Issue | Solution | |
| 106 | |-------|----------| |
| 107 | | Missing translation | Fallback to default language | |
| 108 | | Hardcoded strings | Use linter/checker script | |
| 109 | | Date format | Use Intl.DateTimeFormat | |
| 110 | | Number format | Use Intl.NumberFormat | |
| 111 | | Pluralization | Use ICU message format | |
| 112 | |
| 113 | --- |
| 114 | |
| 115 | ## 7. RTL Support |
| 116 | |
| 117 | ```css |
| 118 | /* CSS Logical Properties */ |
| 119 | .container { |
| 120 | margin-inline-start: 1rem; /* Not margin-left */ |
| 121 | padding-inline-end: 1rem; /* Not padding-right */ |
| 122 | } |
| 123 | |
| 124 | [dir="rtl"] .icon { |
| 125 | transform: scaleX(-1); |
| 126 | } |
| 127 | ``` |
| 128 | |
| 129 | --- |
| 130 | |
| 131 | ## 8. Checklist |
| 132 | |
| 133 | Before shipping: |
| 134 | |
| 135 | - [ ] All user-facing strings use translation keys |
| 136 | - [ ] Locale files exist for all supported languages |
| 137 | - [ ] Date/number formatting uses Intl API |
| 138 | - [ ] RTL layout tested (if applicable) |
| 139 | - [ ] Fallback language configured |
| 140 | - [ ] No hardcoded strings in components |
| 141 | |
| 142 | --- |
| 143 | |
| 144 | ## Script |
| 145 | |
| 146 | | Script | Purpose | Command | |
| 147 | |--------|---------|---------| |
| 148 | | `scripts/i18n_checker.py` | Detect hardcoded strings & missing translations | `python scripts/i18n_checker.py <project_path>` | |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
