AgentSkillsCN

vue-best-practices

Vue 3 与 Vue.js 的 TypeScript 开发最佳实践,配合 vue-tsc 与 Volar 使用。在编写、审查或重构 Vue 组件时,应优先调用此技能,以确保类型注解的规范性与准确性。当涉及 Vue 组件开发、props 提取、封装组件、模板类型检查,或 Volar 配置等任务时,此技能将发挥重要作用。

SKILL.md
--- frontmatter
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.
category: frontend-development
tags:
  - vue
  - vue3
  - typescript
  - best-practices
  - volar
  - component-design
license: MIT
metadata:
  author: hyf0
  version: "8.0.0"

Capability Rules

RuleKeywordsDescription
extract-component-propsget props type, wrapper component, extend props, inherit props, ComponentPropsExtract types from .vue components
vue-tsc-strict-templatesundefined component, template error, strictTemplatesCatch undefined components in templates
fallthrough-attributesfallthrough, $attrs, wrapper componentType-check fallthrough attributes
strict-css-modulescss modules, $style, typoCatch CSS module class typos
data-attributes-configdata-*, strictTemplates, attributeAllow data-* attributes
volar-3-breaking-changesvolar, vue-language-server, editorFix Volar 3.0 upgrade issues
module-resolution-bundlercannot find module, @vue/tsconfig, moduleResolutionFix module resolution errors
define-model-update-eventdefineModel, update event, undefinedFix model update errors
with-defaults-union-typeswithDefaults, union type, defaultFix union type defaults
deep-watch-numericwatch, deep, array, Vue 3.5Efficient array watching
vue-directive-comments@vue-ignore, @vue-skip, templateControl template type checking
vue-router-typed-paramsroute params, typed router, unpluginFix route params typing

Efficiency Rules

RuleKeywordsDescription
hmr-vue-ssrhmr, ssr, hot reloadFix HMR in SSR apps
pinia-store-mockingpinia, mock, vitest, storeMock Pinia stores

Reference