用途
React Frontend 是一个用于 React 前端开发的技能包，围绕 React 架构模式、TypeScript、Next.js、Hooks 和测试提供开发规范与实践参考。它适用于与 React 组件结构、状态管理、Next.js 路由等相关的工作场景，帮助在编写和审查代码时保持一致性。
主要能力
该技能强调先验证再实现：对于 App Router 模式、React 19 API 或特定版本行为，应在写代码之前查阅当前文档（如有 Context7 可查询文档，否则通过网页搜索查找框架官方文档），因为训练数据可能落后于当前版本。
工作规则包括：
- 派生状态保留在渲染中，用户操作放在事件处理器中，Effect 仅用于外部同步。
- 异步任务需要有生命周期和取消策略；失败、进行中和空数据应分别表示。
- 缓存键要绑定到请求的身份。当服务端会话状态先变化时，租户作用域的键可能收到另一租户的响应；需在上下文切换期间保持请求作用域与缓存身份一致，并通过已挂载消费者、进行中的请求和失败的重新获取来验证隔离。
- 隐藏交互区域时保留焦点，并在真实浏览器中测试键盘导航。
- 对每个公开的服务端 action 进行校验和授权；跨服务端/客户端边界只发送必要字段。
- 测量性能变化并测试用户可见行为，而不仅是类型检查。
Effect 决策树
Effect 是逃生舱，大多数逻辑不应使用 Effect。资料给出的对照包括：
- 从 props/state 派生值：在渲染中计算（开销大时用 useMemo）。
- 因 prop 变化重置状态：在组件上使用 key prop。
- 响应用户事件：事件处理器。
- 通知父组件状态变化：在事件处理器中调用 onChange，或使用完全受控组件。
- 链式状态更新：在一个事件处理器中计算全部下一个状态。
- 与外部系统同步：使用带清理的 Effect。
Effect 规则：不要压制 linter，而应修复代码；使用更新函数（如 setItems(prev => [...prev, item])）移除状态依赖；将对象/函数移入 Effect 内部以稳定依赖；非响应式值（如连接 Effect 中的主题）使用 useEffectEvent；订阅、连接、监听器始终返回清理函数。
数据获取与取消
数据获取取消可按情况选择：fetch 使用 AbortController；不可取消的 promise 使用忽略标记。使用 React Query 时，将查询函数的 signal 传给传输层，例如 queryFn: ({ signal }) => fetch(url, { signal })。若不消费该 signal，未使用的查询可能完成并填充缓存；不应将这种行为描述为传输层取消。
一个已敲定的请求并不等于初始化完成。只有在应用了可用数据或观察到成功的终止空结果之后，才消费一次性初始化锁存。需测试单次挂载内的先空后填充响应，并验证后续重新获取是否保留用户编辑。
工程纪律
- 简单优先：每个改动尽可能简单，影响尽可能少的代码。
- 只触碰必要之处；避免引入无关改动。
- 不用临时取巧方案：如果某个修复感觉不对，就退回去实现干净的方案。
- 添加新抽象前，确认它出现在 3 处以上。
验证清单
- TypeScript 零错误编译。
- 新代码中没有被压制的 lint 规则（eslint-disable、@ts-ignore）。
- useEffect 依赖数组未被手动覆盖。
- React 19+ 项目中没有 forwardRef 用法（直接使用 ref prop）。
专题参考
在实现或审查对应行为之前，阅读相关参考：
- 组件类型、状态归属、异步竞态、焦点或缓存查询行为：components-and-state.md。
- 性能、React API、Next.js 边界或缓存：rendering-and-frameworks.md。
- Tailwind CSS：工具类、@theme 令牌、CVA/tailwind-variants、暗色模式、v3 到 v4 迁移或溢出与隐藏陷阱：tailwind.md。
- 组件、hook、浏览器或集成测试改动：test-selection.md。
- 同步 JSON 语言文件或审查翻译：locale-synchronization.md。
现有专门参考（对应主题适用时）：tailwind-configuration.md、tailwind-v3-to-v4.md、tailwind-class-composition.md、tailwind-component-patterns.md、tailwind-layout-patterns.md。
另外还提供 testing.md（组件、hook 与 mock 测试示例）和 e2e-testing.md（Playwright E2E 模式）。
限制
资料未说明该技能的具体安装方式、支持的平台、收费信息或定价，以上内容暂未提供。