用途
Feature Builder 用于把功能需求转化为完整、可运行的 React 功能实现，强调在表现层、业务逻辑层和数据访问层之间进行关注点分离。它适合处理“完整功能”而非单个 UI 组件，例如用户认证、购物车、带筛选的商品列表、文件上传、实时通知等。
主要能力
该技能构建的功能通常包含以下部分：
- UI 组件：使用 react-component-generator 生成。
- 业务逻辑：hooks、stores、校验、数据转换。
- API 集成：数据获取、变更、缓存。
- 状态管理：使用 Zustand 管理全局状态，使用 React Query 管理服务端状态。
- 错误处理：较全面的错误管理。
- 类型安全：完整的 TypeScript 支持。
架构
功能采用三层架构：
- 表现层：React 组件、Tailwind CSS。
- 业务逻辑层：Zustand、hooks、工具函数。
- 数据访问层：API 调用、React Query。
使用方式
技能的工作流如下：
- 分析功能请求：判断功能类型（认证/授权、CRUD 操作、文件处理、实时更新、搜索/过滤、复杂工作流如多步骤、购物车、结账）、所需层级（是否需要 UI、业务逻辑、API 集成、全局状态）以及依赖（依赖的其他功能、所需 API、所需库如 React Query、Zustand、Zod）。
- 规划架构：设计功能目录结构，包含 components、hooks、stores、api、utils、types 与统一出口 index.ts。
- 交互式澄清需求：通过 AskUserQuestion 收集数据、操作、认证、额外要求等细节。
- 生成功能代码：按类型、API 层、业务逻辑层、表现层的顺序生成代码。
- 提供实现指南：给出安装依赖、Provider 配置、使用示例与测试建议。
适用场景
当用户请求一个完整功能（不只是 UI 组件）、涉及业务逻辑与数据管理，或使用“implement”“build”“create feature”等表述时适用。示例包括：实现用户认证、构建购物车、创建带筛选的商品列表、添加文件上传功能、实现实时通知。
与其他技能的集成
- 与 react-component-generator：以该技能模板为基础构建 UI 组件，再接入业务逻辑、hooks 与 stores。
- 与 ui-analyzer：从设计稿实现时，先用 ui-analyzer 提取 UI 结构，再构建业务逻辑层并连接 UI。
- 与 prompt-optimizer：当功能请求较模糊时，先激活 prompt-optimizer 澄清需求，再构建功能。
常见功能模式
资料中列出的模式包括：认证与授权、带校验的表单处理、使用 React Query 的数据获取、文件上传、搜索与过滤、购物车、实时更新（WebSocket）。
最佳实践
资料中给出的建议包括：始终使用分层架构；全面使用 TypeScript；在客户端（体验）与服务端（安全）两侧都做校验；优雅处理错误并提供用户友好的错误信息；通过 React Query 缓存与 memoization 优化性能；保证可访问性（ARIA 标签、键盘导航）；为业务逻辑编写单元测试；为复杂逻辑添加注释。
输出格式
生成功能时，技能会提供：功能名称与实现概述、目录结构、安装依赖、代码（类型、API 层、业务逻辑、UI 组件、校验）、设置说明、使用示例、测试、后续步骤。
限制
资料未提供该技能的收费、价格、平台支持范围、性能指标或效果保证等信息，这些内容暂未提供。