菜单
"Vue 3 前端开发专家。当项目涉及 Vue 3 Composition API、Pinia 状态管理、Vue Router 4、Element Plus 组件库时自动触发。支持中文触发：Vue组件、页面开发、前端问题、组件封装、表单校验。"
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
| name | expert-vue3 |
| description | "Vue 3 前端开发专家。当项目涉及 Vue 3 Composition API、Pinia 状态管理、Vue Router 4、Element Plus 组件库时自动触发。支持中文触发：Vue组件、页面开发、前端问题、组件封装、表单校验。" |
为基于 Vue 3 生态的前端项目提供专家级指导，包括：Composition API 最佳实践、Pinia 状态管理、Vue Router 4 配置、Element Plus / Ant Design Vue 组件深度使用、前端性能优化等。
核心能力:
Provides expert-level guidance for Vue 3 ecosystem frontend projects, including: Composition API best practices, Pinia state management, Vue Router 4 configuration, Element Plus / Ant Design Vue component deep usage, and frontend performance optimization.
<script setup> 语法糖ref()，对象/数组用 reactive()defineExpose()defineProps<T>() 类型声明defineEmits<T>() 类型声明<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
// Props & Emits
const props = defineProps<{ projectId: number }>();
const emit = defineEmits<{ (e: 'refresh'): void }>();
// Reactive state
const loading = ref(false);
const formRef = ref<FormInstance>();
const formData = reactive({ name: '', status: 'draft' });
// Computed
const isSubmittable = computed(() => formData.name.length > 0);
// Methods
async function handleSubmit() {
await formRef.value?.validate();
// ...
}
// Lifecycle
onMounted(() => { loadData(); });
</script>
src/stores/ 目录use{Module}Store（如 useUserStore）pinia-plugin-persistedstatesrc/router/ 目录() => import('@/views/xxx/index.vue')<keep-alive> + activated() 钩子permission.js 中管理src/views/{module}/components/src/components/<script setup> syntax sugar uniformlyref() for primitives, reactive() for objects/arraysdefineExpose()defineProps<T>()defineEmits<T>()src/stores/ directoryuse{Module}Store (e.g., useUserStore)pinia-plugin-persistedstate| 问题 | 原因 | 解决方案 |
|---|---|---|
| 响应式丢失 | 对 reactive 对象进行了解构 | 使用 toRefs() 解构，或改用 ref() |
| 表单校验不触发 | FormItem 的 prop 与 formData 字段名不匹配 | 确保 prop 与数据绑定路径完全一致 |
| keep-alive 不缓存 | 组件 name 与路由 meta.title 不匹配 | 确保组件 defineOptions({ name: 'XxxPage' }) |
| 列表页返回后数据未刷新 | 未实现 activated() 钩子 | 在 onActivated() 中重新请求数据 |
| Element Plus 样式丢失 | 按需导入配置不完整 | 检查 unplugin-auto-import 和 unplugin-vue-components 配置 |
| 跨组件状态不同步 | 未使用 Pinia 管理共享状态 | 将共享状态迁移到 Pinia Store |
| Issue | Cause | Solution |
|---|---|---|
| Reactivity lost | Destructured reactive object | Use toRefs() for destructuring, or use ref() |
| Form validation not triggering | FormItem prop doesn't match formData field name | Ensure prop matches data binding path exactly |
| keep-alive not caching | Component name doesn't match route meta.title | Set defineOptions({ name: 'XxxPage' }) |
| List page data not refreshed on return | activated() hook not implemented | Request data again in onActivated() |
<el-table-v2>min-width 而非 width<template #default="scope"> 避免 formatterconst rules = reactive<FormRules>({
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
{ min: 2, max: 50, message: '长度 2-50 个字符', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择状态', trigger: 'change' }
]
});
v-model:visible 控制显隐formRef.value?.resetFields()watch(visible) 触发formRef.value?.validate()onActivated() 钩子用于 keep-alive 场景formRef.value?.validate() before form submissiononActivated() hook for keep-alive scenarios| 版本 / Version | 日期 / Date | 变更内容 / Changes |
|---|---|---|
| 1.0 | 2026-04-28 | 初始版本 / Initial version |
"PDD框架下的业务分析Skill，运用专业方法论进行需求分析和业务建模。当用户输入/analyze、/audit、/doc等命令，或需要对业务流程、管理制度、Excel表单进行专业分析时触发。支持中文触发：业务分析、需求分析、需求建模、5W1H分析、MECE、流程分析。"
"PDD熵减智能体，持续监控和偿还技术债务，防止系统腐化。当用户需要代码清理、文档更新、技术债务管理、架构对齐、熵减、垃圾回收、清理技术债务时自动触发。即使用户只说'熵减'、'清理技术债务'或'垃圾回收'，也应触发此Skill。支持中文触发：熵减、技术债务、代码清理、文档更新、架构对齐、垃圾回收。"
根据开发规格实现功能点代码的核心Skill。当用户想要开始编码实现、根据规格文档生成代码、实现功能点时调用此Skill。此Skill会自动调用pdd-template-engine生成基础代码框架，然后由software-engineer补充业务逻辑。即使只有规格文档没有明确说'实现'，只要涉及代码生成、功能开发，都应触发此Skill。支持中文触发：实现功能点、编码实现、开始编码、功能开发、代码实现、PDD实现。
PRD驱动开发的主入口Skill，协调整个开发流程。当用户想要基于PRD文档进行功能开发、从需求文档生成代码、执行PDD方法论流程、开发业务模块、实现完整功能、'搞个功能'、'资产转让'、'国有产权转让'、'帮我搞个资产转让的功能'时必须调用此Skill。即使用户没有明确说'使用PDD'，只要涉及PRD文档、需求文档、功能点开发、规格文档、模块开发、根据文档开发、业务功能实现、'开发ZCCZ'、'我想开发'、'搞个功能'等场景，都应触发此Skill。此Skill会自动协调pdd-ba、pdd-extract-features、pdd-generate-spec、pdd-implement-feature等子Skill完成从需求分析到代码交付的完整流程。注意：单一接口设计、调试问题、文档查询等场景不应触发此Skill。支持中文触发：PRD驱动开发、PDD开发、功能开发、启动PDD。
"交通事故责任评估与判定专业技能。当用户需要交通事故责任分析、事故现场照片评估、交通法规咨询、事故责任划分、法律依据查询时触发此技能。适用于车辆碰撞事故、行人事故、非机动车事故等各类道路交通事故的责任认定场景。无论用户使用'交通事故'、'车祸'、'责任判定'、'交通法规'、'事故定责'等何种表述，只要涉及交通事故评估或责任认定，均应调用此技能。支持中文触发：交通事故、车祸、责任判定、交通法规、事故定责、责任划分、事故评估、追尾、碰撞、违章、赔偿。"
自动化重构专家技能，将收集到的质量改进任务转化为具体的代码操作。当用户需要代码重构、消除重复、简化复杂度时自动触发。即使用户只说'重构代码'、'消除重复'或'简化代码'，也应触发此Skill。支持中文触发：重构代码、消除重复、简化复杂度、自动重构、代码重构、PDD重构。