React Frontend Expert 是一个面向 React/TypeScript 前端实现阶段的技能，来源为 hieutrtr/ai1-skills 技能集。
一、用途与适用时机 在以下场景激活该技能：创建或修改 React 组件（仅限函数式组件）；编写自定义 Hooks（useXxx）；构建带路由的页面；使用 TanStack Query 实现数据获取；处理带校验的表单；为 React/TypeScript 应用搭建项目结构。 该技能明确不适用于：编写组件或 Hook 测试（应使用 react-testing-patterns）；E2E 浏览器测试（应使用 e2e-testing）；API 契约设计（应使用 api-design-patterns）；后端实现（应使用 python-backend-expert）；部署或 CI/CD（应使用 deployment-pipeline）。
二、主要能力
- 项目结构规范：给出 src/ 目录结构建议，包含 api/（API 客户端函数与 query options）、components/（共享可复用 UI 组件）、features/（领域特性组件）、hooks/（自定义 Hooks）、layouts/（布局组件）、pages/（路由级页面组件）、types/（共享 TypeScript 类型），以及 App.tsx 与 main.tsx。
- 组件规范：仅使用函数式组件；共享组件用具名导出，页面组件用默认导出；Props 接口命名为 {Component}Props；在函数签名中解构 props；组件保持在 200 行以内，超出时拆分；使用 children 与组合而非深层 prop 传递；不使用 React.FC，使用普通函数语法。对复杂组件采用同目录组织（主组件、样式、子组件、index.ts 重导出）。
- Hooks 规则与自定义 Hooks：Hooks 只能在顶层调用，不能在循环、条件或嵌套函数中调用；只能在 React 函数组件或自定义 Hooks 中调用；自定义 Hooks 必须以 use 开头。给出 useDebounce、useAuth、usePagination 的实现示例。抽取自定义 Hook 的时机：逻辑在 2 个以上组件复用、组件状态管理复杂（超过 3 个 useState）、需要封装副作用（订阅、定时器）、数据获取逻辑可共享。
- TanStack Query 数据获取：推荐使用 queryOptions 工厂集中定义 query key 与函数以防 key 冲突；在组件中使用 useQuery 并处理 isPending、isError、data 等状态；使用 useMutation 并在 onSuccess 中通过 invalidateQueries 做缓存失效。规则包括：设置 staleTime > 0（如 5 分钟）；变更后使用 invalidateQueries() 而非手动 refetch()；使用 queryOptions() 工厂；使用 enabled 防止参数不完整时发起查询。
- TypeScript 约定：对象形状（组件 props、API 响应）用 interface；联合、交叉与计算类型用 type；用可辨识联合表示状态机；tsconfig.json 开启 strict: true；不使用 any，真正未知类型用 unknown；字面量对象类型用 as const；可扩展类型优先 interface，其余用 type；可复用工具类型与 Hooks 使用泛型；共享类型从 types/ 目录导出。
- 表单处理：使用 react-hook-form 搭配 zodResolver 与 zod 进行校验，示例包含 email、displayName、role 字段及错误提示、isSubmitting 提交状态处理。
- 无障碍要求：每个组件须满足 WCAG 2.1 AA，包括优先语义化 HTML、表单输入配 label、必要时使用 ARIA、键盘可导航、焦点管理、颜色对比度（正文 4.5:1、大文本 3:1）、图片 alt 文本。
三、示例与边界情况 给出带搜索与分页的用户列表页示例，结合 useDebounce、usePagination 与 useQuery。边界情况涵盖：Hooks 中的过期闭包、TanStack Query key 冲突、无限重渲染、水合不匹配、内存泄漏。 参考文档：references/component-templates.md（带注释的组件模板）、references/tanstack-query-patterns.md（CRUD 查询模式）。
四、限制 具体安装命令、版本依赖要求、官方文档地址等信息暂未提供。收费、价格、平台等信息暂未提供。