用途：在前端 React/TypeScript 实现中提供具体规则，包括反模式阈值、边界类型安全、组件与状态设计、错误处理与项目约定。
主要能力与阈值：出现以下信号即触发重构——Props 逐层传递超过 3 层时提升到 Context 或状态管理；组件超过 300 行拆分；Props 数量超过 10 时拆分（3-7 为合理区间）；可选 Props 超过 50% 时引入默认值或 Context；Props 嵌套超过 2 层时扁平化；同一断言出现 3 次以上则重新审视类型设计。
类型安全：禁止 any；类型不可用时以 unknown 接收并用类型守卫收窄；尽量少用 as，不可避免时需注释说明。应用内部的 Props/State 有类型保证，无需 unknown；外部边界（API 响应、localStorage/sessionStorage、URL 参数、解析的 JSON）一律以 unknown 接收后收窄。受控组件表单输入依靠 React 合成事件保持类型安全。
组件与状态：只用函数组件，类组件仅允许用于 Error Boundary。显式命名 Props 类型并解构，避免 React.FC。Props 驱动，仅在需要时访问全局状态或 Context。自定义 Hook 是逻辑复用与依赖注入的单位。函数参数 0-2 个用位置参数，3 个以上改为 options 对象。多字段且离散转换的状态用 useReducer 加可辨识联合 action。RSC 框架（如 Next.js App Router）默认服务端组件，把交互隔离到最小范围的 "use client" 边界，仅客户端可用的 API 保持在客户端组件内；纯客户端 SPA（如 Vite）不适用。
错误处理：每个错误都要暴露——记录并处理或向上传播，绝不吞掉。无效状态快速失败并抛出。预期失败用 Result 类型表示，throw 保留给意外/不可恢复情况。使用继承基类 AppError 的专用错误类并携带 code。分层职责：API 层把传输错误转为领域错误，Hook 向上传播 AppError，Error Boundary 捕获渲染错误并显示回退 UI。useEffect 数据拉取需防止乱序响应与卸载后更新，可用 AbortController、mounted 标志或 React Query/SWR。禁止记录密钥。
项目约定：环境变量通过打包器公开前缀访问（Vite 用 import.meta.env.VITE_，Next.js 用 process.env.NEXT_PUBLIC_，CRA 用 process.env.REACT_APP_*），密钥留在服务端。用构建脚本监控包体积，React.lazy + Suspense 代码分割。启用 React Compiler 时依赖它，手动 memo 仅在性能分析或有身份引用需求时使用。命名：组件/类型 PascalCase，变量/函数 camelCase，Hook 用 use 前缀，常量 SCREAMING_SNAKE_CASE。导入使用 src/ 绝对路径并按 React→外部库→内部绝对→内部相对→仅类型→样式资源排序。格式遵循 Biome。