用途：为 TypeScript + React 前端项目提供技术设计规则，指导环境变量配置、组件架构和数据流设计。
主要能力：
- 环境变量管理：使用构建工具的环境变量系统（process.env 在浏览器中不可用），客户端可见变量需加 VITE_ 前缀，通过配置层集中管理并实现类型安全、默认值与必填校验。示例：const config = { apiUrl: import.meta.env.VITE_API_URL || 'http://localhost:3000' }。
- 安全约束：前端代码公开可见，禁止在客户端存储 API 密钥、令牌等机密，密钥由后端管理并通过代理访问（如 fetch('/api/data')）；.env 文件不纳入 Git；禁止记录敏感信息。
- 组件架构：强制函数组件，用自定义 Hooks 复用逻辑，层级为 Atoms→Molecules→Organisms→Templates→Pages，Props 驱动，文件与测试样式共置。
- 状态管理：useState 管理局部状态，Context API 共享跨组件状态，React Query/SWR 缓存服务端数据，React Hook Form 管理表单。
- 数据流原则：单一事实来源、单向数据流、不可变更新（setUsers(prev => [...prev, newUser])），前端到后端经序列化，后端到前端用类型守卫校验（isUser）。
- 构建与测试：按 package.json 的 packageManager 执行命令，包括开发服务器、生产构建、类型检查等；测试命令有 test、test:coverage、test:coverage:fresh、test:safe、cleanup:processes。质量检查包括 check（Biome）、build（TypeScript）及 check:all。覆盖率要求：单元测试不低于 60%，Atoms 70%、Molecules 65%、Organisms 60%、自定义 Hooks 65%、Utils 70%。非功能要求：支持 Chrome/Firefox/Safari/Edge 最近两个版本，主要页面渲染在 5 秒内。
适用场景：配置 React 项目环境、统一前端架构与数据流规范、实施质量与覆盖率检查时。
限制：该资料面向客户端前端约束，未提供后端密钥管理具体实现、部署细节及定价信息。