localization-l10n — Claude Code skill: what it does, how to install
Guides AI coding assistants through localization best practices. It helps configure translation files, regional Intl formatting, and RTL layouts.
npx skills add Mindrally/skills --skill localization-l10n -a claude-codeWhat localization-l10n does
The skill instructs coding models on configuring libraries like i18next or expo-localization. It establishes namespace structures for translation files. This keeps large dictionaries manageable. It also creates fallback chains for regional language variants and details compliance requirements for local regulations.
Fixed-width containers break interfaces during translation. German text expands by 30-50% compared to English. Because of this, the skill directs the model toward flexible layouts and CSS logical properties for right-to-left scripts. It also handles currency and date formatting with standard Intl APIs.
Quality assurance relies on pseudolocalization. It catches hardcoded strings before code reaches production. The guidance also details namespace lazy loading and automatic browser locale detection.
What it helps with
- organize translation files with regional fallback chains
- format dates, numbers, and currencies using the native
IntlAPI - adapt component styling to CSS logical properties for RTL
- catch hardcoded strings using pseudolocalization
Example prompts for the agent
- Organize our locales folder for react-i18next with en-US and es-MX fallbacks
- Convert these card layout styles to CSS logical properties for RTL support
- Format product prices and publication dates using Intl for Japanese and German locales
How to install localization-l10n
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill localization-l10n -a claude-code2Manually: put the files in place
~/.claude/skills/localization-l10n/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/localization-l10n/
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill localization-l10n -a codex2Manually: put the files in place
.agents/skills/localization-l10n/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill localization-l10n -a cursor2Manually: put the files in place
.cursor/skills/localization-l10n/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills localization-l10n2Manually: put the files in place
.github/skills/localization-l10n/SKILL.md1Skills CLI (Vercel)
npx skills add Mindrally/skills --skill localization-l10n -a gemini-cli2Platform CLI
gemini skills install https://github.com/Mindrally/skills --path localization-l10nManually: put the files in place
.devin/skills/localization-l10n/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Mindrally/skills --skill localization-l10n -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about localization-l10n
How do I install localization-l10n in Claude Code?
Run npx skills add Mindrally/skills --skill localization-l10n -a claude-code. The file is saved to ~/.claude/skills/localization-l10n/SKILL.md.
What does the localization-l10n skill do?
It provides architecture rules for adapting web and mobile apps to different locales. The guidance covers translation libraries, Intl formatters, RTL styling, and namespace loading.
Which libraries does this skill recommend?
For web environments, it points to i18next, react-i18next, and next-i18next. For mobile React Native code, it uses expo-localization and react-native-i18n.
Source text
SKILL.md · Apache-2.0
---
name: localization-l10n
description: Implement localization (l10n) best practices to adapt applications for specific regions, languages, and cultural preferences.
metadata:
maintainer: Mindrally
source: https://github.com/Mindrally/skills
---
# Localization (l10n)
You are an expert in localization for web and mobile applications. Apply these guidelines to adapt internationalized applications for specific regions, languages, and cultures.
## Core Principles
- Localization (l10n) builds on internationalization (i18n)
- Ensure all user-facing text supports localization
- Adapt content for cultural appropriateness
- Respect regional conventions for dates, numbers, and currency
- Design for content that varies significantly between locales
## Localization Libraries
### Web Applications
- Use i18next and react-i18next for web applications
- Implement namespace-based translation organization
- Use libraries like react-intl or next-i18next for Next.js applications
- Leverage formatjs for ICU message format support
### Mobile Applications
- Use expo-localization for React Native apps
- Use react-native-i18n or expo-localization for internationalization and localization
- Support multiple languages with fallback mechanisms
- Handle device locale detection automatically
## Translation Management
### File Organization
```
locales/
en-US/
common.json
legal.json
marketing.json
en-GB/
common.json
legal.json
marketing.json
es-ES/
common.json
legal.json
marketing.json
es-MX/
common.json
legal.json
marketing.json
```
### Regional Variants
- Support regional language variants (en-US vs en-GB, es-ES vs es-MX)
- Implement fallback chains (es-MX -> es -> en)
- Handle spelling differences (color vs colour)
- Adapt terminology for regional preferences
## Locale-Specific Formatting
### Date and Time Formatting
```typescript
// Format dates according to locale
const formatDate = (date: Date, locale: string) => {
return new Intl.DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
day: 'numeric'
}).format(date);
};
// US: January 23, 2026
// UK: 23 January 2026
// Germany: 23. Januar 2026
```
### Number Formatting
```typescript
// Format numbers according to locale
const formatNumber = (num: number, locale: string) => {
return new Intl.NumberFormat(locale).format(num);
};
// US: 1,234,567.89
// Germany: 1.234.567,89
// France: 1 234 567,89
```
### Currency Formatting
```typescript
// Format currency according to locale
const formatCurrency = (amount: number, locale: string, currency: string) => {
return new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency
}).format(amount);
};
// US/USD: $1,234.56
// Germany/EUR: 1.234,56 EUR
// Japan/JPY: JPY 1,235
```
## Cultural Adaptation
### Content Localization
- Adapt imagery for cultural appropriateness
- Localize marketing content, not just translate
- Consider cultural sensitivities in color choices
- Adapt examples and references for local relevance
### Legal and Compliance
- Localize privacy policies and terms of service
- Adapt for regional legal requirements (GDPR, CCPA)
- Display appropriate regulatory information
- Handle region-specific disclaimers
## Layout and Typography
### Text Expansion
- Design for 30-50% text expansion from English
- Use flexible layouts that accommodate longer text
- Test with German (often longest) and Chinese (often shortest)
- Avoid fixed-width containers for text
### RTL Support
- Implement full RTL (right-to-left) support for Arabic, Hebrew, etc.
- Use CSS logical properties for directional layouts
- Mirror UI elements appropriately
- Handle bidirectional text (mixed LTR/RTL)
```css
/* Use logical properties for RTL support */
.card {
margin-inline-start: 1rem;
padding-inline-end: 0.5rem;
text-align: start;
}
```
### Typography Considerations
- Use fonts that support required character sets
- Consider CJK (Chinese, Japanese, Korean) typography needs
- Support Arabic and other script-specific requirements
- Implement proper line breaking for different languages
## Regional Features
### Address Formats
- Adapt address forms for regional formats
- Support international phone number formats
- Handle postal/ZIP code validation by country
- Implement country-specific form validation
### Measurement Units
- Support metric and imperial units
- Display appropriate units based on locale
- Allow user preference override
- Convert values accurately
### Calendars and Time
- Support different calendar systems (Gregorian, Hijri, etc.)
- Handle timezone display preferences
- Support different week start days (Sunday vs Monday)
- Display appropriate date formats
## Testing and Quality Assurance
### Localization Testing
- Test with native speakers for each locale
- Verify layout with actual translated content
- Test all date, number, and currency formats
- Verify RTL layouts function correctly
### Automated Checks
- Implement missing translation detection
- Check for hardcoded strings in code
- Validate translation file format and completeness
- Monitor for translation quality issues
### Pseudolocalization
- Use pseudolocalization during development
- Detect hardcoded strings early
- Verify UI handles text expansion
- Test character encoding support
## Content Delivery
### Language Detection
- Detect user language from browser/device settings
- Support URL-based locale switching (/en/, /es/, /fr/)
- Persist user language preference
- Implement graceful fallback mechanisms
### Performance Optimization
- Lazy load translation files by namespace
- Cache translations appropriately
- Use CDN for static translation files
- Minimize initial translation bundle size
## Integration Best Practices
### State Management
- Store locale preference in user settings
- Sync preference across devices when logged in
- Handle locale changes without full page reload
- Update all components on locale switch
### API Integration
- Pass locale in API requests
- Return localized content from backend when appropriate
- Handle server-side locale negotiation
- Support content negotiation headers
© Mindrally · Apache-2.0 · Mindrally/skills