{"enrichment":{"faq":[{"a":"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\u2014`<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.","q":"How do I use Lingui for internationalization in React?"},{"a":"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.","q":"What's the difference between Trans macro and useLingui?"},{"a":"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.","q":"How do I extract and compile messages with Lingui?"},{"a":"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()`\u2014for 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.","q":"How can I handle pluralization and formatting in Lingui?"},{"a":"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\u2014`<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.","q":"Why aren't my Lingui translations working?"},{"a":"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.","q":"How do I dynamically switch locales in a Lingui React app?"}],"shadow_tags":["message-extraction","locale-switching","jsx-translation","macro-compilation","catalog-management","pluralization-rules","translator-workflow","bundle-optimization"],"summary_rewrite":"This skill covers implementing internationalization in React and vanilla JavaScript applications using Lingui. You'll learn the standard workflow\u2014marking messages with macros, extracting and translating catalogs, then compiling and activating locales\u2014plus 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."},"files":[{"bytes":8560,"path":".claude/skills/lingui-best-practices/SKILL.md","sha256":"55903e4f283817cf47a96d871d7ca895222901c97e042df7e01b965923d28986","url":"https://skillfed.io/files/platformplatform/PlatformPlatform/lingui-best-practices/d3c1a9a2/SKILL.md"}],"id":"platformplatform/PlatformPlatform/lingui-best-practices","links":{"html":"https://skillfed.io/platformplatform/PlatformPlatform/lingui-best-practices","md":"https://skillfed.io/platformplatform/PlatformPlatform/lingui-best-practices.md","repo":"https://github.com/platformplatform/PlatformPlatform"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":53,"language":"C#","last_updated":"2026-07-27","license":"MIT","name":"lingui-best-practices","publisher":"platformplatform","stars":433},"relations":{"similar":[{"id":"lingui/skills/lingui-best-practices"},{"id":"lingui/skills/migrate-i18next-to-lingui"},{"id":"lingui/skills/enhanced-message-context"},{"id":"platformplatform/PlatformPlatform/enhanced-message-context"},{"id":"yonatangross/orchestkit/i18n-date-patterns"},{"id":"d-kimuson/claude-code-viewer/i18n"},{"id":"crbnos/carbon/translate"},{"id":"vasilyu1983/AI-Agents-public/software-localisation"},{"id":"i18n-agent/i18nstack/i18n-review"},{"id":"i18n-agent/i18nstack/i18n-wrap"}]},"slug":{"owner":"platformplatform","repo":"PlatformPlatform","skill":"lingui-best-practices"},"version":"d3c1a9a2"}