用途：该技能用于前端功能与组件实现、项目结构搭建、页面与状态管理、网关注入模式设计、HTTP 通信与路由设置、功能模块组织、性能优化与代码分割。UI 组件设计、Tailwind 样式、shadcn/ui、响应式布局与无障碍实现交由 ui-designer 技能处理，本技能聚焦架构、状态管理与业务逻辑编排。
主要能力：采用基于功能的架构而非 Clean Architecture 分层；使用 Gateway 模式（接口 + HTTP 实现 + Fake 实现）；通过 Context API 注入网关以便测试；Zustand 管理全局客户端状态；TanStack Query 管理服务端状态；TanStack Router 负责路由；测试使用 Vitest + React Testing Library 做单元测试，Playwright 做端到端测试。
使用方式：文档查询为强制要求，需使用 Context7 MCP 获取库文档、API 参考、导入语句与版本特定模式，使用 Perplexity MCP 做架构研究与最佳实践调研。推荐目录结构包含 app（配置、providers、router、入口）、features（各功能自包含的 components、pages、stores、gateways、hooks、types）、shared（services、components、hooks、lib、types）与 routes。分层职责为：共享服务层提供 HTTP 客户端等基础设施；网关层抽象外部资源访问；网关注入层通过 Context API 提供并允许测试覆盖；Store 层用 Zustand 承载可测试业务逻辑；页面层编排网关、Store 与 UI 组件；组件层为纯 UI。状态策略：全局客户端状态用 Zustand，服务端状态用 TanStack Query，表单状态用 TanStack Form。
适用场景：实现前端功能与组件、搭建项目结构、创建页面与状态管理、设计网关注入、设置 HTTP 通信与路由、组织功能模块、性能优化与代码分割。
限制：资料未提供安装命令、收费与价格、平台支持范围及具体效果数据；UI/UX 相关技术需参考 ui-designer 技能，完整技术栈需参考 project-standards 技能与 CLAUDE.md。