intlayer react

    1

    Automate React internationalization using Intlayer for component-level content declarations and type-safe hooks.

    Free

    Security scanned

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+22 more

    intlayer react

    Example session with this skill installed

    Add i18n to a Navbar component with 'Home' and 'About' links in English and French using Intlayer.

    • Read your context and instructions
    • Compiled the intlayer react
    • Generated the UI component

    I have created the content declaration and the React implementation for your Navbar component using Intlayer's co-location pattern.

    Navbar Implementation

    File: src/components/Navbar/navbar.content.ts

    import { t, type Dictionary } from "intlayer";

const navbarContent = {
  key: "navbar",
  content: {
    home: t({
      en: "Home",
      fr: "Accueil",
    }),
    about: t({
      en: "About",
      fr: "À propos",
    }),
  },
} satisfies Dictionary;

export default navbarContent;

    File: src/components/Navbar/Navbar.tsx

    import React from "react";
import { useIntlayer } from "react-intlayer";

export const Navbar: React.FC = () => {
  const { home, about } = useIntlayer("navbar");

  return (
    <nav className="flex gap-4 p-4 border-b">
      <a href="/" className="hover:text-blue-600">
        {home}
      </a>
      <a href="/about" className="hover:text-blue-600">
        {about}
      </a>
    </nav>
  );
};

    Next steps

    1. Run npx intlayer build to compile the new dictionary keys.
    2. Ensure Navbar.tsx and navbar.content.ts are in the same directory.
    3. Wrap your application root with IntlayerProvider if not already present.

    Navbar.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

    Connects securely to your tools. The creator never sees your data.

    About this skill

    Managing large JSON translation files in React projects leads to merge conflicts, stale keys, and poor developer experience. This skill automates the implementation of Intlayer, a framework that moves internationalization directly into the component folder. It eliminates global dictionary management by generating localized content declarations and React implementation code.

    What it does

    • Content declaration generation creates *.content.ts files with type-safe dictionaries using the t() function for multiple locales.
    • Hook implementation writes React components utilizing useIntlayer to consume localized data with full TypeScript support.
    • Environment configuration provides setup instructions for Vite, Create React App, React Router v7, Tanstack Start, and React Native.
    • Dictionary mapping ensures unique keys are correctly mapped between declarations and component logic.
    • Utility integration configures specialized tools like MarkdownRenderer, date/number formatters, and locale switchers.

    How it works

    1. Define Content: Specify the text and locales needed for a specific UI element.
    2. Generate Declaration: The skill creates a myComponent.content.ts file adjacent to your component.
    3. Inject Logic: Use the useIntlayer hook within your React component to access the defined keys.
    4. Compile: Run the Intlayer compiler to extract keys and sync translations across the application.

    Frameworks & tools

    Specifically designed for React ecosystems including Vite, Expo, Astro, and Tanstack Start. It requires the intlayer and react-intlayer packages.

    Why this beats prompting it yourself

    Generic AI often defaults to outdated i18next patterns or manual JSON structures. This skill enforces Intlayer's component-level philosophy, ensuring your translations are co-located, type-safe, and ready for the Intlayer compiler without manual boilerplate.

    Use cases

    • Migrating a hardcoded React component to a multi-language setup.
    • Scaffolding localized components in React Native or Expo mobile apps.
    • Configuring internationalization for modern SSR frameworks like Tanstack Start.
    • Implementing localized Markdown rendering or complex data formatters.

    Known limitations

    Requires the @intlayer/mcp server for full automation. You must have a base Intlayer configuration file in your project root for the compiler to function correctly.

    How to use

    Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 13 days ago

    • Free to download with an account

    Requires

    intlayer
    Node.js

    Listed13 days ago
    Updated4 days ago

    What's inside

    Frequently Asked Questions