React Web 是一个面向 React 前端开发的技能，核心是强制性的测试优先开发（Test-First Development，TFD）工作流，并围绕 Hooks、React Query、Zustand 等技术栈给出开发规范与代码示例。
用途 该技能用于指导 React Web 应用的开发过程，强调在编写任何组件或 Hook 实现之前必须先编写测试。它把测试优先作为不可协商的前端组件开发规则，并提供了完整的开发顺序、项目结构、组件模式、状态管理、路由、样式、表单、测试与性能优化等实践。
主要能力
- 测试优先工作流：先写测试文件定义预期行为，运行测试确认失败，再写最小实现使测试通过，最后按需重构。技能给出了组件与 Hook 的测试优先示例，包括渲染、交互、边界情况与可访问性测试。
- 组件开发顺序：明确正确顺序为创建测试文件、运行失败测试、实现组件、运行通过测试、最后添加样式；并列出错误顺序作为反例。
- 项目结构：给出包含 core（纯业务逻辑）、components、pages、hooks、store、api、utils、tests 等目录的推荐结构。
- 组件模式：仅使用函数式组件，显式定义 Props 接口，将逻辑抽取到自定义 Hook，页面组件保持纯展示。
- 状态管理：优先使用本地 useState，需要全局状态时使用 Zustand，服务端状态使用 React Query（含 useQuery、useMutation、invalidateQueries 示例）。
- 路由：使用 React Router 定义路由与受保护路由（ProtectedRoute）。
- 样式：推荐 CSS Modules，也提供 Tailwind 的替代写法。
- 表单：使用 React Hook Form 配合 Zod 进行校验。
- 测试：使用 React Testing Library 进行组件与 Hook 测试，使用 Playwright 进行端到端测试，并提到 demo-video 与 visual-validation 作为视觉验证手段。
- 性能：使用 memo、useCallback、useMemo 进行记忆化，使用 lazy 与 Suspense 进行代码分割。
- 反模式清单：列出内联函数、渲染中写逻辑、深层嵌套、使用索引作为 key、直接修改 state、超过两层的 prop drilling、用 useEffect 处理派生状态、在 useEffect 中请求数据、业务逻辑与 UI 混合、超大组件、CSS in JS 对象、忽略 TypeScript 错误等应避免的做法。
使用方式 该技能以文档与代码示例形式提供，开发时按照其规定的测试优先顺序执行：先创建 Component.test.tsx 并覆盖预期行为，运行测试确认失败，再创建实现文件，运行测试确认通过，最后添加样式。技能还包含一个执行检查清单，若跳过测试则必须提示测试优先违规并先创建测试文件。
适用场景 适用于使用 React 构建 Web 应用的开发场景，尤其是希望保持组件可测试性、规范项目结构、统一状态管理与测试策略的前端项目。
限制 资料未提供该技能的安装命令、收费方式、支持平台或具体版本要求，这些信息暂未提供。技能内容以英文文档与代码示例呈现，未说明是否提供中文版本。