From harness-claude
Extracts and reuses stateful logic across Vue components using composables (use-prefixed functions). Replaces mixins with explicit, reactive code sharing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:vue-composables-patternThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Extract and reuse stateful logic across components using Vue composables
Extract and reuse stateful logic across components using Vue composables
<script setup> for readability and reuseuse (e.g., useWindowSize, useFetch).ref, reactive, computed, watch, and lifecycle hooks as needed.composables/ directory.// composables/useWindowSize.ts
import { ref, onMounted, onUnmounted } from 'vue';
export function useWindowSize() {
const width = ref(window.innerWidth);
const height = ref(window.innerHeight);
function update() {
width.value = window.innerWidth;
height.value = window.innerHeight;
}
onMounted(() => window.addEventListener('resize', update));
onUnmounted(() => window.removeEventListener('resize', update));
return { width, height };
}
Composables are the Vue 3 Composition API's answer to code reuse. They replace mixins, which suffered from namespace collisions, implicit dependencies, and unclear data sources. A composable is a plain function that uses Vue's reactivity primitives, making dependencies explicit.
Trade-offs:
setup() — they cannot be used conditionally or in loops (similar to React hooks rules)When NOT to use:
<script setup> until reuse is neededhttps://patterns.dev/vue/composables-pattern
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeProvides Vue 3 Composition API guidance on setup(), script setup syntax, ref vs reactive for scalable, maintainable apps.
Vue 3 conventions, Composition API patterns, SFC structure, reactivity, composables, and TypeScript integration. Invoke whenever task involves any interaction with Vue code — writing, reviewing, refactoring, debugging, or understanding .vue files, composables, and Vue component architecture.
Guides Vue.js 3 Composition API patterns, component architecture, reactivity, Pinia state management, Vue Router, and Nuxt SSR. Activates for Vue, Nuxt, Vite, or Pinia projects.