vue-best-practices
💡 Summary
A skill for applying best practices in Vue 3 and TypeScript to enhance component development.
🎯 Target Audience
🤖 AI Roast: “Powerful, but the setup might scare off the impatient.”
Risk: Low. Review: outbound network access (SSRF, data egress). Run with least privilege and audit before enabling in production.
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. license: MIT metadata: author: hyf0 version: "8.0.0"
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
Pros
- Enhances code quality
- Improves type safety
- Facilitates better component design
- Supports modern Vue features
Cons
- May require learning curve for new users
- Could introduce complexity in simple projects
- Dependency on specific tooling
- Might not cover all edge cases
Related Skills
nuxt-skills
S“It's essentially a well-organized cheat sheet that turns your AI assistant into a Nuxt framework parrot.”
pytorch
S“It's the Swiss Army knife of deep learning, but good luck figuring out which of the 47 installation methods is the one that won't break your system.”
agno
S“It promises to be the Kubernetes for agents, but let's see if developers have the patience to learn yet another orchestration layer.”
Disclaimer: This content is sourced from GitHub open source projects for display and rating purposes only.
Copyright belongs to the original author hyf0.