Skip to main content
skill CX Codex

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.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add Mindrally/skills --skill localization-l10n -a claude-code
Open on GitHub

What 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 Intl API
  • 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-code

2Manually: put the files in place

~/.claude/skills/localization-l10n/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/localization-l10n/

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

Similar skills

Everything for Frontend and UI →

From the same set236

less-best-practices This skill guides coding assistants on Less architecture, modular project layout, variable scales, and reusable mixins. Keep stylesheet specificity low and maintainable. CX Codex +1 692installs llamaindex-development Guides coding assistants in building Python RAG applications with LlamaIndex. Helps generate document parsers, vector indexes, and query engines. CX Codex +1 691installs firebase-development Guides AI agents through Firebase patterns for Firestore, Authentication, Functions, and Storage when writing TypeScript and Angular code. CX Codex +1 690installs meta-prompt A skill with meta-prompting templates that critique model responses, walk through a solution path and give it a score. Handy when you need to check answer quality. CX Codex +1 691installs cloudflare-development A skill that hands your agent Cloudflare edge practices: Workers, Pages, KV, D1, R2 and Durable Objects. Useful when the agent writes worker code or edits wrangler.toml. CX Codex +1 689installs remix A skill that turns your coding agent into a Remix and TypeScript helper, with ready patterns for data loading, mutations and nested routes. CX Codex +1 686installs salesforce-dx A skill that makes your coding agent follow Salesforce DX conventions: Apex, triggers, LWC, scratch orgs and SFDX CLI workflows. CX Codex +1 688installs micronaut Tells the agent how to write Micronaut code: compile-time DI, GraalVM native builds, reactive services. Useful when your Java project should follow the framework instead of generic advice. CX Codex +1 687installs

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor