Does this skill support Next.js projects?

No, this specific skill is optimized for standard React applications. Next.js typically requires different internationalization strategies like next-i18next or middleware-based routing.

How are translations organized in this architecture?

Translations are organized using namespaces within a modular directory (modules/cores/i18n/locales/), allowing you to split translation JSON files by feature or page.

What core library does this implementation use?

It utilizes the react-i18next ecosystem, including i18next-http-backend for loading translation files and i18next-browser-languagedetector for automatic user preference detection.

Is the implementation type-safe?

Yes, the skill includes TypeScript interfaces and constants for locales and namespaces, ensuring type safety when switching languages or accessing translation keys.

React SOLID Internationalization

Name: React SOLID Internationalization
Author: fusengine

byfusengine

0•

開発者ツール

Implements a modular, SOLID-compliant internationalization architecture for React applications using react-i18next.

This skill provides a comprehensive blueprint for setting up internationalization (i18n) in standard React applications, specifically excluding Next.js. It follows a modular architecture by organizing code into a dedicated modules/cores/i18n/ directory, separating concerns between configurations, interfaces, services, and hooks. It streamlines the implementation of complex features like namespaces, pluralization, and rich-text translations using the Trans component, ensuring your application is scalable and maintainable while adhering to industry best practices.

主な機能

01Integrated language detection and asynchronous backend loading

02Custom useLanguage hook for streamlined locale switching and state

030 GitHub stars

04Modular SOLID directory structure for scalable translation management

05Namespace organization to prevent translation file bloat

06Advanced pluralization and rich-text JSX translation support

ユースケース

01Refactoring existing translation logic into a maintainable modular structure

02Setting up multi-language support in enterprise React dashboards

03Implementing complex pluralization and dynamic content in localized apps

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add fusengine/agents react-i18n

For use in Claude.ai and ChatGPT

Download Skill