Intlayer solid
Intlayer Skills are a set of specialized instructions and workflows for AI agents to help them interact with Intlayer projects.
npx -y skills add aymericzip/intlayer-skills --skill intlayer-solidAssembled 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 SolidJS components. Use when the user asks to "setup SolidJS i18n", create a new translated component, use the "useIntlayer" hook in Solid, or configure providers.
SKILL.md
2.3 KB, as published. Nobody here has run it
Intlayer Solid 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 Solid 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 Solid component (e.g.,
MyComponent.tsx) using theuseIntlayerhook.
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
[!IMPORTANT] In Solid,
useIntlayerreturns an accessor function (e.g.,content()). You must call this function to access the reactive content.
import { useIntlayer } from "solid-intlayer";
const MyComponent = () => {
const content = useIntlayer("my-component");
return (
<div>
<h1>
{/* Return content */}
{content().text}
</h1>
{/* Return string (.value) */}
<img src={content().text.value} alt={content().text.value} />
</div>
);
};