用途
本技能用于指导 React 应用的功能开发，重点在架构模式。当需要新增功能、重构现有代码或规划重大变更时使用。它扩展自通用功能开发技能（Generic Feature Developer），后者提供开发工作流、范围评估以及自建与集成决策，使用前应先阅读基础技能。
主要能力
项目结构
技能给出推荐的目录组织方式：components 下分 ui（可复用基础组件如 Button、Input）、features（功能专属组件）、layout（布局组件如 Header、Sidebar）；另有 hooks（自定义 Hook）、stores（Zustand store）、services（API 客户端、IndexedDB 封装）、types（TypeScript 接口）、lib（工具函数）。
状态管理
- Zustand（首选）：给出带 persist 中间件的 store 示例，包含 items、isLoading 状态以及 addItem、removeItem 动作，并演示 version 与 migrate 的迁移处理。
- 选择器优化：通过选择器避免不必要的重渲染，对对象使用 shallow 浅比较。
- Context 与 Zustand 的选型对比：Context 适合主题、语言等很少变化的数据、认证状态、已有 Provider 或 1-2 层 prop drilling；Zustand 适合频繁更新的数据、带动作的复杂状态、需要持久化或横切关注点。
服务端状态
使用 React Query 处理服务端状态，示例包含 useQuery（queryKey、queryFn、staleTime）与 useMutation（mutationFn、onSuccess 中 invalidateQueries）。
IndexedDB 集成
给出使用场景对照表：总量小于 5MB 用 Zustand persist 的 localStorage；大于 5MB 用 IndexedDB；二进制数据（图片、文件）用 IndexedDB；简单键值用 localStorage；复杂查询用 IndexedDB。并提供 IndexedDBService 服务封装模式，包含 init、setItem、getItem 等方法骨架。
懒加载
- 组件懒加载：对体积较大（大于 20KB）的组件使用 lazy 与 Suspense，示例包括 HeavyChart、RichTextEditor 以及页面组件。
- 路由级代码分割：给出 React Router 中通过 lazy 加载页面路由的示例。
自定义 Hook 模式
- 功能 Hook：从 store 取状态与动作，用 useMemo 派生排序结果。
- 复合 Hook：组合本地状态、服务端状态（React Query）与客户端状态（Zustand），并派生过滤结果。
组件组合
给出复合组件（Compound Components）写法，以 Tabs 为例，通过 Context 共享 active 状态，并定义 Tabs.List 与 Tabs.Panel 子组件，包含 role="tablist"、role="tabpanel" 等无障碍属性。
检查清单
- 开始前：阅读 CLAUDE.md 了解项目模式、检查可复用组件、规划状态管理方案、评估包体积影响。
- 开发中：遵循项目设计系统、TypeScript 严格模式、实现键盘导航、添加 ARIA 标签、支持深色模式。
- 完成前：仅在用户要求时编写单元测试、懒加载重型组件、审查新导入与依赖的包体积影响、使用代码审查技能复核。
使用方式
该技能以文档形式提供指导，本身不包含安装命令或可执行代码。使用时按上述模式在 React 项目中落地，并遵循检查清单。
适用场景
React 应用新增功能、重构现有代码、规划重大架构变更，尤其是涉及状态管理选型、本地持久化、性能优化（懒加载、选择器）和组件系统设计时。
限制
资料未提供该技能的安装方式、收费信息、支持平台或具体版本要求。示例代码为模式演示，实际实现需结合项目情况。