skills.rest
Shopify
ShopifyOFFICIAL
Explore all skills by this author →
Website𝕏@ShopifyEngGitHub

shopify-hydrogen

Generate Shopify Hydrogen storefront code with validation and required imports.

491|60|Updated Apr 1, 2026
Search Tags:#validation#shopify#code-generation#hydrogen#storefront#cookbook
One-click install
npx skills add https://github.com/Shopify/Shopify-AI-Toolkit --skill shopify-hydrogen-shopify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: shopify-hydrogen
Source: https://github.com/Shopify/Shopify-AI-Toolkit/tree/main/skills/shopify-hydrogen
Command: npx skills add https://github.com/Shopify/Shopify-AI-Toolkit --skill shopify-hydrogen-shopify

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Developing Hydrogen storefronts requires piecing together many patterns, APIs, and best‑practice implementations. This Skill consolidates the extensive Hydrogen cookbook into actionable code, removing guesswork and reducing development time.

Core Features & Use Cases

  • Cookbook‑driven recipes: Provides ready‑to‑use implementations for common features like B2B commerce, bundles, infinite scroll, and third‑party API integration.
  • Automated search & validation: Each response runs a documentation search and validates the generated code with Shopify’s validation scripts before returning it.
  • Use Case: Quickly generate a product‑list component that fetches data via the Storefront API, applies caching, and includes Google Tag Manager integration, all with a single prompt.

Quick Start

Request a Hydrogen component that displays a dynamic product grid with caching and GTM support.

Frequently Asked Questions about shopify-hydrogen

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

FAQPage Schema
How do I generate Hydrogen storefront components from a prompt?▼

To generate Hydrogen storefront components from a prompt, the Skill applies cookbook recipes to build UI components, data fetching, and integrations. It searches documentation and validates the generated code before returning it.

What is the best way to build a Shopify Hydrogen product grid with caching?▼

The best way to build a Shopify Hydrogen product grid with caching is using cookbook-driven recipes that fetch data via the Storefront API. This approach consolidates patterns and APIs into actionable code.

Do I need TypeScript to build a Shopify Hydrogen storefront?▼

You need TypeScript to build a Shopify Hydrogen storefront because it is a required dependency. The generated code adheres to the Hydrogen API and includes necessary imports and validation parameters.

Can I use cookbook recipes for B2B commerce and infinite scroll in Hydrogen?▼

You can use cookbook recipes for B2B commerce and infinite scroll in Hydrogen. These ready-to-use implementations extend to bundles and third-party API integration, removing development guesswork.

Why does generated Hydrogen code require validation scripts?▼

Generated Hydrogen code requires validation scripts to ensure correctness before returning the output. Automated search and validation processes check the code against Shopify's validation parameters.

Related Skills

Explore More Software Engineering Skills→
tomtoto757tomtoto757
14

shopify-storefront-api

Query products and manage carts via the Shopify Storefront GraphQL API.

Community
Intermediate
kos3nzkos3nz

shopify-hydrogen

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

Community
Advanced
EsellersEGEsellersEG

shopify-hydrogen

Generate Shopify Hydrogen storefront code from verified cookbook recipes.

Community
Advanced
shalevaminshalevamin

shopify-expert

Build and debug Shopify themes, apps, and Storefront API integrations.

Community
Advanced