lingui-best-practices
This skill covers implementing internationalization in React and vanilla JavaScript applications using Lingui. You'll learn the standard workflow—marking messages with macros, extracting and translating catalogs, then compiling and activating locales—plus patterns for pluralization, date/number formatting, and dynamic locale switching. Best practices include choosing the right macro for your context and leveraging the ESLint plugin to catch common mistakes.
Lingui Best Practices teaches you to implement i18n in React and JavaScript using Lingui's macros, extraction, and compilation workflow.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-27
Lingui Best Practices teaches you to implement i18n in React and JavaScript using Lingui's macros, extraction, and compilation workflow. This skill covers implementing internationalization in React and vanilla JavaScript applications using Lingui. You'll learn the standard workflow—marking messages with macros, extracting and translating catalogs, then compiling and activating locales—plus patterns for pluralization, date/number formatting, and dynamic locale switching. Best practices include choosing the right macro for your context and leveraging the ESLint plugin to catch common mistakes.
Use it when
- lingui-best-practices explains that `<Trans>` is a component for marking JSX blocks with inline translations and pluralization rules.
- lingui-best-practices covers the message extraction workflow: run `lingui extract` to scan your codebase for Lingui macros and generate.
Verify before relying
Read SKILL.md below before installing (3 files). Open directory: indexed for reading, not audited.
Install
platformplatform/PlatformPlatform/lingui-best-practices · repository language: C#
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I use Lingui for internationalization in React?
lingui-best-practices covers the full Lingui i18n workflow for React. Start by wrapping your app with the `<I18nProvider>` and setting the active locale. Mark user-facing strings with Lingui macros—`<Trans>` for JSX content, `msg()` for lazy or dynamic strings, and `useLingui()` hook for runtime access. Extract messages using the Lingui CLI, send catalogs to translators, then compile and load the translated catalogs back into your app. This macro-based approach keeps translations out of your bundle until needed.
What's the difference between Trans macro and useLingui?
lingui-best-practices explains that `<Trans>` is a component for marking JSX blocks with inline translations and pluralization rules, ideal for template-heavy content. `useLingui()` is a hook that gives you access to the active locale and `i18n` object for runtime operations like formatting dates or numbers, or for triggering locale switches. Use `<Trans>` when your content is static JSX; use `useLingui()` when you need programmatic control or must translate outside a component render.
How do I extract and compile messages with Lingui?
lingui-best-practices covers the message extraction workflow: run `lingui extract` to scan your codebase for Lingui macros and generate a catalog (usually `messages.po`). Send this catalog to translators who fill in translations for each locale. Then run `lingui compile` to convert the translated catalogs into optimized JavaScript modules. Load the compiled catalog for your active locale in the `<I18nProvider>`, and Lingui will use it for all macro expansions.
How can I handle pluralization and formatting in Lingui?
lingui-best-practices shows that Lingui handles pluralization inside `<Trans>` using the `plural` prop and ICU message syntax, letting you define singular and plural forms. For date and number formatting, call methods on the `i18n` object returned by `useLingui()`—for example, `i18n.date(new Date())` or `i18n.number(1234.56)`. These formatters respect the active locale and any custom number/date format rules you've configured in your Lingui setup.
Why aren't my Lingui translations working?
lingui-best-practices recommends checking: (1) Did you wrap your app with `<I18nProvider>` and pass the compiled catalog? (2) Did you run `lingui extract` and `lingui compile` after adding new macros? (3) Are your macro calls syntactically correct—`<Trans>` for JSX, `msg()` for strings? (4) Is the active locale set correctly? Enable the Lingui ESLint plugin to catch macro mistakes early. Common issues include forgetting to compile after extraction or loading the wrong locale's catalog.
How do I dynamically switch locales in a Lingui React app?
lingui-best-practices shows that locale switching happens via the `i18n` object. Call `i18n.activate(locale)` to switch the active locale, then re-render your app (usually by updating React state). Pre-load all locale catalogs at startup or lazy-load them on demand. Wrap the activation in a state update so React re-renders with the new locale. The `<I18nProvider>` will propagate the new locale to all `<Trans>` macros and `useLingui()` hooks automatically.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Lingui Best Practices
Lingui is a powerful internationalization (i18n) framework for JavaScript. This skill covers best practices for implementing i18n in React and vanilla JavaScript applications.
Quick Start Workflow
The standard Lingui workflow consists of these steps:
- Wrap your app in
I18nProvider - Mark messages for translation using macros (
Trans,t, etc.) - Extract messages:
lingui extract - Translate the catalogs
- Compile catalogs:
lingui compile - Load and activate locale in your app
Core Packages
Import from these packages:
```jsx // React macros (recommended) import { Trans, Plural, Select, useLingui } from "@lingui/react/macro";
// Core macros for vanilla JS import { t, msg, plural, select } from "@lingui/core/macro";
// Runtime (rarely used
(truncated - see the full file via the links below)
File tree — 3 files
.claude/skills/lingui-best-practices/SKILL.md
.claude/skills/lingui-best-practices/references/common-mistakes.md
.claude/skills/lingui-best-practices/references/configuration.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Implement internationalization in React/JS using Lingui macros and workflow”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill walks you through converting an i18next-based project to Lingui, from installing dependencies and configuring build tools through rewriting React components and translation strings. It addresses namespace mapping, plural form restructuring, and catalog format changes, then shows how to extract and compile your messages for production.
Translate replaces expensive full-model translation runs by extracting empty msgstr entries from Lingui catalogs, chunking them, and dispatching Haiku subagents to translate each batch. Results merge back deterministically into your locale files with zero model overhead in the write path. Use this when you need to fill missing translations after adding new UI strings.
Manage translations across multiple locales in Lingui catalogs without altering source keys or compiled outputs. The skill enforces preservation of placeholders, ICU syntax, and technical terminology while providing verification scripts to catch missing translations and ensure consistency.
This skill equips frontend developers with patterns for adding internationalization to React applications, covering translation hooks, locale-sensitive formatting for currency and lists, date handling with dayjs, and bidirectional text support. It provides bundled references for ICU MessageFormat pluralization, the Trans component for rich text, and implementation checklists to ensure all user-facing content respects locale conventions.
Software Localisation guides you through implementing internationalisation and localisation across modern web frameworks. It covers library selection (react-i18next, react-intl, vue-i18n, @angular/localize, next-intl), ICU message formatting, character encoding standards, and CI/CD workflows to prevent mixed-language regressions.
i18n-review scans your source code and locale files to identify internationalization problems: over-wrapped technical terms, missed translatable strings, concatenated sentences that break in other languages, and hardcoded values that should be parameters. The skill runs parallel detection across wrapping patterns, sentence splits, pluralization rules, and unused keys, reporting issues with file locations and suggested fixes without modifying code.