Hydrogen cookbooks
Skill Weaverse/shopify-hydrogen-skills/skills/hydrogen-cookbooks
Dedicated agent skills for building, upgrading, and maintaining Shopify Hydrogen storefronts — works with Claude, Cursor, Copilot, and more.
npx -y skills add Weaverse/shopify-hydrogen-skills --skill hydrogen-cookbooksAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
What its author says it does
Copied from the file, not written here
Step-by-step implementation guides for building features in a Shopify Hydrogen storefront — bundles, combined listings, customer accounts, 3D models, performance, variant media, and Weaverse integration.
SKILL.md
2.3 KB, as published. Nobody here has run it
Hydrogen Cookbooks
Concrete, step-by-step guides for building specific features in a Shopify Hydrogen storefront. Each cookbook is a self-contained recipe with code, file changes, and implementation notes.
Live Documentation
For the latest Hydrogen cookbook recipes from Shopify:
node scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>"
For Weaverse-specific patterns:
node scripts/search_weaverse_docs.mjs "<topic>"
The references below are curated guides that may include Weaverse-specific patterns not available in the live docs.
Available Cookbooks
| Cookbook | Description |
|---|---|
| bundles.md | Display product bundles with badges and bundled variant line items in the cart |
| combined-listings.md | Handle combined listings — utilities, filters, media grouping, price range display |
| customer-account-api.md | Set up the Customer Account API with tunnel for local dev |
| hydrogen-react-router.md | Import replacement guide: Remix v2 → React Router v7 |
| model-viewer.md | 3D model support (.glb/.usdz) with ModelViewer component and AR |
| performance-best-practices.md | Caching strategies, streaming, deferred data, third-party scripts, query optimization |
| variant-media-grouping.md | Group product media by variant option (e.g. Color) |
| weaverse-hydrogen-integration.md | Complete Weaverse integration: component registration, theme schema, data fetching |
How to Use
Each cookbook describes:
- What the feature does
- Prerequisites to check first
- Step-by-step implementation — file changes, code snippets, diffs
- Troubleshooting — common issues and fixes
Recipe file names reference the Hydrogen skeleton template. Adapt file paths to match your project's structure.