Agent Skills for the Vue ecosystem, written from current docs, issues, and releases
Indexed skills
33
Skill groups
1
GitHub stars
180
Forks
8
Floating UI for Vue (@floating-ui/vue@2.0.1). ALWAYS use when writing code importing "@floating-ui/vue" or using useFloating, arrow, floatingStyles, or autoUpdate. Consult for middleware setup, anchoring, virtual elements, and v1 to v2 migration. Vue 3.3+ only.
Use whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers, config, schema types, expression compiler). Provides correct 2.1.x API signatures, common-task examples, behavioral rules, and version limits.
ALWAYS load when writing or debugging code that imports "motion-v" (Motion for Vue, motion-vue). Covers the motion component, AnimatePresence, variants, gestures, layout, scroll, motion values, the v-motion directive, and the Nuxt module for version 2.4.4. Provides API facts, recipes, best practices, and migration notes.
Data fetching layer for Vue built on Pinia. Use when writing, debugging, or reviewing code that imports @pinia/colada (pinia colada), including useQuery, useMutation, useInfiniteQuery, defineQuery, query cache invalidation, optimistic updates, plugins, SSR, or migrating from older versions. Provides current 1.4.x APIs, patterns, and migration rules.
Use when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library. Covers pinia 4.x: option and setup stores, state, getters, actions, subscriptions, plugins, SSR hydration, testing, Options API map helpers, and v4 nostics diagnostics. Provides version-correct API usage and migration notes from v2 and v3.
Use when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3). Provides setup with the required PrimeUI license key, deprecated API replacements, compound component usage, and design token theming.
Build, configure, and debug apps with the Quasar framework (`quasar` npm package, v2.33.1). Use when writing, reviewing, or debugging code that imports "quasar" or "quasar/wrappers", configuring Quasar with Vite, Vitest, Storybook, UMD, or Quasar CLI, styling with Quasar Sass variables, or upgrading between Quasar v2 releases.
Vue port of Radix UI Primitives (headless, accessible, unstyled). ALWAYS use when writing code that imports "reka-ui" or "reka-ui/namespaced", building components with Reka UI primitives, or debugging and reviewing Reka UI usage. Provides version-specific API rules, composition patterns, and styling guidance.
Use when adding, configuring, or debugging shadcn-vue in a Vue or Nuxt project. Covers shadcn-vue CLI commands (init, add, apply, view, search, docs, info, diff, migrate, build, mcp), components.json, styles, presets, fonts, icon libraries, registries, the MCP server, and the programmatic API. Gives exact flags and config keys for shadcn-vue 2.8.2.
Use when writing or debugging Vue code that imports @tanstack/ai-vue. Covers useChat, createChatHook, the generation composables (image, audio, speech, video, transcription, summarize), useAudioRecorder, useByok, useWebMCPTools, and the @tanstack/ai-vue/ui and /byok subpaths. Provides current API shapes, reactive-state rules, and version limits for @tanstack/ai-vue 0.24.x.
Use when writing, reviewing, or debugging code that imports @tanstack/vue-form (TanStack Form for Vue). Covers the 1.33.x API, including useForm, form.Field, form.FormGroup, form.Subscribe, form.useSelector, validators with Standard Schema, onDynamic with revalidateLogic, and array fields with mode="array". Result, forms built on current, non-deprecated Vue APIs with correct reactivity.
Hooks for managing, caching and syncing asynchronous and remote data in Vue. ALWAYS use when writing code importing "@tanstack/vue-query". Consult for debugging, best practices, or modifying @tanstack/vue-query, tanstack/vue-query, tanstack vue-query, tanstack vue query, query.
Use when writing, debugging, or refactoring code that imports @tanstack/vue-router (TanStack Router for Vue). Covers setup, file-based and code-based routes, composables returning Ref, Link, loaders, search params, SSR, and v1.170.x deprecations.
Vue adapter for TanStack Store, a framework agnostic type-safe store. ALWAYS use when writing code importing "@tanstack/vue-store" in a Vue app. Covers the useSelector, useAtom, useStore (deprecated), and _useStore hooks, the re-exported @tanstack/store core API (createStore, createAtom, createAsyncAtom, batch, flush, shallow), debugging, best practices, and migration between @tanstack/vue-store versions.
Use when writing, migrating, or debugging code that imports @tanstack/vue-table (TanStack Table v9 for Vue). Covers useTable with explicit tableFeatures, reactive ref/computed data, FlexRender rendering, atoms-based state, createTableHook conventions, and the v8-to-v9 breaking changes.
Headless UI for virtualizing scrollable elements in Vue. Use when writing, reviewing, or debugging code that imports @tanstack/vue-virtual, calls useVirtualizer or useWindowVirtualizer, or virtualizes lists, grids, masonry, window-scrolled content, or chat feeds in Vue. Provides version-accurate adapter rules, Virtualizer options and methods, and rendering recipes for @tanstack/vue-virtual 3.13.x on @tanstack/virtual-core 3.17.x.
Declarative Three.js using Vue components. ALWAYS use when writing code that imports "@tresjs/core" or touches TresCanvas, Tres components, useLoop, useLoader, useTres, useTresContext, TresPortal, pointer events, render modes, or TresJS debugging, upgrades, and performance work.
Full-stack <head> manager for Vue (@unhead/vue 3.x). Use when writing, reviewing, or debugging code that imports @unhead/vue, calls useHead, useSeoMeta, useHeadSafe, useScript, injectHead, createHead, or sets up Unhead SSR / streaming SSR / build plugins in a Vue app.
Vue 3 components for the Unovis data visualization framework, @unovis/vue 1.7.0. Use when writing, debugging, or updating code that imports @unovis/vue or renders Vis* components such as VisXYContainer, VisSingleContainer, VisArea, VisLine, VisStackedBar, VisCrosshair, or VisTooltip. Covers the component catalog, props, events, tooltips, colors, patterns, SSR, and the 1.7.0 API changes.
Use when writing, reviewing, or debugging Vue.js forms that import vee-validate (useForm, defineField, useField, useFieldArray, Form, Field, FieldArray, ErrorMessage). Provides correct v4.15.x Composition API and component usage, validation schema patterns, typed-schema integration, version-specific API changes since 4.9, deprecations, and known pitfalls.
Use when writing, configuring, or debugging code that imports "vitepress", when running vitepress CLI commands, editing .vitepress/config or theme files, tuning markdown or default theme options, or migrating a VitePress site. Provides the vitepress@1.6.4 API surface, config reference, theme reference, CLI usage, and v1 migration notes.
A user-empowering data visualization Vue 3 components library (69 components) for eloquent data storytelling. ALWAYS use when writing code importing "vue-data-ui". Consult for component choice, config, theming, slots, tooltips, exports, SSR, debugging, or modifying vue-data-ui, vue data ui.
Use when writing or debugging code that imports vue-i18n (Vue 3 internationalization). Covers createI18n, useI18n, message syntax, i18n-t/i18n-n/i18n-d components, pluralization, datetime and number formatting, TypeScript schemas, lazy loading, bundle optimization, and v10/v11/v12 migration.
ALWAYS use when writing code that imports "vue-router", "vue-router/vite", "vue-router/auto-routes", or "vue-router/experimental". Consult for debugging, best practices, or modifying vue-router, vue router, router, file-based routing, typed routes, data loaders.
Build, debug, and modernize UI with Vue 3.6. Use when editing *.vue files, writing components or composables, or working with code that imports "vue". Covers script setup, reactivity, Vapor Mode, SSR, and version-specific API changes from 3.4 through 3.6.0-beta.17.
ALWAYS use when writing, debugging, or reviewing code that imports "@vue/test-utils" or mentions vue test-utils, VTU, mount, shallowMount, findComponent, wrapper queries, or migrating from Vue Test Utils v1. Provides the current API surface, mounting options, wrapper methods, and testing recipes for @vue/test-utils 2.5.1 on Vue 3.
Vue Material Component Framework. Use when writing, debugging, or configuring code that imports vuetify v4.x. Covers createVuetify setup, components and labs, composables, theming, icons, dates and locale, styles and SASS variables, treeshaking, and v3 to v4 migration.
Renderless components and directives from @vueuse/components 15.x (VueUse). Use when writing, converting, or debugging code that imports @vueuse/components, using Use*/On* components or v* directives in Vue 3 templates, or mapping VueUse composables to component or directive usage. Provides props, slot data shapes, emits, directive binding syntax, and version limits.
Collection of essential Vue Composition Utilities. ALWAYS use when writing code that imports "@vueuse/core" or "@vueuse/shared" (VueUse). Provides the v15.0.0 API surface, v14 to v15 migration rules, new composables (useWebMCP, useTemporalNow, useLiveAnnouncer, useElementOverflow), deprecations, and configuration best practices.
Integration wrappers for utility libraries in @vueuse/integrations v15. ALWAYS use when writing code importing "@vueuse/integrations" or any of its composables (useAxios, useSortable, useFocusTrap, useCookies, useIDBKeyval, useFuse, useChangeCase, useDrauu, useJwt, useNProgress, useQRCode, useAsyncValidator). Consult for debugging, best practices, or modifying @vueuse/integrations, vueuse integrations, vueuse.
Math composables for Vue 3 from @vueuse/math. Use when writing or debugging code that imports "@vueuse/math", or when clamping, projecting, rounding, averaging, summing, or combining reactive numbers in Vue.
Use when writing, reviewing, or debugging code that imports @vueuse/motion (v-motion directive, Motion/MotionGroup components, useMotion, useSpring, presets, Nuxt module). Gives correct v3.x API usage, variants and transition syntax, SSR behavior, and setup for Vue 3 and Nuxt 3.
Use when writing, reviewing, or debugging code that imports from "@vueuse/shared" (or its utilities re-exported by "@vueuse/core"). Provides the v15.0.0 API surface, debounce and throttle defaults, watch variants, state-sharing patterns, and v14 to v15 migration rules.
The badge links readers to this page. It shows the skilld mark and no counts, and it follows the reader's light or dark GitHub theme.
<a href="https://skilld.dev/gh/skilld-dev/vue-ecosystem-skills">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://skilld.dev/b/skilld-dev/vue-ecosystem-skills?theme=dark">
<source media="(prefers-color-scheme: light)" srcset="https://skilld.dev/b/skilld-dev/vue-ecosystem-skills?theme=light">
<img alt="Skill repository on skilld.dev" src="https://skilld.dev/b/skilld-dev/vue-ecosystem-skills?theme=light">
</picture>
</a>