From harness-claude
Applies Vue slots pattern with named, scoped, and dynamic slots to build flexible composable components like Cards, Modals, tables, and lists.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Use named, scoped, and dynamic slots to build flexible, composable component APIs
Provides patterns for Vue components including props validation with TypeScript, defaults, emits, slots, and provide/inject. Use when building reusable Vue components.
Implements Vue renderless components to extract behavior like toggles, fetches, or form validation, delegating all rendering and markup to consumers via scoped slots. For component libraries or Vue 2 patterns.
Enforces Vue 3 best practices with Composition API, <script setup>, and TypeScript. Covers reactivity gotchas, computed properties, performance optimizations, SSR, Volar, vue-tsc for .vue files, Vue Router, Pinia, Vite projects.
Share bugs, ideas, or general feedback.
Use named, scoped, and dynamic slots to build flexible, composable component APIs
<slot> for the default slot, <slot name="header"> for named slots.<slot :item="item">.<template #slotName="{ item }">.<slot> tags for when the consumer does not fill the slot.<!-- Card.vue -->
<template>
<div class="card">
<div class="header"><slot name="header">Default Header</slot></div>
<div class="body"><slot /></div>
<div class="footer"><slot name="footer" /></div>
</div>
</template>
<!-- Consumer -->
<Card>
<template #header><h2>Custom Title</h2></template>
<p>Body content goes in the default slot</p>
</Card>
$slots to check if a slot was provided: v-if="$slots.header".<template #[dynamicSlotName]> for runtime-determined slots.Slots are Vue's content distribution mechanism, equivalent to React's children and render props. They allow parent components to inject content into child component templates. Named slots organize multiple content areas, and scoped slots pass data back to the parent for custom rendering.
Trade-offs:
<template #name> blocksdefineSlots()When NOT to use:
https://patterns.dev/vue/slots-pattern