From harness-claude
Documents the renderless (headless) component pattern in Vue, where components manage behavior and expose it via scoped slots while consumers control all markup.
How this skill is triggered — by the user, by Claude, or both
Slash command
/harness-claude:vue-renderless-componentsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
> Extract behavior into components that render nothing, delegating all rendering to the consumer via slots
Extract behavior into components that render nothing, delegating all rendering to the consumer via slots
<slot v-bind="slotProps"> to pass data and actions to the parent via scoped slots.<!-- RenderlessToggle.vue -->
<script setup>
import { ref } from 'vue';
const isOpen = ref(false);
const toggle = () => {
isOpen.value = !isOpen.value;
};
</script>
<template>
<slot :isOpen="isOpen" :toggle="toggle" />
</template>
<RenderlessToggle v-slot="{ isOpen, toggle }">.Renderless (headless) components separate behavior from presentation. The component owns the logic (state, side effects, event handling) and exposes it via scoped slots. The consumer owns the template. This is the Vue equivalent of React's render props pattern.
Trade-offs:
When NOT to use:
ref inline in <script setup> is clearerhttps://patterns.dev/vue/renderless-components
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeProvides patterns for Vue components including props validation with TypeScript, defaults, emits, slots, and provide/inject. Use when building reusable Vue components.
Teaches named, scoped, and dynamic slots in Vue for building flexible, composable component APIs with fallback content, slot checking, and TypeScript considerations.
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.