How does this handle Right-to-Left (RTL) languages?

It provides patterns for bidirectional text, RTL-aware layouts using CSS logical properties, and direction detection via specialized formatting hooks.

Does it support rich text inside translations?

Yes, it includes patterns for the Trans component, enabling you to embed React components and HTML safely within translated strings.

Can I use this for complex pluralization?

Yes, it implements ICU MessageFormat, allowing for sophisticated pluralization and gender-specific translation logic within your JSON locale files.

What libraries does this skill use for i18n?

The skill primarily leverages react-i18next for translations and dayjs for lightweight, locale-aware date and time formatting.

Why should I use the formatting hook instead of native JS methods?

The provided hooks ensure consistency across the application, handle locale-specific separators automatically, and prevent common anti-patterns like hardcoded currency symbols.

React i18n & Date Patterns

Name: React i18n & Date Patterns
Author: yonatangross

byyonatangross

•

Design Tools

Implements comprehensive internationalization and locale-aware formatting for React applications, covering strings, dates, and RTL support.

This skill provides a standardized framework for building production-ready multilingual React interfaces using industry-standard tools like react-i18next and dayjs. It streamlines the implementation of locale-aware UI strings, complex date and time calculations, currency formatting, and advanced pluralization using ICU MessageFormat. By enforcing strict best practices and preventing common anti-patterns like hardcoded strings or manual list joining, it ensures applications are globally accessible and culturally relevant, including full support for Right-to-Left (RTL) languages like Hebrew and Arabic.

Key Features

01Automated UI string translation using the useTranslation hook and namespaced JSON files.

02Locale-aware formatting for currency, lists, and ordinals via a centralized useFormatting hook.

03Standardized date and time handling using dayjs for consistent cross-browser formatting.

0469 GitHub stars

05Advanced pluralization and conditional messaging using ICU MessageFormat syntax.

06Comprehensive RTL (Right-to-Left) support for bidirectional UI layouts and text.

Use Cases

01Implementing complex pluralization logic for notification systems or data-heavy applications.

02Adapting a frontend layout for RTL languages using logical properties and automated direction detection.

03Localizing a React dashboard for international markets with specific currency and date requirements.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add yonatangross/orchestkit i18n-date-patterns

For use in Claude.ai and ChatGPT

Download Skill