{"id":"5d3d3197-b1f3-4dfd-8f3e-18fcc68f9aa5","shortId":"c3zUKu","kind":"skill","title":"weaverse-hydrogen","tagline":"Build Shopify Hydrogen storefronts with Weaverse — components, schemas, loaders, theming, data fetching, React Router v7, deployment, and advanced features.","description":"# Weaverse Hydrogen — Agent Skill\n\n> Build Shopify Hydrogen storefronts with Weaverse visual page builder.\n> Docs: https://docs.weaverse.io | GitHub: https://github.com/Weaverse\n\n## Live Documentation\n\nFor the most up-to-date Weaverse documentation, use these scripts:\n\n- `node scripts/search_weaverse_docs.mjs \"<query>\"` — search Weaverse docs\n- `node scripts/get_weaverse_page.mjs \"<page-path>\"` — fetch a specific page (use paths from search results)\n- Weaverse docs: https://docs.weaverse.io\n\n**Examples:**\n```bash\nnode scripts/search_weaverse_docs.mjs \"component schema\"\nnode scripts/search_weaverse_docs.mjs \"data fetching\"\nnode scripts/get_weaverse_page.mjs \"development-guide/component-schema\"\nnode scripts/get_weaverse_page.mjs \"api-reference/weaverse-client\"\n```\n\nThe reference files below provide offline context but may not reflect the latest changes.\n\n---\n\n## What is Weaverse?\n\nWeaverse is a visual page builder for Shopify Hydrogen. It lets merchants customize storefronts via a drag-and-drop Studio while developers build type-safe React components with schemas that define the editor UI.\n\n**Stack:** React 19 · React Router v7 · Shopify Hydrogen · TypeScript · Tailwind CSS · Vite\n\n---\n\n## 1. Project Structure\n\n```\napp/\n├── components/        # Reusable UI components\n├── graphql/           # GraphQL queries & fragments\n├── hooks/             # Custom React hooks\n├── routes/            # React Router v7 route files\n├── sections/          # Weaverse section components ← YOUR WORK GOES HERE\n├── styles/            # Global styles + Tailwind\n├── weaverse/\n│   ├── components.ts  # Component registry\n│   ├── schema.server.ts  # Theme schema (global settings)\n│   └── csp.ts         # Content Security Policy for Weaverse\n├── entry.client.tsx\n├── entry.server.tsx\n└── root.tsx           # Wrapped with withWeaverse(App)\nserver.ts              # WeaverseClient initialization\nvite.config.ts\nreact-router.config.ts\ntailwind.config.js\n.env\n```\n\n---\n\n## 2. Component Anatomy\n\nEvery Weaverse component has up to 3 exports from a single file (or directory):\n\n```tsx\n// app/sections/my-section/index.tsx\n\n// 1. Default export — React component\nfunction MySection(props: MySectionProps) { ... }\nexport default MySection;\n\n// 2. Schema export — editor configuration\nexport let schema = createSchema({ ... });\n\n// 3. Loader export (optional) — server-side data fetching\nexport let loader = async (args: ComponentLoaderArgs<DataType>) => { ... };\n```\n\n### Minimal Example\n\n```tsx\nimport { createSchema } from '@weaverse/hydrogen';\nimport type { HydrogenComponentProps } from '@weaverse/hydrogen';\n\ninterface BannerProps extends HydrogenComponentProps {\n  heading: string;\n  description: string;\n}\n\nfunction Banner({ heading, description, children, ...rest }: BannerProps) {\n  return (\n    <section {...rest} className=\"py-16 px-4 text-center\">\n      <h2 className=\"text-3xl font-bold\">{heading}</h2>\n      <p className=\"mt-4 text-lg text-gray-600\">{description}</p>\n      {children}\n    </section>\n  );\n}\n\nexport default Banner;\n\nexport let schema = createSchema({\n  type: 'banner',\n  title: 'Banner',\n  settings: [\n    {\n      group: 'Content',\n      inputs: [\n        { type: 'text', name: 'heading', label: 'Heading', defaultValue: 'Hello World' },\n        { type: 'textarea', name: 'description', label: 'Description', defaultValue: 'Welcome to our store.' },\n      ],\n    },\n  ],\n  presets: {\n    heading: 'Hello World',\n    description: 'Welcome to our store.',\n  },\n});\n```\n\n### Key Rules\n\n- **Spread `{...rest}`** on the root element — required for Weaverse Studio interaction.\n- **Render `{children}`** if the component accepts child components (`childTypes`).\n- **`forwardRef` is optional** in React 19. If using React 18, wrap with `forwardRef` and attach `ref` to root element.\n- **`type` must be unique** across all components, use kebab-case (e.g., `hero-banner`).\n\n---\n\n## 3. Component Registration\n\nComponents must be registered in `app/weaverse/components.ts`:\n\n```tsx\nimport type { HydrogenComponent } from '@weaverse/hydrogen';\n\n// MUST use namespace imports (import * as X), NOT default imports\nimport * as HeroBanner from '~/sections/hero-banner';\nimport * as FeaturedCollection from '~/sections/featured-collection';\nimport * as ProductCard from '~/sections/product-card';\n\nexport let components: HydrogenComponent[] = [\n  HeroBanner,\n  FeaturedCollection,\n  ProductCard,\n];\n```\n\n**Common mistake:** Using `import HeroBanner from ...` — this won't work. Always `import * as HeroBanner from ...`.\n\n---\n\n## 4. Schema with `createSchema()`\n\n```tsx\nimport { createSchema } from '@weaverse/hydrogen';\n\nexport let schema = createSchema({\n  type: 'my-component',          // Unique kebab-case identifier\n  title: 'My Component',         // Display name in Studio\n  limit: 1,                      // Max instances per page (optional)\n  enabledOn: {                   // Page type restrictions (optional)\n    pages: ['PRODUCT', 'COLLECTION'],\n  },\n  settings: [                    // Editor UI groups\n    {\n      group: 'Content',\n      inputs: [\n        { type: 'text', name: 'heading', label: 'Heading', defaultValue: 'Title' },\n        { type: 'richtext', name: 'body', label: 'Body' },\n        { type: 'image', name: 'image', label: 'Image' },\n        {\n          type: 'select', name: 'layout', label: 'Layout',\n          configs: {\n            options: [\n              { value: 'grid', label: 'Grid' },\n              { value: 'list', label: 'List' },\n            ],\n          },\n          defaultValue: 'grid',\n        },\n      ],\n    },\n  ],\n  childTypes: ['product-card', 'button'],  // Allowed child component types\n  presets: {                     // Defaults when component is added to page\n    heading: 'Title',\n    layout: 'grid',\n    children: [\n      { type: 'product-card' },\n      { type: 'product-card' },\n    ],\n  },\n});\n```\n\n**`inspector` is deprecated** — always use `settings`.\n\n**Page types for `enabledOn`:** `INDEX`, `PRODUCT`, `ALL_PRODUCTS`, `COLLECTION`, `COLLECTION_LIST`, `PAGE`, `BLOG`, `ARTICLE`, `CUSTOM`\n\n---\n\n## 5. Input Types (Quick Reference)\n\n| Type | Returns | Use For |\n|------|---------|---------|\n| `text` | `string` | Single-line text |\n| `textarea` | `string` | Multi-line text |\n| `richtext` | `string` (HTML) | Rich text with formatting |\n| `url` | `string` | URLs/links |\n| `image` | `WeaverseImage` object | Image picker from Shopify Files |\n| `video` | `WeaverseVideo` object | Video picker from Shopify Files |\n| `color` | `string` (#hex) | Color picker |\n| `range` | `number` | Slider (requires `configs: { min, max, step }`) |\n| `switch` | `boolean` | Toggle on/off |\n| `select` | `string` | Dropdown (requires `configs: { options }`) |\n| `toggle-group` | `string` | Button group (requires `configs: { options }`) |\n| `heading` | — | Section header in settings panel (no data) |\n| `datepicker` | `number` (timestamp) | Date/time picker |\n| `product` | Shopify product | Product picker |\n| `collection` | Shopify collection | Collection picker |\n| `blog` | Shopify blog | Blog picker |\n| `article` | Shopify article | Article picker |\n| `metaobject` | Shopify metaobject | Metaobject picker |\n| `product-list` | Shopify products[] | Multi-product picker |\n| `collection-list` | Shopify collections[] | Multi-collection picker |\n\n→ Full details: [references/04-input-settings.md](references/04-input-settings.md)\n\n---\n\n## 6. Data Fetching\n\n```tsx\nimport type { ComponentLoaderArgs, HydrogenComponentProps } from '@weaverse/hydrogen';\n\ntype MyData = { collectionHandle: string };\n\nexport let loader = async ({ weaverse, data }: ComponentLoaderArgs<MyData>) => {\n  let { storefront } = weaverse;\n  return await storefront.query(COLLECTION_QUERY, {\n    variables: { handle: data.collectionHandle },\n  });\n};\n\n// Derive props type from loader return\ntype Props = HydrogenComponentProps<Awaited<ReturnType<typeof loader>>> & MyData;\n\nfunction MyComponent({ loaderData, ...rest }: Props) {\n  let collection = loaderData?.collection;\n  return <section {...rest}>{collection?.title}</section>;\n}\nexport default MyComponent;\n```\n\n**Key patterns:**\n- `weaverse.storefront.query()` — Shopify Storefront API\n- `weaverse.fetchWithCache(url, options)` — External APIs with caching\n- `Promise.all([...])` — Parallel fetching\n- `shouldRevalidate: true` on schema inputs that affect the loader\n\n→ Full details: [references/05-data-fetching.md](references/05-data-fetching.md)\n\n---\n\n## 7. Styling & Theming\n\n**Tailwind CSS** is the primary styling approach.\n\n**Global theme settings** are defined in `app/weaverse/schema.server.ts` and applied via CSS variables:\n\n```tsx\n// app/components/GlobalStyle.tsx\nimport { useThemeSettings } from '@weaverse/hydrogen';\n\nexport function GlobalStyle() {\n  let settings = useThemeSettings();\n  if (!settings) return null;\n  return (\n    <style dangerouslySetInnerHTML={{ __html: `\n      :root {\n        --color-primary: ${settings.colorPrimary};\n        --body-base-size: ${settings.bodyBaseSize}px;\n        --heading-base-size: ${settings.headingBaseSize}px;\n      }\n    `}} />\n  );\n}\n```\n\n**CVA (Class Variance Authority)** for component variants:\n\n```tsx\nimport { cva } from 'class-variance-authority';\nlet buttonVariants = cva('inline-flex items-center rounded font-medium', {\n  variants: {\n    variant: { primary: 'bg-blue-600 text-white', secondary: 'bg-gray-200' },\n    size: { sm: 'h-8 px-3 text-sm', md: 'h-10 px-4', lg: 'h-12 px-6' },\n  },\n  defaultVariants: { variant: 'primary', size: 'md' },\n});\n```\n\n→ Full details: [references/06-styling-theming.md](references/06-styling-theming.md)\n\n---\n\n## 8. Weaverse API (Key Hooks & Utilities)\n\n| API | Purpose |\n|-----|---------|\n| `createSchema()` | Define component schema with Zod validation |\n| `WeaverseClient` | Server-side client (initialized in `server.ts`) |\n| `weaverse.loadPage({ type, handle })` | Load page data in route loaders |\n| `weaverse.loadThemeSettings()` | Load global theme settings |\n| `weaverse.fetchWithCache(url)` | Cached external API fetching |\n| `withWeaverse(App)` | HOC wrapping root `App` in `root.tsx` |\n| `useWeaverse()` | Access global Weaverse instance |\n| `useThemeSettings()` | Access global theme settings |\n| `useItemInstance()` | Access a specific component instance |\n| `useParentInstance()` | Access parent component instance |\n| `useChildInstances()` | Access child component instances |\n\n→ Full details: [references/10-weaverse-api.md](references/10-weaverse-api.md)\n\n---\n\n## 9. Server Setup (server.ts)\n\n```tsx\nimport { WeaverseClient } from '@weaverse/hydrogen';\nimport { components } from '~/weaverse/components';\nimport { themeSchema } from '~/weaverse/schema.server';\n\nexport async function createAppLoadContext(request, env, executionContext) {\n  let hydrogenContext = createHydrogenContext({ env, request, cache, waitUntil, session, /* ... */ });\n  return {\n    ...hydrogenContext,\n    weaverse: new WeaverseClient({\n      ...hydrogenContext,\n      request,\n      cache,\n      themeSchema,\n      components,\n    }),\n  };\n}\n```\n\n---\n\n## 10. Route Integration\n\n```tsx\n// app/routes/($locale)._index.tsx\nimport { WeaverseHydrogenRoot } from '@weaverse/hydrogen';\n\nexport async function loader({ context }: LoaderFunctionArgs) {\n  let weaverseData = await context.weaverse.loadPage({ type: 'INDEX' });\n  return { weaverseData };\n}\n\nexport default function Homepage() {\n  return <WeaverseHydrogenRoot />;\n}\n```\n\nFor product pages:\n\n```tsx\nexport async function loader({ context, params }: LoaderFunctionArgs) {\n  let weaverseData = await context.weaverse.loadPage({\n    type: 'PRODUCT',\n    handle: params.productHandle,\n  });\n  return { weaverseData, /* other data */ };\n}\n```\n\n---\n\n## Reference Index\n\nFor detailed information on specific topics, read these reference files:\n\n| # | File | Topic |\n|---|------|-------|\n| 01 | [references/01-project-structure.md](references/01-project-structure.md) | Project structure & file anatomy |\n| 02 | [references/02-creating-components.md](references/02-creating-components.md) | Component creation & registration |\n| 03 | [references/03-component-schema.md](references/03-component-schema.md) | createSchema(), settings, childTypes, presets, enabledOn |\n| 04 | [references/04-input-settings.md](references/04-input-settings.md) | All input types & configurations |\n| 05 | [references/05-data-fetching.md](references/05-data-fetching.md) | Loaders, Storefront API, caching |\n| 06 | [references/06-styling-theming.md](references/06-styling-theming.md) | Tailwind, theme settings, CVA, CSS variables |\n| 07 | [references/07-react-router-7.md](references/07-react-router-7.md) | React Router v7 conventions |\n| 08 | [references/08-hydrogen-fundamentals.md](references/08-hydrogen-fundamentals.md) | Hydrogen framework essentials |\n| 09 | [references/09-deployment.md](references/09-deployment.md) | Oxygen, Docker, env vars |\n| 10 | [references/10-weaverse-api.md](references/10-weaverse-api.md) | All hooks & WeaverseClient API |\n| 11 | [references/11-advanced-features.md](references/11-advanced-features.md) | Localization, data connectors, CSP |\n| 12 | [references/12-pilot-theme.md](references/12-pilot-theme.md) | Pilot theme patterns & conventions |\n| 13 | [references/13-migration-v5.md](references/13-migration-v5.md) | Remix → React Router v7 migration |\n\n## Examples\n\n| File | Shows |\n|------|-------|\n| [examples/hero-banner.tsx](examples/hero-banner.tsx) | Complete section with schema, settings groups, childTypes, presets |\n| [examples/featured-collection.tsx](examples/featured-collection.tsx) | Section with loader, Storefront API query |\n| [examples/product-card.tsx](examples/product-card.tsx) | Child component example |\n| [examples/components-registry.ts](examples/components-registry.ts) | Registration pattern |","tags":["weaverse","hydrogen","shopify","skills","agent-skills","agentic-commerce","shopify-hydrogen","shopify-hydrogen-skills","weaverse-hydrogen"],"capabilities":["skill","source-weaverse","skill-weaverse-hydrogen","topic-agent-skills","topic-agentic-commerce","topic-shopify-hydrogen","topic-shopify-hydrogen-skills","topic-weaverse-hydrogen"],"categories":["shopify-hydrogen-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/Weaverse/shopify-hydrogen-skills/weaverse-hydrogen","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add Weaverse/shopify-hydrogen-skills","source_repo":"https://github.com/Weaverse/shopify-hydrogen-skills","install_from":"skills.sh"}},"qualityScore":"0.466","qualityRationale":"deterministic score 0.47 from registry signals: · indexed on github topic:agent-skills · 33 github stars · SKILL.md body (13,767 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-01T12:57:21.107Z","embedding":null,"createdAt":"2026-04-18T22:21:48.771Z","updatedAt":"2026-05-01T12:57:21.107Z","lastSeenAt":"2026-05-01T12:57:21.107Z","tsv":"'-16':312 '-4':314 '/component-schema':90 '/sections/featured-collection':455 '/sections/hero-banner':450 '/sections/product-card':460 '/weaverse':41 '/weaverse-client':96 '1':162,244,513 '18':396 '19':152,392 '2':225,256 '3':234,265,421 '4':483 '5':623 '6':762 '7':852 'accept':383 'across':410 'ad':586 'advanc':21 'affect':845 'agent':25 'allow':577 'alway':478,605 'anatomi':227 'api':94,828,833 'api-refer':93 'app':165,217 'app/components/globalstyle.tsx':875 'app/sections/my-section/index.tsx':243 'app/weaverse/components.ts':429 'app/weaverse/schema.server.ts':868 'appli':870 'approach':861 'arg':278 'articl':621,730,732,733 'async':277,779 'attach':401 'await':787,803 'banner':301,323,329,331,420 'bannerprop':293,306 'bash':76 'blog':620,725,727,728 'bodi':545,547 'boolean':684 'build':4,27,137 'builder':35,119 'button':576,697 'cach':835 'card':575,597,601 'case':416,503 'center':317 'chang':110 'child':384,578 'children':304,320,379,593 'childtyp':386,572 'classnam':310 'collect':526,616,617,720,722,723,750,753,756,789,812,814,818 'collection-list':749 'collectionhandl':774 'color':670,673 'common':468 'compon':10,79,142,166,169,187,198,226,230,248,382,385,412,422,424,463,499,507,579,584 'componentloaderarg':279,768,782 'components.ts':197 'config':560,679,691,700 'configur':260 'content':206,334,532 'context':103 'createschema':264,284,327,486,489,495 'csp.ts':205 'css':160,856,872 'custom':126,175,622 'data':14,83,272,709,763,781 'data.collectionhandle':793 'date':50 'date/time':713 'datepick':710 'default':245,254,322,444,582,821 'defaultvalu':342,351,540,570 'defin':146,866 'deploy':19 'deprec':604 'deriv':794 'descript':298,303,319,348,350,360 'detail':759,849 'develop':88,136 'development-guid':87 'directori':241 'display':508 'doc':36,60,73 'docs.weaverse.io':37,74 'document':43,52 'drag':131 'drag-and-drop':130 'drop':133 'dropdown':689 'e.g':417 'editor':148,259,528 'element':372,405 'enabledon':519,611 'entry.client.tsx':211 'entry.server.tsx':212 'env':224 'everi':228 'exampl':75,281 'export':235,246,253,258,261,267,274,321,324,461,492,776,820,880 'extend':294 'extern':832 'featur':22 'featuredcollect':453,466 'fetch':15,63,84,273,764,838 'file':99,183,239,661,669 'format':650 'forwardref':387,399 'fragment':173 'full':758,848 'function':249,300,806,881 'github':38 'github.com':40 'github.com/weaverse':39 'global':193,203,862 'globalstyl':882 'goe':190 'graphql':170,171 'grid':563,565,571,592 'group':333,530,531,695,698 'guid':89 'handl':792 'head':296,302,318,339,341,357,537,539,589,702 'header':704 'hello':343,358 'hero':419 'hero-bann':418 'herobann':448,465,472,481 'hex':672 'hook':174,177 'html':646 'hydrogen':3,6,24,29,122,157 'hydrogencompon':433,464 'hydrogencomponentprop':289,295,769,802 'identifi':504 'imag':549,551,553,654,657 'import':283,287,431,439,440,445,446,451,456,471,479,488,766,876 'index':612 'initi':220 'input':335,533,624,843 'inspector':602 'instanc':515 'interact':377 'interfac':292 'kebab':415,502 'kebab-cas':414,501 'key':365,823 'label':340,349,538,546,552,558,564,568 'latest':109 'layout':557,559,591 'let':124,262,275,325,462,493,777,783,811,883 'limit':512 'line':636,642 'list':567,569,618,742,751 'live':42 'loader':12,266,276,778,798,847 'loaderdata':808,813 'max':514,681 'may':105 'merchant':125 'metaobject':735,737,738 'min':680 'minim':280 'mistak':469 'multi':641,746,755 'multi-collect':754 'multi-lin':640 'multi-product':745 'must':407,425,436 'my-compon':497 'mycompon':807,822 'mydata':773,805 'mysect':250,255 'mysectionprop':252 'name':338,347,509,536,544,550,556 'namespac':438 'node':56,61,77,81,85,91 'null':889 'number':676,711 'object':656,664 'offlin':102 'on/off':686 'option':268,389,518,523,561,692,701,831 'page':34,66,118,517,520,524,588,608,619 'panel':707 'parallel':837 'path':68 'pattern':824 'per':516 'picker':658,666,674,714,719,724,729,734,739,748,757 'polici':208 'preset':356,581 'primari':859 'product':525,574,596,600,613,615,715,717,718,741,744,747 'product-card':573,595,599 'product-list':740 'productcard':458,467 'project':163 'promise.all':836 'prop':251,795,801,810 'provid':101 'px':313 'py':311 'queri':172,790 'quick':626 'rang':675 'react':16,141,151,153,176,179,247,391,395 'react-router.config.ts':222 'ref':402 'refer':95,98,627 'references/04-input-settings.md':760,761 'references/05-data-fetching.md':850,851 'reflect':107 'regist':427 'registr':423 'registri':199 'render':378 'requir':373,678,690,699 'rest':305,309,368,809,817 'restrict':522 'result':71 'return':307,629,786,799,815,888,890 'returntyp':804 'reusabl':167 'rich':647 'richtext':543,644 'root':371,404 'root.tsx':213 'rout':178,182 'router':17,154,180 'rule':366 'safe':140 'schema':11,80,144,202,257,263,326,484,494,842 'schema.server.ts':200 'script':55 'scripts/get_weaverse_page.mjs':62,86,92 'scripts/search_weaverse_docs.mjs':57,78,82 'search':58,70 'section':184,186,308,703,816 'secur':207 'select':555,687 'server':270 'server-sid':269 'server.ts':218 'set':204,332,527,607,706,864,884,887 'shopifi':5,28,121,156,660,668,716,721,726,731,736,743,752,826 'shouldrevalid':839 'side':271 'singl':238,635 'single-lin':634 'skill':26 'skill-weaverse-hydrogen' 'slider':677 'source-weaverse' 'specif':65 'spread':367 'stack':150 'step':682 'store':355,364 'storefront':7,30,127,784,827 'storefront.query':788 'string':297,299,633,639,645,652,671,688,696,775 'structur':164 'studio':134,376,511 'style':192,194,853,860 'switch':683 'tailwind':159,195,855 'tailwind.config.js':223 'text':316,337,535,632,637,643,648 'text-cent':315 'textarea':346,638 'theme':13,201,854,863 'timestamp':712 'titl':330,505,541,590,819 'toggl':685,694 'toggle-group':693 'topic-agent-skills' 'topic-agentic-commerce' 'topic-shopify-hydrogen' 'topic-shopify-hydrogen-skills' 'topic-weaverse-hydrogen' 'true':840 'tsx':242,282,430,487,765,874 'type':139,288,328,336,345,406,432,496,521,534,542,548,554,580,594,598,609,625,628,767,772,796,800 'type-saf':138 'typescript':158 'ui':149,168,529 'uniqu':409,500 'up-to-d':47 'url':651,830 'urls/links':653 'use':53,67,394,413,437,470,606,630 'usethemeset':877,885 'v7':18,155,181 'valu':562,566 'variabl':791,873 'via':128,871 'video':662,665 'visual':33,117 'vite':161 'vite.config.ts':221 'weavers':2,9,23,32,51,59,72,113,114,185,196,210,229,375,780,785 'weaverse-hydrogen':1 'weaverse.fetchwithcache':829 'weaverse.storefront.query':825 'weaverse/hydrogen':286,291,435,491,771,879 'weaversecli':219 'weaverseimag':655 'weaversevideo':663 'welcom':352,361 'withweavers':216 'won':475 'work':189,477 'world':344,359 'wrap':214,397 'x':442","prices":[{"id":"fcb0cc4b-ab45-4121-b766-f89882f9c212","listingId":"5d3d3197-b1f3-4dfd-8f3e-18fcc68f9aa5","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"Weaverse","category":"shopify-hydrogen-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T22:21:48.771Z"}],"sources":[{"listingId":"5d3d3197-b1f3-4dfd-8f3e-18fcc68f9aa5","source":"github","sourceId":"Weaverse/shopify-hydrogen-skills/weaverse-hydrogen","sourceUrl":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/weaverse-hydrogen","isPrimary":false,"firstSeenAt":"2026-04-18T22:21:48.771Z","lastSeenAt":"2026-05-01T12:57:21.107Z"}],"details":{"listingId":"5d3d3197-b1f3-4dfd-8f3e-18fcc68f9aa5","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Weaverse","slug":"weaverse-hydrogen","github":{"repo":"Weaverse/shopify-hydrogen-skills","stars":33,"topics":["agent-skills","agentic-commerce","shopify-hydrogen","shopify-hydrogen-skills","weaverse-hydrogen"],"license":null,"html_url":"https://github.com/Weaverse/shopify-hydrogen-skills","pushed_at":"2026-04-24T10:12:43Z","description":"Dedicated agent skills for building, upgrading, and maintaining Shopify Hydrogen storefronts — works with Claude, Cursor, Copilot, and more.","skill_md_sha":"31cb73ddc2e0baa6f56340f02fab869df05dcfee","skill_md_path":"skills/weaverse-hydrogen/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/weaverse-hydrogen"},"layout":"multi","source":"github","category":"shopify-hydrogen-skills","frontmatter":{"name":"weaverse-hydrogen","description":"Build Shopify Hydrogen storefronts with Weaverse — components, schemas, loaders, theming, data fetching, React Router v7, deployment, and advanced features."},"skills_sh_url":"https://skills.sh/Weaverse/shopify-hydrogen-skills/weaverse-hydrogen"},"updatedAt":"2026-05-01T12:57:21.107Z"}}