用途：为 Saleor 电商店面提供数据契约与 UX/数据层实现指南，按步骤执行，每次只做一步，不自动串联。
步骤：1 项目引导，连接已有项目到 Saleor GraphQL API，检查 Saleor 实例、读取项目框架与包管理器、创建或补充 AGENTS.md、安装 graphql-request graphql 及 @graphql-codegen/cli @graphql-codegen/client-preset（开发依赖）、生成 codegen 配置并添加脚本、创建公开与授权两个 API 客户端、配置环境变量并验证。2 设计与美学，先确认项目 CSS 方案，再询问风格参考、整体氛围和强调色，产出主题令牌与设计变量供后续步骤导入。3 商品目录，编写 GraphQL 查询与片段（ProductCard、ProductDetails、ProductList、ProductBySlug），实现列表页、详情页和 VariantSelector 组件。
关键规则：采用双客户端模式，公开查询保持匿名，授权客户端仅在服务端使用 app token；channel 必填，否则无定价与库存数据；description 为 EditorJS JSON，需安全解析，不可直接渲染；价格使用 Intl.NumberFormat 按响应货币格式化，不硬编码货币符号；处理可空字段（thumbnail、pricing、category、variants.pricing），quantityAvailable 为 null 按有货处理，为 0 表示无货，缺货变体显示但禁用；PDP 优先 media，thumbnail 作后备；仅一个变体且无选择属性时跳过选择器。
限制：Add to Cart 在此步骤仅为占位，不可用；不负责框架脚手架、CSS 搭建和环境加载细节；资料未提供具体价格、收费或平台支持信息；执行需已有 Saleor 实例与 API URL，否则需先在 https://cloud.saleor.io/ 创建。