skills.rest
oguzhanguvenkaya
oguzhanguvenkayaCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/oguzhanguvenkaya/oguzhan_claude_code_configurations --skill shopify-hydrogen-oguzhanguvenkaya
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
EsellersEGEsellersEG

shopify-hydrogen

Generate Shopify Hydrogen storefront code from verified cookbook recipes.

Community
Advanced
kos3nzkos3nz

shopify-hydrogen

Provide Hydrogen storefront recipes and guidance for Node.js environments.

Community
Advanced
ShopifyShopify
491

shopify-hydrogen

Generate Shopify Hydrogen storefront code with validation and required imports.

Official
Advanced
bdbchbdbch
2

shopify-development

Develop and deploy Shopify apps and themes with Liquid and Hydrogen.

Community
Advanced