Generate Robust Vue.js Components

This skill is expert Vue.js development specializing in building robust, scalable, maintainable Vue components, with deep knowledge of Vue 3's Composition API, TypeScript integration, and modern ecosystem tools. Its core principles favor Composition API and <script setup> syntax for all new components, grouping related reactive state and logic together, and extracting reusable logic into composables. Its TypeScript integration requires proper interfaces for props and emits, generic components where appropriate, and comprehensive type safety via Vue's built-in TypeScript utilities. Its component design follows single responsibility, reusability, proper prop validation with defaults, and semantic HTML with ARIA attributes. It demonstrates a full component structure template combining typed props with defaults via withDefaults, typed emits, computed class bindings driven by size/variant/state, named and scoped slots, and defineExpose for exposing imperative methods (updateValue, focus, blur) to template refs.

Use this skill when building Vue 3 components that need real type safety, composability, and accessibility rather than untyped Options API components. It covers generic components using TypeScript's generic syntax for type-safe list/select components bound to arbitrary item shapes, composable integration pulling in useFormValidation and useAsyncData composables for validation and data fetching, lazy-loaded async components with configurable loading/error components and delay/timeout, and virtual scrolling for large lists using a spacer element and translateY-positioned visible items. It covers component testing with Vue Test Utils and Vitest, asserting rendered classes and emitted events. It is not meant for components without proper cleanup or accessibility - its best practices explicitly require keyboard navigation and ARIA attributes, proper lifecycle cleanup, and Teleport for modals and overlays rather than DOM-order-dependent overlay rendering.

<script setup lang="ts" generic="T extends Record<string, any>">
interface Props {
  items: T[]
  keyField: keyof T
  displayField: keyof T
  modelValue?: T
}

const props = defineProps<Props>()
const emit = defineEmits<{
  'update:modelValue': [value: T]
}>()
</script>

Given a component requirement, the skill produces a typed Vue 3 SFC like the generic component above, a full component structure with typed props/emits/computed classes and scoped-style variants, composable-integrated components pulling in shared logic, lazy-loaded async component wrappers, virtual-scrolling list templates, and Vitest test files asserting props-driven classes and emitted events.

Vue.js developers building typed, accessible, performant components on Vue 3's Composition API who want concrete patterns for generics, composables, and virtual scrolling rather than assembling them from scratch. It suits teams that want testing (Vue Test Utils plus Vitest) and accessibility (ARIA, keyboard navigation) built into every component from the start, not added as an afterthought.