intlayer-usage
npx machina-cli add skill aymericzip/intlayer-skills/intlayer-usage --openclawIntlayer Usage
To use Intlayer effectively:
-
Retrieve Locales: Check
intlayer.config.{ts,js,json,json5,jsonc,cjs,mjs},.intlayerrcto see the configured locales. -
Declare Content: We recommend creating one content declaration file per component, located alongside the component file. This keeps translations close to the code.
-
Consume Content: Use the provided hooks and functions to access your content.
Common Packages:
intlayer: Core package for content declaration and utility functions.react-intlayer: React components and hooks (e.g.,useIntlayer).vite-intlayer: Vite plugin for integration.
-
CLI Commands: Useful commands for managing your content:
npx intlayer build: Build the dictionaries from your content declarations.
References
Source
git clone https://github.com/aymericzip/intlayer-skills/blob/main/skills/intlayer-usage/SKILL.mdView on GitHub Overview
Intlayer usage guides how to locate locale configs, declare content near components, and consume translations with the provided hooks and exports. It also covers the CLI workflow and core packages for i18n in modern projects.
How This Skill Works
You inspect locale config files like intlayer.config.{ts,js,json,json5,jsonc,cjs,mjs} and the .intlayerrc to see configured locales. Then you declare content one file per component beside the component, and consume translations via hooks (e.g., useIntlayer) and the core/exported APIs. Finally, use the CLI (npx intlayer build) to generate dictionaries for deployment.
When to Use It
- Starting a new project and setting up internationalization with Intlayer
- Adding i18n to an existing app and validating locale coverage
- Declaring content files per component to keep translations close to code
- Consuming translations in UI using React hooks like useIntlayer
- Building dictionaries with the CLI before deployment
Quick Start
- Step 1: Inspect intlayer.config.{ts,js,json,json5,jsonc,cjs,mjs} and .intlayerrc to see configured locales
- Step 2: Create a content declaration file next to each component and declare translations there
- Step 3: Run npx intlayer build to generate dictionaries for all locales
Best Practices
- Create one content declaration file per component, colocated with the component
- Review intlayer.config.* and .intlayerrc to confirm all locales are covered
- Use the core intlayer package for declarations and react-intlayer for hooks
- Keep declarations small and component-scoped to reduce drift
- Run npx intlayer build regularly to generate up-to-date dictionaries
Example Use Cases
- React app with per-component content files placed next to components for clear locality
- Vite-based project using vite-intlayer for fast HMR of translations
- CLI-driven workflow that builds dictionaries from declarations before deploy
- Inspecting locale config files to verify available locales during development
- Consuming translations in UI components via useIntlayer and exported APIs
