Hydrogen E-commerce UX Best Practices

This skill gives Claude research-backed UX guidance for building Shopify Hydrogen storefronts. Guidelines come from Baymard Institute (~200,000+ hours of e-commerce usability testing across 90+ leading US/EU sites) and Nielsen Norman Group's ecommerce research (20+ years, 350+ sites tested). Technical recommendations follow Shopify Hydrogen 2026 conventions (React Router v7, Oxygen, Storefront API).

When to apply this skill

Apply the relevant reference file whenever you are writing, reviewing, or advising on any of these Hydrogen surfaces:

• Homepage, navigation, collections → references/homepage-and-navigation.md
• Product detail pages (PDP) → references/product-page.md
• Cart, checkout, account → references/cart-and-checkout.md
• Search, filters, sorting → references/search-and-filters.md
• Mobile UX, accessibility, trust, performance → references/mobile-accessibility-trust.md
• Hydrogen-specific technical patterns → references/hydrogen-technical-patterns.md

Do not dump every guideline at once. Read only the reference(s) relevant to the current task. If you are unsure, start with the one closest to the file or route the user is working on.

Core workflow