Does this skill support TypeScript?

Yes, it provides patterns for TypeScript module augmentation to ensure message IDs are checked at compile-time, preventing typos in translation keys.

Why is the 'other' category mandatory in plurals?

The ICU Message Format requires the 'other' branch as a universal fallback; omitting it will cause runtime errors in react-intl when a count doesn't match defined categories.

How does this skill optimize React i18n performance?

It advocates for compiling messages into AST format at build time to skip runtime parsing and utilizing dynamic imports for lazy-loading locale data.

When should I use useIntl instead of FormattedMessage?

Use the useIntl hook when you need a plain string for HTML attributes like placeholders, alt text, or ARIA labels, as FormattedMessage returns a ReactNode.

React-Intl Internationalization

Name: React-Intl Internationalization
Author: agents-inc

byagents-inc

0•

コンテンツ管理

Implements professional internationalization in React applications using ICU Message Format and FormatJS best practices.

This skill provides specialized guidance for implementing react-intl (FormatJS) within React projects, ensuring robust support for multi-language environments. It covers critical patterns including IntlProvider configuration, ICU Message Format syntax for complex pluralization, and locale-aware formatting for dates, numbers, and currencies. By enforcing best practices like mandatory 'other' categories in plurals and providing type-safe message ID patterns, this skill helps developers build scalable, translation-ready applications compatible with professional Translation Management Systems (TMS).

主な機能

010 GitHub stars

02Declarative JSX formatting with FormattedMessage and imperative string formatting via useIntl

03Type-safe message ID integration using TypeScript module augmentation

04Automated message extraction and AST compilation workflows for optimized performance

05ICU Message Format implementation for advanced pluralization and select patterns

06Locale-specific formatting for dates, times, currencies, and relative time values

ユースケース

01Building enterprise-grade multilingual React applications with professional translation workflows

02Localizing complex e-commerce platforms requiring precise currency and pluralization logic

03Migrating hardcoded strings to an extractable and maintainable internationalization system

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agents-inc/skills web-i18n-react-intl

For use in Claude.ai and ChatGPT

主な機能

010 GitHub stars

02Declarative JSX formatting with FormattedMessage and imperative string formatting via useIntl

03Type-safe message ID integration using TypeScript module augmentation

04Automated message extraction and AST compilation workflows for optimized performance

05ICU Message Format implementation for advanced pluralization and select patterns

06Locale-specific formatting for dates, times, currencies, and relative time values

ユースケース

01Building enterprise-grade multilingual React applications with professional translation workflows

02Localizing complex e-commerce platforms requiring precise currency and pluralization logic

03Migrating hardcoded strings to an extractable and maintainable internationalization system