Agent Skills: vue-best-practices

MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.

UncategorizedID: aiskillstore/marketplace/vue-best-practices

Install this agent skill to your local

pnpm dlx add-skill https://github.com/aiskillstore/marketplace/tree/HEAD/skills/hyf0/vue-best-practices

Skill Files

Browse the full folder contents for vue-best-practices.

Download Skill

Loading file tree…

skills/hyf0/vue-best-practices/SKILL.md

Skill Metadata

Name
vue-best-practices
Description
Vue 3 and Vue.js best practices for TypeScript, vue-tsc, and Volar. This skill should be used when writing, reviewing, or refactoring Vue components to ensure correct typing patterns. Triggers on tasks involving Vue components, props extraction, wrapper components, template type checking, or Volar configuration.

Capability Rules

| Rule | Keywords | Description | |------|----------|-------------| | extract-component-props | get props type, wrapper component, extend props, inherit props, ComponentProps | Extract types from .vue components | | vue-tsc-strict-templates | undefined component, template error, strictTemplates | Catch undefined components in templates | | fallthrough-attributes | fallthrough, $attrs, wrapper component | Type-check fallthrough attributes | | strict-css-modules | css modules, $style, typo | Catch CSS module class typos | | data-attributes-config | data-, strictTemplates, attribute | Allow data- attributes | | volar-3-breaking-changes | volar, vue-language-server, editor | Fix Volar 3.0 upgrade issues | | module-resolution-bundler | cannot find module, @vue/tsconfig, moduleResolution | Fix module resolution errors | | define-model-update-event | defineModel, update event, undefined | Fix model update errors | | with-defaults-union-types | withDefaults, union type, default | Fix union type defaults | | deep-watch-numeric | watch, deep, array, Vue 3.5 | Efficient array watching | | vue-directive-comments | @vue-ignore, @vue-skip, template | Control template type checking | | vue-router-typed-params | route params, typed router, unplugin | Fix route params typing |

Efficiency Rules

| Rule | Keywords | Description | |------|----------|-------------| | hmr-vue-ssr | hmr, ssr, hot reload | Fix HMR in SSR apps | | pinia-store-mocking | pinia, mock, vitest, store | Mock Pinia stores |

Reference