vue-best-practices

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.

Stars 3

Forks 0

Install this agent skill to your Project

npx add-skill https://github.com/Dwsy/agent/tree/main/skills/vue-best-practices

SKILL.md

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

Search AI Tools