源自 GitHubShopify无头商城开发指导
本能力专为构建基于 Shopify Hydrogen 的无头（Headless）电商前端提供技术指导。依托 Remix 架构模式与 Storefront API，涵盖项目脚手架搭建、Loader/Action 数据交互、边缘流式渲染（defer）、多级缓存策略配置、购物车管理及 Oxygen 云端部署方案。使用前需具备 React、Remix 基础及 Shopify 开发者账号。
常见场景
它能帮你做什么？
01
搭建无头电商独立站：通过 Hydrogen 脚手架与 Remix 路由机制，快速构建高性能的前端商城架构。
02
商品流式加载与SEO优化：利用 defer 和 Suspense 分离关键商品数据与推荐列表，并自动生成结构化 SEO 标签。
03
购物车与用户系统集成：集成 Storefront 购物车 Handler 和 OAuth 客户认证系统，实现顺畅的加购与结账流程。
三步完成
怎么使用
1安装 Skill
把右侧安装请求发给你的 AI。
2说清楚目标
告诉 AI 你想完成什么，或直接贴入内容。
3检查结果
按需要继续调整语气、范围或格式。
复制就能用
你可以直接这样说
“请给出在 Hydrogen 中使用 defer 和 Suspense 流式加载商品推荐列表的代码示例。”
“如何使用 Hydrogen 内置的 createCartHandler 处理购物车增删改查动作？”
“请为 Shopify 商品详情页配置合适的 Storefront API 缓存策略并编写 loader 函数。”
适用人群
适合谁？
上手门槛
使用难度
进阶
需要了解任务流程，页面已整理好使用步骤。
兼容范围
支持哪些 AI？
Codex可直接使用
Claude Code可直接使用
OpenClaw可直接使用
Hermes可直接使用国内 Agent可直接使用
中文用户增强
Skill Px 做了什么？
中文说明简化使用方式补充中文案例整理安装流程降低理解难度
