---
description: >
  Vue 3 组件脚手架技能。新建 Vue SFC 组件、拆分子组件、
  创建复合组件时激活。含模板生成、命名规范、Prop 设计。
globs:
  - "**/components/**/*.vue"
  - "**/composables/**/*.ts"
alwaysApply: false
---

# Component Scaffold

> 本文件是精简执行摘要。完整流程、模板和深度参考见：
> Read `.cursor/skills/component-scaffold/SKILL.md`

> **适用性**（双模式）：
> - **新建**组件/重大拆分：走完整执行流程（Step 1-7）
> - **修改**已有组件：跳过脚手架步骤，完成后走「验证」清单

依赖技能：`vue-testing`（Cursor 已通过 `skill-vue-testing` 规则自动加载）

## 前端识别（必须先确认）

- **管理端** (`Case-Database-Frontend-admin/`)：Element Plus + Tailwind
- **用户端** (`Case-Database-Frontend-user/`)：Headless UI + Tailwind，**禁止 Element Plus**

## 执行流程

1. 加载规范：Read `010-typescript.mdc`、`011-vue.mdc`、`019-modular.mdc`
2. 扫描 `src/components/core/` 和 `src/components/custom/`，避免重复造轮子
3. 重复 UI 检测：同一结构 >=3 次 → 提取基础组件
4. **输出文件结构**（写代码前必须先输出）：
   ```
   src/components/<type>/<ComponentName>/
   ├── <ComponentName>.vue      (行数限制见 011-vue.mdc)
   ├── <ComponentName>.test.ts
   └── index.ts
   ```
5. 确认组件规格（名称、类型、目录、Props/Emits）
6. 生成组件代码（`<script setup lang="ts">` + `defineProps`）
7. 生成测试和 barrel export

## 质量约束

行数限制和设计决策树已下沉到 `011-vue.mdc`（编辑任何 .vue 文件时自动生效），
此处不再重复。脚手架生成的组件同样受 `011-vue.mdc` 约束。

## 验证

- [ ] Props 使用对象语法 `defineProps({ key: { type, default } })`；**script 中若不访问 `props.xxx` 则不保存返回值**（直接写 `defineProps(...)` 而非 `const props = defineProps(...)`，避免 `unused-vars` lint 报错）
- [ ] **`catch` 块中不使用异常参数时写 `catch {}` 而非 `catch (e) {}`**，避免 `unused-vars` 报错
- [ ] 包含 `data-testid`
- [ ] 测试至少一个渲染测试
- [ ] barrel export 正确
- [ ] 符合 `011-vue.mdc` 的 SFC 行数限制和设计决策规则
- [ ] composable 参数有类型注解、ref 有泛型

## 深度参考

- `.cursor/skills/component-scaffold/references/component-templates.md`
- `.cursor/skills/component-scaffold/references/naming-conventions.md`