Shopify Hydrogen Skills

Agent skills for building, maintaining, and upgrading Shopify Hydrogen storefronts with Weaverse. Works with Claude Code, Cursor, GitHub Copilot, Windsurf, OpenCode, OpenClaw, Gemini CLI, and any agent that supports markdown skill files.

Why skills, not docs? Skills are concise, agent-optimized knowledge that your coding agent loads before working on a task — structured for LLMs, not humans. Pair them with live doc search for the best results.

Quick Install

npx skills add Weaverse/shopify-hydrogen-skills

Auto-detects your coding agents and installs to all of them. Powered by skills.sh.

For manual per-agent setup, see INSTALL.md.

Skills

Weaverse build pipeline

The site-building skills chain from a source (website or Figma) to a live, maintainable Weaverse project:

INPUT ADAPTERS                          GENERATE                       DELIVER
cloning-websites-to-weaverse  ┐
                              ├─→  generating-weaverse-project-json ─→  import once into Studio (creates structure)
figma-to-weaverse             ┘                                    └─→  weaverse-content-api (updates content after,
                                                                         bulk edits, Shopify resource upload)

Initial structure is created by importing the generated JSON. Everything after — copy, images, localization, bulk edits — goes through the Content API, which updates existing items but cannot create new ones.

Live Docs

Instead of baking static API docs into skill files (which go stale), this repo ships live doc fetching scripts that query official sources at runtime:

# Search Shopify Hydrogen docs (shopify.dev)
node scripts/search_shopify_docs.mjs "createHydrogenContext"
node scripts/search_shopify_docs.mjs "CartForm actions"

# Search Weaverse docs (docs.weaverse.io)
node scripts/search_weaverse_docs.mjs "component schema"

# Fetch a specific Weaverse doc page
node scripts/get_weaverse_page.mjs "development-guide/component-schema"

# Check for Pilot theme updates
node skills/theme-update/scripts/check_pilot_updates.mjs

The references/ folders in each skill serve as offline fallback — cached snapshots for when live search is unavailable.

All scripts are zero-dependency — Node.js 18+ built-ins only.

Repo Structure

├── skills/
│   ├── setup-weaverse-project/    # New project setup from zero to local preview
│   │   └── SKILL.md
│   │
│   ├── shopify-hydrogen/          # Core Hydrogen APIs
│   │   ├── SKILL.md
│   │   └── references/            # Setup, caching, cart patterns
│   │
│   ├── weaverse-hydrogen/         # Weaverse CMS integration
│   │   ├── SKILL.md
│   │   ├── references/            # 13 deep-dive guides
│   │   └── examples/              # Production-ready component code
│   │
│   ├── hydrogen-cookbooks/        # Feature recipes
│   │   ├── SKILL.md
│   │   └── references/            # Bundles, combined listings, 3D, etc.
│   │
│   ├── hydrogen-upgrades/         # Framework version migrations
│   │   ├── SKILL.md
│   │   └── references/            # 2024.4.7 → … → 2026.1.0
│   │
│   ├── theme-update/              # Pilot theme updater
│       ├── SKILL.md
│       └── scripts/
│           └── check_pilot_updates.mjs
│
│   ├── weaverse-integration/      # Integrate into existing Hydrogen
│       └── SKILL.md
│
│   ├── cloning-websites-to-weaverse/      # Clone sites into Weaverse
│   │   └── SKILL.md
│
│   ├── figma-to-weaverse/            # Figma design → Weaverse sections
│   │   ├── SKILL.md
│   │   └── references/              # Figma MCP extraction + token mapping
│
│   ├── generating-weaverse-project-json/  # Weaverse import JSON generator
│   │   ├── SKILL.md
│   │   ├── references/
│   │   └── scripts/
│
│   └── weaverse-content-api/         # Live content read/update over REST
│       ├── SKILL.md
│       ├── references/              # Endpoints + Portable Text
│       └── scripts/
│           └── weaverse_content_api.mjs
│
├── scripts/                       # Live doc fetching (shared)
│   ├── search_shopify_docs.mjs
│   ├── search_weaverse_docs.mjs
│   └── get_weaverse_page.mjs
│
├── .cursorrules                   # Cursor agent rules
├── AGENTS.md                      # Repo guidance for AI agents
├── INSTALL.md                     # Manual per-agent install guide
└── package.json

Contributing

PRs welcome — especially for:

• New cookbooks (feature implementation guides)
• Upgrade guides for newer Hydrogen versions
• Improved offline references
• New live doc scripts for other sources

License

MIT — Weaverse