shopify-hydrogen

Generate Shopify Hydrogen storefront code from verified cookbook recipes.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/EsellersEG/meezy-integration --skill shopify-hydrogen-esellerseg
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shopify-hydrogen
Source: https://github.com/EsellersEG/meezy-integration/tree/main/.agents/skills/shopify-hydrogen
Command: npx skills add https://github.com/EsellersEG/meezy-integration --skill shopify-hydrogen-esellerseg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @shopify/hydrogen, @shopify/hydrogen-react, react-router, graphql, and includes scripts (resource) components.

What problem does it solve?

This Skill streamlines the development of headless Shopify storefronts by providing a standardized, cookbook-driven approach to implementing complex commerce features while ensuring optimal performance and correct API usage.

Core Features & Use Cases

  • Cookbook Recipes: Access step-by-step implementations for B2B commerce, subscriptions, dynamic metaobjects, and third-party integrations.
  • Validation Guardrails: Ensures developers use the correct Hydrogen UI components instead of raw Storefront GraphQL types, preventing common rendering errors.
  • Use Case: When building a custom storefront, use this Skill to quickly implement a complex feature like 'Combined Listings' or 'Infinite Scroll' by searching the verified Hydrogen cookbook recipes.

Quick Start

Use the shopify-hydrogen skill to search for the implementation recipe for B2B commerce and generate the corresponding UI framework code.

Frequently Asked Questions about shopify-hydrogen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a headless Shopify storefront with React?

This Skill provides implementation guidance for Shopify Hydrogen headless storefronts, facilitating the integration of complex commerce features like subscriptions and B2B workflows using verified cookbook recipes.

How do I implement B2B workflows in a Hydrogen storefront?

This Skill provides access to step-by-step cookbook implementations for B2B commerce, subscriptions, dynamic metaobjects, and third-party integrations within Hydrogen storefronts.

Should I use direct Storefront GraphQL queries for rendering Shopify UI components?

No, this Skill enforces validation guardrails ensuring developers use the correct Hydrogen UI components instead of raw Storefront GraphQL types to prevent common rendering errors.

Does this approach support subscriptions and dynamic metaobjects?

Yes, this Skill provides step-by-step cookbook recipes specifically for implementing complex commerce features like subscriptions and dynamic metaobjects in headless storefronts.

What is the best way to add infinite scroll to a custom Shopify storefront?

The best way to add infinite scroll is to use this Skill to search verified Hydrogen cookbook recipes and generate the corresponding high-performance UI framework code for your storefront.

Why does my custom storefront rendering break when using raw Storefront GraphQL?

Custom storefront rendering breaks because this Skill enforces validation guardrails that require using Hydrogen UI components over raw Storefront GraphQL types to prevent common rendering errors and ensure performance.