Hydrogen E-commerce UX Skill

Unofficial community project. Not affiliated with, endorsed by, or sponsored by Shopify Inc. "Shopify" and "Hydrogen" are trademarks of Shopify Inc. This skill is an independent resource that summarizes publicly available UX research and documentation.

A Claude skill that pairs research-backed UX best practices (Baymard Institute, Nielsen Norman Group) with Shopify Hydrogen 2026 technical conventions (React Router v7, Oxygen, Storefront API).

Load this skill into Claude and every Hydrogen task — building a PDP, reviewing a cart drawer, setting up filters — gets grounded in usability research instead of vibes.

What it covers

• Homepage & navigation — category hierarchy, search placement, menu patterns
• Product detail pages — imagery, variants, pricing, ATC behavior
• Cart & checkout — guest checkout, form design, cost transparency, error recovery
• Search & filters — autosuggest, no-results recovery, filter UI patterns
• Mobile, accessibility, trust — WCAG, tap targets, Core Web Vitals, trust signals
• Hydrogen technical patterns — loaders, caching, RSC boundaries, CartForm, SEO

Sources

• Baymard Institute — 200,000+ hours of usability testing, 700+ guidelines
• Nielsen Norman Group — 20+ years of ecommerce research
• Shopify Hydrogen docs — official framework documentation

Structure

hydrogen-ecommerce-ux/
├── SKILL.md                              # Entry point — Claude reads this first
└── references/
    ├── homepage-and-navigation.md
    ├── product-page.md
    ├── cart-and-checkout.md
    ├── search-and-filters.md
    ├── mobile-accessibility-trust.md
    └── hydrogen-technical-patterns.md

SKILL.md is a router. Each reference file is a focused deep-dive that Claude loads on demand, so context stays small and relevant.

How to use it

Option 1: Claude.ai (personal / Pro / Team)

1. Download the .skill file from releases (or package it yourself — see below)
2. Go to Claude.ai → Settings → Capabilities → Skills
3. Upload the .skill file
4. Start a new conversation; the skill auto-triggers when Hydrogen/ecommerce topics come up

Option 2: Claude Code / Claude API

Place the hydrogen-ecommerce-ux/ folder in your project's .claude/skills/ directory (for Claude Code) or reference it in your system prompt (for API).

Option 3: Manual use

Share the SKILL.md + relevant references in any chat. Claude will follow the guidance.

Example prompts that trigger this skill

• "Build me a product card component for my Hydrogen store"
• "Review my checkout flow for UX issues"
• "What filters should I add to my collection page?"
• "My cart drawer isn't optimistic — fix it"
• "Audit this PDP for conversion issues"

Packaging the skill for distribution

If you're contributing or distributing, package with Anthropic's skill-creator tool:

python -m scripts.package_skill ./hydrogen-ecommerce-ux

This produces a .skill file (a zip under the hood) that others can import.

Contributing

The guidelines in this skill reflect publicly available research, summarized and paraphrased. If you want to add:

• New patterns — open an issue with the source (Baymard article URL, NN/g report title, or Shopify doc)
• Hydrogen version updates — Shopify ships quarterly; the hydrogen-technical-patterns.md file is the one to refresh
• Non-English locales — address formats, postal codes, and payment methods vary; pull requests welcome

Do not copy paid Baymard Premium or NN/g report content verbatim. Summarize in your own words and cite the source.

License

MIT — see LICENSE. UX research remains the intellectual property of Baymard Institute and NN/g; this skill only summarizes publicly available guidance.

Credits

Created by the Shopify Hydrogen developer community. Research attributed to Baymard Institute and Nielsen Norman Group.