React 技能为现代前端应用提供较全面的 React 开发支持。当工作涉及 React 组件开发、Hooks 实现、状态管理、Context API 使用、组件模式与组合时可启用该技能。
项目结构示例展示了 src 目录下的组织方式：components 分为 ui 与 features 两类，另有 hooks、context、services、types 目录以及 App.tsx 入口文件。其中 ui 下包含 Button.tsx、Card.tsx，features 下包含 AgentList.tsx、TaskPanel.tsx，hooks 下包含 useAgent.ts、useTask.ts，context 下包含 AgentContext.tsx，services 下包含 api.ts，types 下包含 index.ts。
组件模式部分给出函数式组件示例 AgentCard，使用 FC 类型，属性包含 name、type（claude、gpt、gemini）与 status（active、idle、error），并提供 onSelect 回调。
自定义 Hooks 部分给出 useAgent 示例，使用 useState、useEffect、useCallback，管理 agent 数据、loading 与 error 状态，通过 fetch 请求 /api/agents/${agentId}，并返回 agent、loading、error、refresh。
Context Provider 部分给出 AgentContext 示例，使用 createContext、useContext、useReducer，定义 AgentState（agents、selectedAgent）与 AgentAction（SET_AGENTS、SELECT_AGENT、CLEAR_SELECTION），实现 agentReducer 与 AgentProvider，并提供 useAgentContext 自定义 Hook，在 Provider 之外使用时抛出错误。
数据获取部分展示基于 React Query（@tanstack/react-query）的 useQuery 与 useMutation 用法，useAgents 查询 ['agents']，staleTime 设为 5 分钟；useCreateAgent 使用 useMutation 提交 POST 请求，成功后 invalidateQueries 刷新。
表单处理部分使用 react-hook-form、@hookform/resolvers/zod 和 zod，定义 agentSchema（name 必填、type 为 claude/gpt/gemini、description 可选），在 AgentForm 中使用 register、handleSubmit 以及 errors、isSubmitting 状态。
性能优化部分使用 memo、useMemo、useCallback 示例，AgentList 通过 memo 记忆化，对 agents 排序使用 useMemo，handleSelect 使用 useCallback。
适用场景为 React 前端组件开发、Hooks 与状态管理、数据获取、表单与性能优化等任务。限制方面，资料未提供该技能的收费、价格、平台支持、具体版本要求或安装方式等信息，暂未提供。