shopify-hydrogen

Present Hydrogen cookbook recipes and enforce Hydrogen-specific API usage.

Updated May 1, 2026

Search Tags:#frontend #recipes #web-development #hydrogen #storefront #cookbook

Ready to run

npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill shopify-hydrogen-oguzhanguvenkaya

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: shopify-hydrogen
Source: https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations/tree/main/skills/shopify-hydrogen
Command: npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill shopify-hydrogen-oguzhanguvenkaya

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires typescript, and includes scripts (resource) components.

What problem does it solve?

Hydrogen storefront development often requires guided recipes, best practices, and a clear boundary on API usage to avoid Storefront GraphQL for Hydrogen prompts. This skill provides cookbook-style recipes to accelerate Hydrogen storefront implementations and ensure consistent patterns.

Core Features & Use Cases

A curated set of Hydrogen recipes (e.g., B2B Commerce, Bundles, Combined Listings, Custom Cart Method, Dynamic Content with Metaobjects, Express Server, Google Tag Manager Integration, Infinite Scroll, Markets, Subscriptions) with operational guidance and examples.
Clear rule: use Hydrogen API (api: "hydrogen") instead of Storefront GraphQL when Hydrogen is mentioned, to ensure framework-consistent behavior.
Real-world workflows: rapid storefront MVPs, feature prototyping, and advanced configurations.

Quick Start

Choose a Hydrogen storefront recipe from the cookbook and scaffold it into your Hydrogen app to begin.

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 Shopify Hydrogen storefront for B2B commerce and subscriptions?▼

Building a Hydrogen storefront involves selecting a cookbook recipe like B2B commerce or subscriptions and scaffolding it into your app. This enforces framework-consistent behavior by using the Hydrogen API instead of Storefront GraphQL.

What is the best way to implement dynamic content and infinite scroll in a Hydrogen storefront?▼

The best way to implement dynamic content and infinite scroll in a Hydrogen storefront is via curated cookbook recipes. These recipes provide operational guidance for Metaobjects and performance optimizations while enforcing Hydrogen-specific API usage.

How do I integrate Google Tag Manager into a Hydrogen web development project?▼

Integrating Google Tag Manager into a Hydrogen web development project uses a specific cookbook recipe. This recipe provides operational guidance and examples to ensure proper tracking implementation within your storefront.

Should I use the Hydrogen API or Storefront GraphQL for my storefront development?▼

You should use the Hydrogen API rather than Storefront GraphQL for storefront development. This enforces framework-consistent behavior and avoids Storefront GraphQL prompts when Hydrogen is mentioned.

Can I use TypeScript with Hydrogen recipes for advanced storefront configurations?▼

Yes, you can use TypeScript with Hydrogen recipes for advanced storefront configurations. TypeScript is a required dependency, and the recipes support feature-rich implementations like combined listings and custom cart methods.