One-click install
npx skills add https://github.com/qazuor/claude-code-knowledge --skill i18n-patterns
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: i18n-patterns
Source: https://github.com/qazuor/claude-code-knowledge/tree/main/skills/i18n-patterns
Command: npx skills add https://github.com/qazuor/claude-code-knowledge --skill i18n-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Internationalization (i18n) and localization (l10n) patterns for web applications. Covers translation file structure, locale detection, pluralization, RTL support, number/date formatting, and framework-specific integration.

Core Features & Use Cases

  • Namespace-based translation structure: Organize translations by locale and feature areas (e.g., common, auth, errors).
  • Locale detection & switching: Detect user locale via URL, cookies, or headers and load appropriate messages.
  • Pluralization & ICU messages: Use ICU syntax for robust pluralization across languages and interpolations.
  • RTL support & CSS considerations: Implement direction-aware styling and layout with logical properties.
  • Use Case: Build a bilingual app that switches from English to Arabic and renders RTL layout without layout glitches.

Quick Start

Use i18n-patterns to structure your translation files and implement locale detection in your Next.js project.

Frequently Asked Questions about i18n-patterns

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I structure translation files for multi-language web apps?

Structure translation files using a namespace-based approach organized by locale and feature areas like common, auth, and errors. This pattern separates translations into manageable modules, ensuring maintainable multi-language web app localization.

How do I handle pluralization and interpolation in ICU messages?

Handle pluralization and interpolation by using ICU message syntax for robust translations across languages. ICU messages provide standardized patterns for plural forms and variable interpolation in your localization workflow.

What is the best way to implement RTL support and direction-aware CSS?

Implement RTL support by using direction-aware styling and layout with logical CSS properties. This approach ensures your localization patterns render Arabic and other RTL languages without layout glitches.

Can I use these i18n patterns with React and Next.js frameworks?

Yes, these i18n patterns provide practical integration examples and frontmatter-driven discovery specifically for React and Next.js frameworks. They standardize localization implementation across your multi-language web app stack.

How do I format numbers and dates for different locales in web applications?

Format numbers and dates by applying locale-specific formatting patterns as part of your i18n implementation. These localization patterns ensure numbers and dates display correctly according to the detected user locale.