Cursor在前端需求开发工作流的应用

project-root/
├── .cursorrules          # AI行为配置
├── docs/
│   ├── architecture.mermaid  # 系统架构图
│   ├── technical.md      # 技术文档
│   └── status.md         # 进度跟踪
├── tasks/
│   └── tasks.md          # 分解的开发任务
├── src/
│   ├── components/       # React组件
│   ├── hooks/           # 自定义hooks
│   ├── services/        # API服务
│   ├── utils/           # 工具函数
│   └── types/           # TypeScript类型定义
└── tests/               # 测试文件

# 前端项目上下文和架构
SYSTEM_CONTEXT: |
  你是一个高级前端开发者，正在开发一个TypeScript/React项目。
  启动时必须读取的文件：
  - docs/architecture.mermaid: 系统架构和组件关系
  - docs/technical.md: 技术规范和模式
  - tasks/tasks.md: 当前开发任务和需求
  - docs/status.md: 项目进度和状态
  
  在做任何更改前：
  1. 解析并理解docs/architecture.mermaid中的系统架构
  2. 检查tasks/tasks.md中的当前任务上下文
  3. 更新docs/status.md中的进度
  4. 遵循docs/technical.md中的技术规范

# React/TypeScript指南
REACT_GUIDELINES: |
  - 使用函数组件和Hooks
  - 严格的TypeScript类型，避免'any'
  - 遵循React最佳实践
  - 为所有组件编写测试
  - 使用JSDoc文档

# 组件开发规范
COMPONENT_RULES: |
  - 每个组件都要有对应的.test.tsx文件
  - 使用React Testing Library进行测试
  - Props接口必须明确定义
  - 组件要支持ref forwarding
  - 使用memo优化性能关键组件

graph TD
    A[App Component] --> B[Router]
    B --> C[Layout Component]
    C --> D[Header Component]
    C --> E[Main Content]
    C --> F[Footer Component]
    
    E --> G[Home Page]
    E --> H[User Dashboard]
    E --> I[Settings Page]
    
    G --> J[Hero Section]
    G --> K[Feature List]
    
    H --> L[User Profile]
    H --> M[Activity Feed]
    
    N[API Service] --> O[Auth Service]
    N --> P[User Service]
    N --> Q[Data Service]
    
    style A fill:#f9f,stroke:#333,stroke-width:4px
    style N fill:#bbf,stroke:#333,stroke-width:2px

# 当前Sprint任务

## FRONTEND-001: 实现用户认证界面
状态: 进行中
优先级: 高
依赖: 无

### 需求
- 登录/注册表单组件
- 表单验证和错误处理
- 与后端API集成
- 响应式设计

### 验收标准
1. 用户可以通过邮箱/密码注册
2. 登录成功后重定向到仪表板
3. 表单验证实时反馈
4. 移动端适配良好

### 技术要点
- 使用React Hook Form进行表单管理
- 使用Zod进行数据验证
- 使用React Query进行API状态管理

// ❌ 没有TDD的方式
// 开发者："添加密码重置功能"
// AI生成的代码：
// - 看起来正确
// - 处理正常路径
// - 遗漏关键边缘情况
// - 在token验证中有安全漏洞

// ✅ 使用TDD的方式
describe('PasswordResetService', () => {
  it('should throw if token is expired')
  it('should prevent timing attacks in token comparison')
  it('should rate limit reset attempts')
  it('should handle non-existent emails securely')
})
// 现在实现服务以通过这些测试

// 初始实现
@{src/components/LoginForm.tsx}
"添加OAuth支持"
// AI: 完美实现OAuth

// 对话后期...
"添加刷新token支持"
// AI: 因为失去上下文而实现错误

// 解决方案：用状态恢复上下文
@{docs/status.md}
@{src/components/LoginForm.tsx}
"为我们的OAuth实现添加刷新token支持"
// AI: 现在有完整上下文，正确实现

// ❌ 危险：让AI直接处理复杂业务逻辑
"实现购物车计算逻辑"

// ✅ 安全：通过测试分解
@{src/cart/cart.spec.ts}
"实现购物车计算以通过这些测试用例：
1. 基本价格计算
2. 数量折扣
3. 优惠券应用
4. 税费计算"

// ❌ 有问题的
const [users, setUsers] = useState([]); // 全局状态！

const createUser = (user) => {
  setUsers([...users, user]); // 竞态条件等待发生
}

// ✅ 正确的
const { mutate: createUser } = useMutation({
  mutationFn: userService.createUser,
  onSuccess: () => {
    queryClient.invalidateQueries(['users']);
  }
});

// 组件懒加载示例
const LazyDashboard = React.lazy(() => import('./Dashboard'));

// 组件懒加载示例
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyDashboard />
    </Suspense>
  );
}