ReddRadar
Agent skill
i18n
Integrate @inkcre/web-design with vue-i18n for internationalization.
Install this agent skill to your Project
npx add-skill https://github.com/InKCre/design/tree/main/packages/web-design/agent-skills/i18n
SKILL.md
Internationalization (i18n)
Use this skill when setting up internationalization for @inkcre/web-design components.
Overview
The design system supports i18n through a provider pattern compatible with vue-i18n.
Interface
import type { Ref, InjectionKey } from "vue";
export interface InkI18n {
t: (key: string) => string;
locale: Ref<string>;
}
export const INK_I18N_KEY: InjectionKey<InkI18n> = Symbol("INK_I18N");
Setup
- Install vue-i18n:
pnpm add vue-i18n
- Extend provided locales:
// locales/en.ts
import { en } from "@inkcre/web-design/locales";
export default {
...en,
// Your custom translations
}
- Configure vue-i18n:
// locales/index.ts
import { createI18n } from "vue-i18n";
import en from "./en";
import zhCN from "./zhCN";
const i18n = createI18n({
legacy: false,
locale: "en",
fallbackLocale: "en",
messages: { en, zhCN },
});
export default i18n;
- Provide to design system:
// App.vue
<script setup lang="ts">
import { INK_I18N_KEY } from "@inkcre/web-design";
import i18n from "./locales";
provide(INK_I18N_KEY, {
t: i18n.global.t,
locale: i18n.global.locale,
});
</script>
Usage
Components will automatically use translations if i18n is provided. They fall back to English if not configured.
import { useOptionalI18n } from "@inkcre/web-design";
const i18n = useOptionalI18n();
if (i18n) {
console.log(i18n.t('common.save'));
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
InKCre/design
styling
Use @inkcre/web-design styling system with design tokens, SCSS mixins, and theming.
InKCre/design
components
Use @inkcre/web-design Vue 3 components. Includes all 22 components with props, events, and usage examples.
InKCre/design
best-practices
Best practices for developing with @inkcre/web-design including coding guidelines and accessibility.
InKCre/design
router
Integrate @inkcre/web-design with Vue Router using the adapter pattern.
ahoybuoy/buoy
clean-sync-conflicts
Use when git status shows .sync-conflict-* files, when starting a conversation with untracked sync conflict files, or when the user mentions Syncthing conflicts in the repo
xuanyustudio/LocalMiniDrama
openclaw-skill
Didn't find tool you were looking for?