ReddRadar
Agent skill
router
Integrate @inkcre/web-design with Vue Router using the adapter pattern.
Install this agent skill to your Project
npx add-skill https://github.com/InKCre/design/tree/main/packages/web-design/agent-skills/router
SKILL.md
Router Integration
Use this skill when integrating @inkcre/web-design components with Vue Router.
Overview
Some components (like InkHeader) need router capabilities. The design system uses a provider pattern that works with any router implementation.
Interface
import type { ComputedRef, InjectionKey } from "vue";
export interface InkRouter {
/** Current path (reactive) */
currentPath: ComputedRef<string>;
/** Current page name */
currentName: ComputedRef<string | null>;
}
export const INK_ROUTER_KEY: InjectionKey<InkRouter> = Symbol("INK_ROUTER");
Setup
- Create a router adapter:
// router-adapter.ts
import { computed } from "vue";
import type { Router, RouteLocationNormalizedLoaded } from "vue-router";
import type { InkRouter } from "@inkcre/web-design";
export function createInkRouterAdapter(
router: Router,
route: RouteLocationNormalizedLoaded
): InkRouter {
return {
currentPath: computed(() => route.path),
currentName: computed(() => route.name),
};
}
- Provide in your app:
// App.vue
<script setup lang="ts">
import { INK_ROUTER_KEY } from "@inkcre/web-design";
import { createInkRouterAdapter } from "./router-adapter";
import { useRoute, useRouter } from "vue-router";
provide(
INK_ROUTER_KEY,
createInkRouterAdapter(useRouter(), useRoute())
);
</script>
Usage in Components
import { useOptionalRouter } from "@inkcre/web-design";
const router = useOptionalRouter();
if (router) {
console.log(router.currentPath.value);
}
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
InKCre/design
i18n
Integrate @inkcre/web-design with vue-i18n for internationalization.
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.
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?