{"id":"0339cd3f-07c2-42c3-b6e0-7fbc5999d2fe","shortId":"QPARta","kind":"skill","title":"hydrogen-cookbooks","tagline":"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.","description":"# Hydrogen Cookbooks\n\nConcrete, 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.\n\n## Live Documentation\n\nFor the latest Hydrogen cookbook recipes from Shopify:\n\n```bash\nnode scripts/search_shopify_docs.mjs \"hydrogen cookbook <topic>\"\n```\n\nFor Weaverse-specific patterns:\n\n```bash\nnode scripts/search_weaverse_docs.mjs \"<topic>\"\n```\n\nThe references below are curated guides that may include Weaverse-specific patterns not available in the live docs.\n\n## Available Cookbooks\n\n| Cookbook | Description |\n|----------|-------------|\n| [bundles.md](./references/bundles.md) | Display product bundles with badges and bundled variant line items in the cart |\n| [combined-listings.md](./references/combined-listings.md) | Handle combined listings — utilities, filters, media grouping, price range display |\n| [customer-account-api.md](./references/customer-account-api.md) | Set up the Customer Account API with tunnel for local dev |\n| [hydrogen-react-router.md](./references/hydrogen-react-router.md) | Import replacement guide: Remix v2 → React Router v7 |\n| [model-viewer.md](./references/model-viewer.md) | 3D model support (.glb/.usdz) with ModelViewer component and AR |\n| [performance-best-practices.md](./references/performance-best-practices.md) | Caching strategies, streaming, deferred data, third-party scripts, query optimization |\n| [variant-media-grouping.md](./references/variant-media-grouping.md) | Group product media by variant option (e.g. Color) |\n| [weaverse-hydrogen-integration.md](./references/weaverse-hydrogen-integration.md) | Complete Weaverse integration: component registration, theme schema, data fetching |\n\n## How to Use\n\nEach cookbook describes:\n- **What** the feature does\n- **Prerequisites** to check first\n- **Step-by-step implementation** — file changes, code snippets, diffs\n- **Troubleshooting** — common issues and fixes\n\n> Recipe file names reference the Hydrogen skeleton template. Adapt file paths to match your project's structure.","tags":["hydrogen","cookbooks","shopify","skills","weaverse","agent-skills","agentic-commerce","shopify-hydrogen","shopify-hydrogen-skills","weaverse-hydrogen"],"capabilities":["skill","source-weaverse","skill-hydrogen-cookbooks","topic-agent-skills","topic-agentic-commerce","topic-shopify-hydrogen","topic-shopify-hydrogen-skills","topic-weaverse-hydrogen"],"categories":["shopify-hydrogen-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Weaverse/shopify-hydrogen-skills/hydrogen-cookbooks","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Weaverse/shopify-hydrogen-skills","source_repo":"https://github.com/Weaverse/shopify-hydrogen-skills","install_from":"skills.sh"}},"qualityScore":"0.466","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 33 github stars · SKILL.md body (2,098 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-01T12:57:20.730Z","embedding":null,"createdAt":"2026-04-18T22:21:45.680Z","updatedAt":"2026-05-01T12:57:20.730Z","lastSeenAt":"2026-05-01T12:57:20.730Z","tsv":"'/references/bundles.md':110 '/references/combined-listings.md':125 '/references/customer-account-api.md':137 '/references/hydrogen-react-router.md':150 '/references/model-viewer.md':160 '/references/performance-best-practices.md':171 '/references/variant-media-grouping.md':184 '/references/weaverse-hydrogen-integration.md':194 '3d':23,161 'account':22,142 'adapt':241 'api':143 'ar':169 'avail':100,105 'badg':115 'bash':73,83 'build':11,40 'bundl':18,113,117 'bundles.md':109 'cach':172 'cart':123 'chang':59,224 'check':216 'code':57,225 'color':192 'combin':19,127 'combined-listings.md':124 'common':229 'complet':195 'compon':167,198 'concret':33 'contain':54 'cookbook':3,32,49,69,77,106,107,208 'curat':90 'custom':21,141 'customer-account-api.md':136 'data':176,202 'defer':175 'describ':209 'descript':108 'dev':148 'diff':227 'display':111,135 'doc':104 'document':64 'e.g':191 'featur':12,42,212 'fetch':203 'file':58,223,234,242 'filter':130 'first':217 'fix':232 'glb/.usdz':164 'group':132,185 'guid':9,38,91,153 'handl':126 'hydrogen':2,16,31,46,68,76,238 'hydrogen-cookbook':1 'hydrogen-react-router.md':149 'implement':8,61,222 'import':151 'includ':94 'integr':30,197 'issu':230 'item':120 'latest':67 'line':119 'list':20,128 'live':63,103 'local':147 'match':245 'may':93 'media':27,131,187 'model':24,162 'model-viewer.md':159 'modelview':166 'name':235 'node':74,84 'note':62 'optim':182 'option':190 'parti':179 'path':243 'pattern':82,98 'perform':25 'performance-best-practices.md':170 'prerequisit':214 'price':133 'product':112,186 'project':247 'queri':181 'rang':134 'react':156 'recip':55,70,233 'refer':87,236 'registr':199 'remix':154 'replac':152 'router':157 'schema':201 'script':180 'scripts/search_shopify_docs.mjs':75 'scripts/search_weaverse_docs.mjs':85 'self':53 'self-contain':52 'set':138 'shopifi':15,45,72 'skeleton':239 'skill' 'skill-hydrogen-cookbooks' 'snippet':226 'source-weaverse' 'specif':41,81,97 'step':5,7,35,37,219,221 'step-by-step':4,34,218 'storefront':17,47 'strategi':173 'stream':174 'structur':249 'support':163 'templat':240 'theme':200 'third':178 'third-parti':177 'topic-agent-skills' 'topic-agentic-commerce' 'topic-shopify-hydrogen' 'topic-shopify-hydrogen-skills' 'topic-weaverse-hydrogen' 'troubleshoot':228 'tunnel':145 'use':206 'util':129 'v2':155 'v7':158 'variant':26,118,189 'variant-media-grouping.md':183 'weavers':29,80,96,196 'weaverse-hydrogen-integration.md':193 'weaverse-specif':79,95","prices":[{"id":"6eb49197-4965-4919-ba9d-40a7e53bc07b","listingId":"0339cd3f-07c2-42c3-b6e0-7fbc5999d2fe","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Weaverse","category":"shopify-hydrogen-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:21:45.680Z"}],"sources":[{"listingId":"0339cd3f-07c2-42c3-b6e0-7fbc5999d2fe","source":"github","sourceId":"Weaverse/shopify-hydrogen-skills/hydrogen-cookbooks","sourceUrl":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/hydrogen-cookbooks","isPrimary":false,"firstSeenAt":"2026-04-18T22:21:45.680Z","lastSeenAt":"2026-05-01T12:57:20.730Z"}],"details":{"listingId":"0339cd3f-07c2-42c3-b6e0-7fbc5999d2fe","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Weaverse","slug":"hydrogen-cookbooks","github":{"repo":"Weaverse/shopify-hydrogen-skills","stars":33,"topics":["agent-skills","agentic-commerce","shopify-hydrogen","shopify-hydrogen-skills","weaverse-hydrogen"],"license":null,"html_url":"https://github.com/Weaverse/shopify-hydrogen-skills","pushed_at":"2026-04-24T10:12:43Z","description":"Dedicated agent skills for building, upgrading, and maintaining Shopify Hydrogen storefronts — works with Claude, Cursor, Copilot, and more.","skill_md_sha":"c73073810406473be2f069fdfc06861345ebc9ba","skill_md_path":"skills/hydrogen-cookbooks/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/hydrogen-cookbooks"},"layout":"multi","source":"github","category":"shopify-hydrogen-skills","frontmatter":{"name":"hydrogen-cookbooks","description":"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."},"skills_sh_url":"https://skills.sh/Weaverse/shopify-hydrogen-skills/hydrogen-cookbooks"},"updatedAt":"2026-05-01T12:57:20.730Z"}}