Intlayer svelte

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

Intlayer Skills are a set of specialized instructions and workflows for AI agents to help them interact with Intlayer projects.

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.

What its author says it does

Copied from the file, not written here

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.

SKILL.md

2.3 KB, 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>