用途：本技能用于 Medusa 店面（storefront）前端集成开发，覆盖调用自定义 Medusa API 路由、在前端集成 Medusa JS SDK、使用 React Query 进行数据获取、实现带乐观更新的 mutation、错误处理与缓存失效。当需要构建店面所调用的后端 API 路由时，应改用 building-with-medusa 技能。
主要能力与核心规则：
- SDK 使用（CRITICAL）：所有 API 请求必须使用 Medusa JS SDK，绝不用普通 fetch()。内置端点用已有方法（如 sdk.store.product.list()、sdk.admin.order.retrieve()）；自定义路由用 sdk.client.fetch()。SDK 会自动添加必要请求头（store 的 publishable API key、admin 的 auth 与 session），普通 fetch() 缺少这些头会报错。禁止对 body 使用 JSON.stringify()，SDK 会自动序列化，双重序列化会破坏请求导致服务端无法解析；应传纯 JavaScript 对象。使用前先在项目中定位 SDK 实例化位置。
- React Query 模式（HIGH）：GET 用 useQuery，POST/DELETE 用 useMutation；mutation 的 onSuccess 中失效查询以刷新数据；查询键按层级结构组织以有效管理缓存；始终处理 isLoading、isPending、isError 状态。
- 数据展示（HIGH，含关键价格规则）：来自 Medusa 的价格按原值存储（$49.99 即 49.99，非分），直接展示，切勿除以 100。
- 错误处理（MEDIUM）：在 mutation 中实现 onError 回调，向用户展示错误信息，乐观更新需支持出错回滚。
使用方式：实现店面集成代码前必须先加载参考文件 references/frontend-integration.md，快捷参考不足以支撑实现。该文件包含分步 SDK 集成模式、完整 React Query 示例、正误代码对比、查询键最佳实践、乐观更新模式与错误处理策略。内置 SDK 方法、官方 API 参考与框架配置可查阅 MedusaDocs MCP 服务器作为次要来源；本技能是自定义路由调用、sdk.client.fetch、React Query 集成及常见反模式的首要来源。
适用场景：任意店面开发任务，包括从店面调用自定义 Medusa API 路由、前端应用集成 Medusa SDK、数据获取、带乐观更新的 mutation、错误处理与缓存失效。跨后端功能时，后端遵循模块→工作流→API 路由，店面遵循 SDK→React Query→UI 组件。
限制：资料未提供具体依赖版本、安装命令、平台或收费信息。核心约束是必须使用 SDK 而非 fetch()，且不得对 body 做 JSON.stringify()。