react-typescript

此技能为使用 React 19 与 TypeScript 构建现代 Web 应用程序提供了强大的架构框架。它专为需要维护严格类型安全与跨复杂代码库组件模式一致性的专业前端工程师与团队负责人所设计。通过利用这些久经考验的模式，开发人员能够确保更高的代码质量、减少技术债，并以最小的样板代码实现复杂功能，如异步数据获取、乐观更新 UI 与精密的表单处理。

• 高级组件模式：包含基于接口的 Props 函数组件实现、用于灵活列表的通用组件以及用于简洁版面的容器/子组件模式。
• 状态管理生态系统：提供对 React Context 提供者、自定义 Hook 创建与 Zustand Store 实现的全面支持，以进行可扩展的全局状态管理。
• 数据获取与查询：内置 TanStack Query (React Query) 模式，包含基本 Hook、复杂变更 (Mutations)、查询失效处理与乐观更新逻辑。
• 稳健的表单处理：结合 React Hook Form 与 Zod 进行基于模式的验证、错误处理与类型安全的表单提交流程。
• 性能与可靠性：提供错误边界 (Error Boundaries)、记忆化 (Memoization) 模式，以及简化业务逻辑同时强制执行性能最佳实践的自定义 Hook。
• 输入通常包括任务描述，例如“实现用户个人资料表单”或“设置数据获取 Hook”，输出则为符合现代 React 范式的生产级、类型检查代码块。
• 使用注意事项：建议在组件脚手架或架构规划阶段将特定模式贴入 Agent 的内容中。此技能旨在与 TypeScript 5+ 配置无缝协作，确保所有状态管理代码与 UI 组件保持解耦。用户应确保开发环境已配置为支持 React 19 特性，以充分利用所提供的 Hook 与性能模式。