hydrogen-cookbooks
starsforks
How to install hydrogen-cookbooks?
weaverse/shopify-hydrogen-skills/hydrogen-cookbooks
$npx -y skills add Weaverse/shopify-hydrogen-skills --skill hydrogen-cookbooksStep-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
| 1 | # Hydrogen Cookbooks |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## Live Documentation |
| 6 | |
| 7 | For the latest Hydrogen cookbook recipes from Shopify: |
| 8 | |
| 9 | ```bash |
| 10 | node scripts/search_shopify_docs.mjs "hydrogen cookbook <topic>" |
| 11 | ``` |
| 12 | |
| 13 | For Weaverse-specific patterns: |
| 14 | |
| 15 | ```bash |
| 16 | node scripts/search_weaverse_docs.mjs "<topic>" |
| 17 | ``` |
| 18 | |
| 19 | The references below are curated guides that may include Weaverse-specific patterns not available in the live docs. |
| 20 | |
| 21 | ## Available Cookbooks |
| 22 | |
| 23 | | Cookbook | Description | |
| 24 | |----------|-------------| |
| 25 | | [bundles.md](./references/bundles.md) | Display product bundles with badges and bundled variant line items in the cart | |
| 26 | | [combined-listings.md](./references/combined-listings.md) | Handle combined listings — utilities, filters, media grouping, price range display | |
| 27 | | [customer-account-api.md](./references/customer-account-api.md) | Set up the Customer Account API with tunnel for local dev | |
| 28 | | [hydrogen-react-router.md](./references/hydrogen-react-router.md) | Import replacement guide: Remix v2 → React Router v7 | |
| 29 | | [model-viewer.md](./references/model-viewer.md) | 3D model support (.glb/.usdz) with ModelViewer component and AR | |
| 30 | | [performance-best-practices.md](./references/performance-best-practices.md) | Caching strategies, streaming, deferred data, third-party scripts, query optimization | |
| 31 | | [variant-media-grouping.md](./references/variant-media-grouping.md) | Group product media by variant option (e.g. Color) | |
| 32 | | [weaverse-hydrogen-integration.md](./references/weaverse-hydrogen-integration.md) | Complete Weaverse integration: component registration, theme schema, data fetching | |
| 33 | |
| 34 | ## How to Use |
| 35 | |
| 36 | Each cookbook describes: |
| 37 | - **What** the feature does |
| 38 | - **Prerequisites** to check first |
| 39 | - **Step-by-step implementation** — file changes, code snippets, diffs |
| 40 | - **Troubleshooting** — common issues and fixes |
| 41 | |
| 42 | > Recipe file names reference the Hydrogen skeleton template. Adapt file paths to match your project's structure. |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
