前端开发专用的 Cursor 四大模式「快捷切换 + 指令模板」，直接复制就能用，覆盖 90% 日常场景

一套前端开发专用的 Cursor 四大模式「快捷切换 + 指令模板」，直接复制就能用，覆盖 90% 日常场景。

适合：完整功能实现、多文件重构、批量修改

模板 1：单组件开发（React/Vue）

复制代码

基于当前项目的技术栈（React/Vue + TS + Tailwind/Scss），帮我实现一个【xxx】组件。
要求：
1.  符合项目现有代码规范和命名规则
2.  支持响应式，兼容移动端
3.  加必要注释，关键逻辑写清楚
4.  实现后说明使用方法和参数

模板 2：多文件功能开发（比如登录模块）

复制代码

帮我实现一个完整的用户登录模块，包含：
- 登录表单组件（含校验、错误提示）
- 接口请求封装
- 状态管理（Pinia/Redux）
- 路由权限控制
请一次性修改所有相关文件，确保项目可正常运行，最后告诉我如何测试。

模板 3：批量重构（比如 JS 转 TS）

复制代码

帮我把当前目录下的所有 .js 文件重构为 TypeScript：
1.  补全所有类型定义
2.  修复 any 类型，用具体类型替代
3.  保持原有功能不变
4.  完成后列出修改的文件和变更点

适合：复杂功能、大型重构、怕 AI 瞎改的场景

模板 1：功能方案对齐

复制代码

我要实现【xxx功能】，请帮我做一个详细的实现方案：
1.  整体架构和模块拆分
2.  需要修改的文件列表和修改点
3.  关键技术点和潜在风险
4.  分步实现的步骤
我确认方案后，再帮我执行修改。

模板 2：项目升级/迁移（比如 Vue2 → Vue3）

复制代码

我要把项目从 Vue2 升级到 Vue3，请帮我制定一个迁移计划：
1.  分阶段迁移步骤（比如先升级依赖，再改语法）
2.  兼容性处理方案
3.  可能遇到的坑和解决办法
4.  回归测试清单
我确认后再帮我逐步执行。

适合：报错、性能问题、测试不通过

模板 1：通用报错排查

复制代码

我遇到了这个报错：【粘贴错误信息/截图】
请帮我：
1.  定位问题的根因
2.  分析可能的原因（列出 1-3 个）
3.  给出修复方案并修改代码
4.  告诉我如何验证修复是否成功

模板 2：性能优化（组件卡顿/渲染慢）

复制代码

当前页面【xxx组件】渲染卡顿，请帮我：
1.  分析可能的性能瓶颈
2.  给出具体的优化方案（比如减少重渲染、懒加载、缓存等）
3.  修改代码实现优化
4.  告诉我如何验证优化效果

模板 3：测试用例失败

复制代码

这个单元测试用例失败了：【粘贴测试代码/报错】
请帮我：
1.  分析失败原因
2.  修复业务代码或测试用例
3.  确保测试可以通过

适合：学习、理解代码、纯思路咨询

模板 1：代码解释

复制代码

帮我解释一下这段代码的作用、关键逻辑和潜在问题：
【粘贴代码片段】

模板 2：技术方案咨询

复制代码

我要实现【xxx功能】，用 React/Vue 有哪些实现方案？各自的优缺点是什么？推荐我用哪个？

模板 3：语法/API 学习

复制代码

请用通俗的语言给我讲清楚【xxx语法/API】的用法，举 2-3 个常用场景的例子。