Vite + Shadcn/UI 规则集

这是一套针对 Vite + React + TypeScript + Shadcn/UI 技术栈的 Cursor Rules 规则集合。通过将项目规范转化为 AI 可理解的规则，让 Cursor 在开发过程中自动遵循团队的技术标准和最佳实践。

规则概览

规则文件	适用范围	核心内容	作用
全局规则 `global-rules.mdc`	整个项目 `alwaysApply: true`	技术栈定义、目录结构 TypeScript 规范、导入约定	确保项目的基础架构和代码风格保持一致
路由规则 `routing-rules.mdc`	`src/pages/**`	页面文件结构、路由保护用户认证	规范路由层的代码组织和安全实践
UI 规则 `ui-rules.mdc`	`*.tsx`	Shadcn/UI 组件使用图标系统、通知系统	统一 UI 组件的使用方式和界面风格
API 规则 `api-rules.mdc`	`src/clients/**`	API 客户端架构、SWR 集成 HTTP 方法、错误处理	规范 API 调用方式和数据获取模式

使用方法

将这些规则文件添加到项目的 .cursor/rules/ 目录中，Cursor 会根据文件路径和 globs 配置自动应用相应的规则：

- - global-rules.mdc
  - routing-rules.mdc
  - ui-rules.mdc
  - api-rules.mdc

规则特点

分层设计: 通过 alwaysApply 和 globs 实现规则的精确作用域控制
技术栈绑定: 专门针对 Vite + React + Shadcn/UI 生态系统优化
最佳实践: 包含 TypeScript 规范、代码组织和安全认证等最佳实践
团队协作: 将隐性知识显性化，降低新成员的学习成本

扩展建议

根据项目需求，可以继续添加其他规则文件：

状态管理规则: 针对 src/stores/** 的 Zustand store 规范
测试规则: 针对测试文件的编写规范
样式规则: 针对 Tailwind CSS 的使用规范
表单规则: 针对 React Hook Form 的表单处理规范

这样可以构建一个完整的、分层的规则体系，让 AI 助手更好地理解和遵循项目规范。

Rules 提取模板

如果你想从现有的 Vite + React 项目中提取规范，可以使用以下提示词模板：


# Vite + React 项目规范提取任务
 
你现在是一位经验非常丰富的高级前端架构师，专门负责从已有 Vite + React + TypeScript 项目代码中逆向提取和总结**项目独有的强制性规范**。
 
## 任务
 
根据我提供的项目代码片段（包括目录结构、代表性组件、配置文件、依赖使用等），为这个项目总结出下面 **4 个规范文档** 的 high-level 内容，保存到 `.cursor/rules/` 目录下。
 
## 原则
 
请严格遵守以下原则：
 
1. 只写这个项目中**真实存在且被反复强制使用**的规范，**不要写**大模型常识、教科书式最佳实践、网上泛泛而谈的内容。
 
   - 例如不要写"组件应该职责单一"、"使用 ESLint"、"Props 要定义类型" 这种大家都懂的，除非项目里有非常明确、不同于常规的强制约定或特殊写法。
 
2. 每个文档的总行数控制在 **300 行以内**，语言简洁、明确、可执行。
 
3. **仅在确实有必要澄清写法、减少歧义、或项目写法明显偏离常规时**，才附上关键 import 位置和有代表性的代码片段（建议 3~10 行）。
 
   - 如果规则本身已经足够清晰，或项目写法与主流做法基本一致，就不要附代码。
   - 不要为了凑数而强行添加代码示例。
 
4. 规则文档的目的是用于 **Cursor Rule** 来提高 AI 的生成质量，因此要为大模型注意力做优化。
 
## 需要总结的 4 个文档
 
只总结 high-level 内容，聚焦项目实际强制执行的特色，不要过度细化实现细节：
 
### 1. 全局开发规范 (`global-rules.mdc`)
 
- 重点关注：技术栈、目录结构与模块边界、TypeScript 配置与类型定义规范、导入路径约定（alias、相对路径使用规则）
- 设置 `alwaysApply: true`
 
### 2. 路由规范 (`routing-rules.mdc`)
 
- 重点关注：路由文件组织方式、页面组件命名与结构、路由保护与权限控制、导航方式（Link vs useNavigate）
 
### 3. UI 组件规范 (`ui-rules.mdc`)
 
- 重点关注：项目使用的 UI 组件库（Shadcn/UI、Ant Design 等）、组件导入与使用方式、图标系统、通知/弹窗等全局组件的使用规范、样式方案（CSS Modules、Tailwind、styled-components 等）
 
### 4. API 与数据获取规范 (`api-rules.mdc`)
 
- 重点关注：API 客户端架构（axios、fetch 等）、数据获取库（SWR、React Query 等）、请求/响应拦截器、错误处理与重试策略、类型定义方式