Intlayer svelte

Skill aymericzip/intlayer-skills/skills/intlayer-svelte

Integrates Intlayer internationalization with Svelte and SvelteKit applications. Use when the user asks to "setup Svelte i18n", create a new translated component, use the "useIntlayer" store, or configure providers.From its SKILL.md

Install

npx -y skills add aymericzip/intlayer-skills --skill intlayer-svelte

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.3 KB, 468 tokens by cl100k_base, as published. Nobody here has run it

Intlayer Svelte 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 Svelte components that use them.

Workflow

To create a translated component, you need two files:

Declaration: A content file (e.g., myComponent.content.ts) defining the dictionary.
Implementation: A Svelte component (e.g., MyComponent.svelte) using the useIntlayer store.

1. Declare Content

Create a content file using t() for translations. File: src/components/MyComponent/myComponent.content.ts

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

const content = {
  // The 'key' must be unique and matches what you pass to useIntlayer()
  key: "my-component",
  content: {
    text: t({
      en: "Welcome",
      fr: "Bienvenue",
      es: "Hola",
    }),
  },
} satisfies Dictionary;

export default content;

Setup

useIntlayer Hook

In Svelte, useIntlayer returns a store. You must use the $ prefix to access its value.

<script>
  import { useIntlayer } from "svelte-intlayer";
  const content = useIntlayer("my-component");
</script>

<div>
  <h1>
    {/* Return content */}
    {$content.text}
  </h1>
  {/* Return string (.value) */}
  <div aria-label={$content.text.value}></div>
</div>

References

What ships with it: 5 files

67.3 KB alongside SKILL.md

references/

environment_sveltekit.md20.6 KB
environment_vite-and-svelte.md21.1 KB
packages_intlayer_exports.md10.9 KB
packages_svelte-intlayer_exports.md4.0 KB

LICENCE.md10.7 KB

Gives 0 of the 12 instructions most ui components skills give in 468 tokens

Counted across 293 of the 305 authors here whose files we hold, read 2026-09-06

Start with a --design-system search before designingin 17 of 293, across 15 files
Ensure 4.5:1 minimum text contrastin 16 of 293, across 15 files
Verify the pre-delivery checklist before delivering UI codein 16 of 293, across 14 files
Use SVG icons instead of emojisin 15 of 293, across 14 files
Keep touch targets at least 44 pointsin 14 of 293, across 12 files
Check page override files before master rulesin 13 of 293, across 11 files
Supplement with domain searches as neededin 13 of 293, across 11 files
Add cursor-pointer to all clickable elementsin 12 of 293
Use CSS variables for themingin 11 of 293, across 7 files
Use semantic color tokens, not raw hexin 11 of 293, across 8 files
Meet WCAG AA color contrastin 11 of 293, across 7 files
Default stack to html-tailwind when unspecifiedin 10 of 293

Said here and by no other author read

Declare content in content files adjacent to components
Use t() for translations
Use the useIntlayer store in components
Access store values with the $ prefix
Give each dictionary a unique key
Consult the SvelteKit or Vite environment setup references

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.