vue-best-practices
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
More from devbyray/hackernews-clone
vue
Vue.js progressive JavaScript framework. Use when building Vue components, working with reactivity (ref, reactive, computed, watch), or implementing Vue Composition API patterns.
1vite
Vite next-generation frontend build tool with fast HMR and optimized builds. Use when configuring Vite, adding plugins, working with dev server, or building for production.
1frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
1skill-creator
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
1web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
1