lingui-best-practices

Codify Lingui i18n best practices for React and JavaScript apps.

16|Updated Jun 6, 2026
One-click install
npx skills add https://github.com/Insik-Han/han-monorepo-template --skill lingui-best-practices-insik-han
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: lingui-best-practices
Source: https://github.com/Insik-Han/han-monorepo-template/tree/main/.agents/skills/lingui-best-practices
Command: npx skills add https://github.com/Insik-Han/han-monorepo-template --skill lingui-best-practices-insik-han

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Lingui best practices guide helps teams implement robust, maintainable i18n workflows in React and JavaScript apps by avoiding common mistakes, ensuring consistent catalogs, and leveraging macro-based translations.

Core Features & Use Cases

  • Establish best-practice workflows for Lingui: proper imports, macro usage, wrapping with I18nProvider, and safe extraction/compilation of catalogs.
  • Enforce consistency and prevent pitfalls with ESLint Lingui plugin guidelines, dynamic locale handling, and correct import paths across v5+.
  • Real-world scenarios: multi-language UI, ICU message formatting, translation extraction, and runtime i18n updates.

Quick Start

Wrap your app in I18nProvider and begin extracting messages with lingui extract, then compile catalogs with lingui compile.

Frequently Asked Questions about lingui-best-practices

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

FAQPage Schema
How do I set up Lingui i18n workflows in React to avoid common extraction mistakes?

To set up Lingui i18n workflows in React, wrap your application in I18nProvider, use correct macro imports for messages, and run lingui extract followed by lingui compile to safely build catalogs without common extraction errors.

What is the best way to manage Lingui catalogs and enforce translation consistency across a team?

The best way to manage Lingui catalogs is to enforce consistent translation workflows by integrating the ESLint Lingui plugin, standardizing import paths, and applying macro-based translations to prevent ICU message formatting errors across the team.

How do I handle runtime locale switching with Lingui macros in a JavaScript app?

Handle runtime locale switching in a JavaScript app by configuring the I18nProvider with dynamic locale state, ensuring your compiled Lingui catalogs are loaded correctly, and using macros to trigger UI updates without reloading the application.

Does Lingui v5 require specific import paths or ESLint configurations for macro usage?

Yes, Lingui v5 requires correct import paths for macros and benefits from ESLint integration to enforce best practices. Configuring the ESLint Lingui plugin prevents common pitfalls and ensures translation extraction aligns with macro usage.

Why does my lingui extract command miss messages wrapped in custom components?

When lingui extract misses messages, it is often due to incorrect macro usage or missing I18nProvider setup. Ensure your custom components use proper Lingui macros and that extraction is configured to recognize your specific wrapping patterns.

Can I use Lingui for ICU message formatting in a multi-language React UI?

Yes, you can use Lingui for ICU message formatting in a multi-language React UI. It provides macros specifically designed to handle complex ICU formats, ensuring robust translation extraction and runtime updates for diverse locales.