intlayer: Skill for Claude Code

Intlayer Bundle Optimization

Doc

Configuration

import type { IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  dictionary: {
    importMode: "dynamic", // 'static' (default) | 'dynamic' | 'fetch'
  },
  build: {
    optimize: undefined, // auto: enabled in production builds only
    purge: true, // drop fields never read in source code
    minify: true, // rename field keys to short aliases (title → a)
  },
};

export default config;

• purge and minify do nothing when optimize is false.
• minify skips key renaming while editor.enabled is true, and for importMode: 'fetch' dictionaries.
• importMode: 'dynamic' ships only the current locale's JSON; it can also be set per dictionary.

Write Code the Analyzer Can Follow

Purge and minify rely on a static analysis of every useIntlayer / getIntlayer call. When a read cannot be followed, the build keeps the whole field or dictionary and warns:

• Dictionary <key> cannot be purged or minified: the content object escapes.
• Dictionary <key> partially minified. Opaque field: '<path>': a field is read with a dynamic key.

Read fields by name

// ✅ Destructure or use dot access
const { title, description } = useIntlayer("post");

Use select() instead of dynamic keys

// ❌ Opaque field: 'statuses' is kept whole, keys not minified
const { statuses } = useIntlayer("post");
<p>{statuses[post.status]}</p>;

// ✅ post.content.ts: publishStatus: select({ draft: "…", published: "…" })
const { publishStatus } = useIntlayer("post");
<p>{publishStatus(post.status)}</p>;

Same for numbers (enu()), booleans (cond()) and genders (gender()).

Call useIntlayer in each component

// ❌ Passing content as a prop: the whole dictionary is kept
const Post = () => {
  const content = useIntlayer("post");
  return <PostFooter content={content} />;
};

// ✅ Each component reads its own fields; the dictionary is loaded once
const PostFooter = () => {
  const { footer } = useIntlayer("post");
  return <footer>{footer}</footer>;
};