vue-best-practices
Vue Best Practices Workflow
Use this skill as an instruction set. Follow the workflow in order unless the user explicitly asks for a different order.
Core Principles
- Keep state predictable: one source of truth, derive everything else.
- Make data flow explicit: Props down, Events up for most cases.
- Favor small, focused components: easier to test, reuse, and maintain.
- Avoid unnecessary re-renders: use computed properties and watchers wisely.
- Readability counts: write clear, self-documenting code.
1) Confirm architecture before coding (required)
- Default stack: Vue 3 + Composition API +
<script setup lang="ts">. - If the project explicitly uses Options API, load
vue-options-api-best-practicesskill if available. - If the project explicitly uses JSX, load
vue-jsx-best-practicesskill if available.
1.1 Must-read core references (required)
More from xingyu4j/skills
vben
Vue Vben Admin monorepo 项目专家。适用于 Vben Admin 项目中的页面开发、组件使用、路由配置、API 定义、状态管理、适配器模式、国际化、权限控制等任务。支持所有应用变体(web-antd、web-ele、web-naive)和共享包。
26ruoyi-vue-pro
芋道源码 ruoyi-vue-pro 后端框架专家。适用于 Spring Boot 单体项目中的模块开发、Controller/Service/Mapper/DO/VO 编写、MyBatis Plus 数据访问、权限控制、多租户、数据权限、Excel 导出、定时任务等后端开发任务。
17vue
Vue 3 Composition API、script setup 宏、响应式系统和内置组件。适用于编写 Vue SFC、defineProps/defineEmits/defineModel、侦听器或使用 Transition/Teleport/Suspense/KeepAlive。
16using-superpowers
Use when starting any conversation - establishes how to find and use skills, requiring Skill tool invocation before ANY response including clarifying questions
15web-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".
14pinia
Pinia 官方 Vue 状态管理库,类型安全且可扩展。适用于定义 store、处理 state/getters/actions 或在 Vue 应用中实现 store 模式。
14