cursor 的 ai 生成或修改组件时必须严格遵循团队约定的结构、命名、类型定义和生命周期写法；需在项目根目录创建 .cursor/rules/component-standards.mdc 文件，含标准 frontmatter 和 markdown 规则，确保 globs 精确匹配后缀且标题层级完整，重启后可通过生成按钮组件或 @rules 文件验证是否生效。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要让 Cursor 的 AI 在生成或修改组件时，严格遵循团队约定的结构、命名、类型定义和生命周期写法，而不是凭经验自由发挥。
创建组件专属规则文件
在项目根目录下执行：mkdir -p .cursor/rules → 进入该目录 → 新建文件 component-standards.mdc。
这一步必须做，否则 Cursor 不会识别任何组件级规则；【.cursor/rules/ 是唯一被自动扫描的规则目录】。
写入可生效的规则头信息
打开 component-standards.mdc，顶部必须写标准 frontmatter：
---
description: "React/Vue 组件开发规范"
globs: "*.tsx,*.jsx,*.vue"
alwaysApply: false
---
【globs 字段必须精确匹配你项目的组件后缀，漏掉 .vue 或多写 .ts 都会导致规则失效】。alwaysApply 设为 false 是为了后续能按需启用，避免干扰非组件文件。
Agents 正在你的整个代码库中处理越来越复杂、运行时间更长的任务。本次版本引入了新的 agent 框架改进，以实现更好的上下文管理，并在编辑器和 CLI 中带来了许多提升使用体验的修复。
定义具体组件约束
在 frontmatter 下方用 Markdown 写明规则，以下为可直接粘贴的最小可用版本：
# 组件开发规范
## 命名与导出
- 所有组件文件名使用 PascalCase（如 Button.tsx、UserProfileCard.vue）
- 默认导出组件函数/脚本，不使用命名导出
- Vue 组件必须使用 <script setup> 语法糖<br><br>## 类型与 Props<br>- React：Props 必须定义 interface，且文件顶部导出（export interface ButtonProps { ... }）<br>- Vue：defineProps 必须带泛型，禁止 any（如 defineProps<{ loading: boolean }>()）<br>- 所有可选 Prop 必须标注 ?，并提供 defaultProps 或 required: false<br><br>## 结构与逻辑<br>- 禁止在组件内写超过 5 行的副作用逻辑（如 fetch、定时器），必须抽离到自定义 Hook 或 Composable<br>- 组件顶层不得声明变量或执行非渲染副作用代码<br>- React 中 useEffect 依赖数组必须完整，Vue 中 onMounted 等钩子不得隐式依赖未声明的响应式变量</script>
这段内容要原样复制进文件，不能删减「#」「##」标题层级——Cursor 规则引擎依赖此结构解析语义。
验证规则是否加载成功
方法一：重启 Cursor 编辑器 → 打开任意 .tsx 文件 → 输入 “写一个按钮组件” → 观察生成代码是否自动带 interface Props 定义、是否用 PascalCase 命名文件。
方法二：在聊天窗口输入 @component-standards.mdc 后提问，AI 会明确提示“已应用组件规范规则”。注意：首次加载可能延迟 3～5 秒，不要立即判定失败。
