用途：在 Bagisto Shop API 上实现面向客户的前台界面，包括商品目录、购物车、结账、客户账户、心愿单和商品对比等。接口为 /api/shop/* REST 与 POST /api/graphql。该技能本身是一个路由：说明整体流程，并把每个功能指向对应的参考页；参考页承载架构、UI/UX、端点和检查清单。
必要准备：编码前先阅读 reference/connecting-to-the-api.md，了解鉴权（storefront key 以及购物车/客户令牌）、{data,meta}/分页头、错误码和先验证再编码的约定；若使用 GraphQL，另读 reference/graphql.md，了解 result-field/id 规则、camelCase 输入和游标分页。精确的请求/响应结构以 api-docs（https://api-docs.bagisto.com 及其 /llms.txt 索引）为准，不要凭记忆编造请求体。
第一步先向客户确认（关键）：目标平台（web、移动端原生/跨平台、桌面）、框架与栈（React/Next、Vue/Nuxt、Flutter、React Native、Swift/Kotlin、原生 JS）、传输方式（REST 或 GraphQL，REST 适合简单页面，GraphQL 适合一屏需要多个关联字段）、要先做的功能/流程（目录、购物车加结账、账户等），确认后再据此定制，不要假设技术栈。
第二步打开对应功能的参考页。流程类包括产品列表、产品详情、加入购物车、购物车、结账、订单确认、认证、账户、客户订单；功能类包括优惠券、心愿单、对比、评价、订阅通讯、联系我们、店铺上下文。每页结构为概述→流程架构→UI/UX→逐步 API（含确切端点）→错误→检查清单。
关键规则：编码前先验证，打开端点的文档页确认方法与字段再实现；每个 shop 调用都要带 X-STOREFRONT-KEY，购物车/账户/结账调用还要带 Authorization: Bearer <cartToken|customerToken>，访客需先通过 POST /api/shop/cart-tokens 获取购物车令牌；购物车和结账的变更调用会返回完整的最新购物车，UI 应据此同步而非本地修改；登录时访客与客户购物车需合并，否则访客商品丢失；下单后要清理购物车状态并丢弃访客购物车令牌，避免购物车弹窗显示旧商品；GraphQL 操作要选择文档约定的结果字段（success/message/orderId/totals 等），输入使用 camelCase，每行一个字段；不要硬编码动态数据（配送/支付方式、价格、选项），应从 API 获取。