shopify-hydrogen

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

Updated Nov 16, 2022
One-click install
npx skills add https://github.com/kos3nz/dotfiles --skill shopify-hydrogen-kos3nz
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: shopify-hydrogen
Source: https://github.com/kos3nz/dotfiles/tree/main/.config/agents/skills/shopify-hydrogen
Command: npx skills add https://github.com/kos3nz/dotfiles --skill shopify-hydrogen-kos3nz

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Hydrogen storefront development often requires assembling complex features from scratch. This Skill provides cookbook recipes and best practices to accelerate building production-ready storefronts using Hydrogen rather than Storefront GraphQL when Hydrogen is mentioned.

Core Features & Use Cases

  • Ready-to-use Hydrogen storefront recipes covering common storefront capabilities (B2B, Bundles, Metaobjects, Markets, Subscriptions, caching, and more).
  • Guidance on when to use Hydrogen APIs vs Storefront GraphQL to improve developer productivity and reduce data-fetching pitfalls.
  • Use cases across express servers, dynamic content, and third-party integrations to shorten implementation time.

Quick Start

Start with a Hydrogen storefront recipe that matches your store needs and adapt it to your data model.

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 with bundles and metaobjects?

Use Hydrogen storefront recipes to accelerate building bundles, metaobjects, and dynamic content features. These cookbook recipes provide ready-made patterns adapted to your data model, improving developer productivity and reducing data-fetching pitfalls during storefront development.

When should I use Hydrogen APIs instead of Storefront GraphQL for my storefront?

Use Hydrogen APIs instead of Storefront GraphQL when your storefront requires optimized data fetching for features like caching, dynamic content, or third-party integrations. The recipes provide explicit guidance on choosing Hydrogen APIs to reduce data-fetching pitfalls and improve developer productivity.

Does this Hydrogen storefront cookbook support Express server environments?

Yes, these Hydrogen storefront recipes are designed to run in Node.js environments and include explicit documentation for Express servers. They cover usage patterns for Express server implementations, caching strategies, and third-party API integrations.

What is the best way to implement caching strategies in a Shopify Hydrogen storefront?

Use the ready-made Hydrogen storefront recipes to implement caching strategies. The cookbook documents specific caching patterns and best practices for Node.js environments, shortening implementation time for production-ready storefronts.

Do I need TypeScript to use these Shopify Hydrogen recipes?

TypeScript is a required dependency for these Shopify Hydrogen recipes. The cookbook recipes are built using TypeScript to provide production-ready storefront patterns for features like B2B, subscriptions, and Markets within your Node.js environment.