intlayer: Skill for Claude Code

Intlayer Remix Usage

Core Philosophy

Intlayer promotes Component-Level Content Declaration. Instead of a massive global translation file, content is declared in *.content.ts files adjacent to the views that use them.

Declare Content

File: src/views/home.content.ts

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

const content = {
  key: "home",
  content: {
    title: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;

Setup

• Remix 3

Register the intlayer() router middleware in createRouter(), before render(). It strips the locale prefix before route matching, so routes are declared once without a :locale segment.

Hooks

useIntlayer, useDictionary and useLocale read the request locale with no argument, anywhere downstream of the middleware (route handlers and remix/ui views).

import { useIntlayer, useLocale } from "remix-intlayer";

export const HomePage = () => () => {
  const { locale, availableLocales } = useLocale();
  const home = useIntlayer("home");

  return <h1>{home.title}</h1>;
};

• useIntlayer("home", "fr") overrides the request locale for one call.
• Remix JSX is not React: class is written as-is, and re-renders are triggered with handle.update().
• Outside of a request, the hooks fall back to the default locale.

Bundle Optimization

Read content fields by name (dot access or destructuring) so the build can purge and minify the dictionary. Never index content at runtime (content.statuses[status], use select()), and call useIntlayer in each child component instead of passing content as a prop. See the intlayer-bundle-optimization skill.

Compiler

The Intlayer Compiler can extract all your content keys from your components, using one CLI command (npx intlayer extract) or automatically at app build.