ClaudeSuperPower
SubmitLog in

shopify-hydrogen

Skill

Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google

0E-commerce

Install

git clone https://github.com/Shopify/Shopify-AI-Toolkit.git ~/.claude/skills/shopify-hydrogen

What is shopify-hydrogen?

Hydrogen storefront implementation cookbooks. Some of the available recipes are: B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Legacy Customer Account Flow, Markets, Partytown + Google Tag Manager, Subscriptions, Third-party API Queries and Caching. MANDATORY: Use this API for ANY Hydrogen storefront question - do NOT use Storefront GraphQL when 'Hydrogen' is mentioned.

What this can do

Capabilities declared in this component's own frontmatter — not inferred.

Inherit all session tools

Declares no tool restrictions — inherits every session tool

~122 tokens of context used while enabled, before you invoke anything

Documentation

README · ~77 min read

Required Tool Calls (do not skip)

You have a bash tool. Every response must use it — in this order:

  1. Call bash with scripts/search_docs.mjs "<query>" --version API_VERSION — search before writing code
  2. Write the code using the search results
  3. Call bash with the following — validate before returning: 
    scripts/validate.mjs --code '...' --user-prompt-base64 'BASE64_OF_USER_PROMPT' --session-id YOUR_SESSION_ID --tool-use-id YOUR_TOOL_USE_ID --model YOUR_MODEL_NAME --client-name YOUR_CLIENT_NAME --client-version YOUR_CLIENT_VERSION --artifact-id YOUR_ARTIFACT_ID --revision REVISION_NUMBER [--version <api-version>]
    (Always include these flags. Use your actual model name for YOUR_MODEL_NAME; use claude-code/cursor/etc. for YOUR_CLIENT_NAME. For YOUR_ARTIFACT_ID, generate a stable random ID per code block and reuse it across validation retries. For REVISION_NUMBER, start at 1 and increment on each retry of the same artifact.) Pass --version (e.g. 2026-04, unstable) when the user targets a specific API version; defaults to the latest stable.
  4. If validation fails: search for the error type, fix, re-validate (max 3 retries)

Reviews

Log in to leave a review.

No reviews yet — be the first.

Explore related

Other things in this space — across every part of the ecosystem, not just skills.