{"id":"ceecd164-5c0b-420b-8aad-d44f260ceb7e","shortId":"ByZR5S","kind":"skill","title":"weaverse-integration","tagline":"Integrate Weaverse into an existing Shopify Hydrogen project — analyze codebase, convert existing components to Weaverse sections, set up SDK, configure routes, and preserve coding style. For projects not yet using Weaverse.","description":"# Weaverse Integration — Existing Hydrogen Project\n\n> **Purpose:** You are integrating Weaverse into a Hydrogen project that does NOT currently use it. This skill guides you through the full process: analysis → SDK setup → component conversion → route migration → verification.\n>\n> **Key principle:** Respect the existing project. Match their coding style, patterns, and conventions. Don't restructure what already works — extend it with Weaverse.\n\n## Live Documentation\n\n```bash\n# Always fetch latest docs before making decisions\nnode scripts/search_weaverse_docs.mjs \"existing hydrogen integration\"\nnode scripts/get_weaverse_page.mjs \"migration-advanced/existing-hydrogen-integration\"\nnode scripts/search_shopify_docs.mjs \"createHydrogenContext\"\n```\n\n---\n\n## Phase 1: Analyze the Existing Project\n\nBefore touching any code, read and document the project's current state.\n\n### 1.1 Detect Framework Version\n\n```bash\n# Check package.json\ncat package.json | grep -E '\"react-router\"|\"@remix-run\"|\"@shopify/hydrogen\"|\"@weaverse\"'\n```\n\n| What you find | Weaverse version to install |\n|---|---|\n| `react-router` + `@shopify/hydrogen@2025.5.0+` | `@weaverse/hydrogen@latest` (v5, React Router v7) |\n| `@remix-run/react` | `@weaverse/hydrogen@4` (v4, Remix) |\n\n**If the project uses Remix (pre-2025.5.0):**\n- Ask the user if they want to migrate to React Router v7 first, then integrate Weaverse v5\n- Or integrate Weaverse v4 on their current Remix setup\n- Recommend the v7 migration path — it's the future\n\n### 1.2 Catalog the Codebase\n\nRead these files and note their patterns:\n\n| File | What to observe |\n|---|---|\n| `package.json` | Dependencies, scripts, package manager (npm/yarn/pnpm/bun) |\n| `app/root.tsx` | Layout structure, providers, global styles |\n| `app/entry.server.tsx` | CSP setup, rendering approach |\n| `server.ts` (or `server/index.ts`) | Context creation, middleware |\n| `app/routes/**` | Route structure, loader patterns, naming convention |\n| `app/components/**` | Component patterns, props, styling approach |\n| `app/sections/**` | If sections exist — how they're structured |\n| `app/styles/**` or `tailwind.config.*` | Styling approach (Tailwind, CSS modules, styled-components, etc.) |\n| `vite.config.ts` | Build plugins, aliases |\n| `.env` or `.env.example` | Existing env vars (DO NOT read secrets) |\n| `tsconfig.json` | Path aliases, strictness settings |\n\n### 1.3 Document Coding Conventions\n\nNote and **preserve** these patterns:\n\n- **Component style:** Function declarations vs arrow functions vs `forwardRef`\n- **Export style:** `export default` vs named exports vs `export let`\n- **Styling:** Tailwind classes, CSS modules, styled-components, inline styles\n- **State management:** Hooks, context, stores\n- **Data fetching:** Loader patterns, GraphQL query structure, error handling\n- **File naming:** kebab-case, PascalCase, camelCase\n- **Import style:** Absolute (`~/`) vs relative, namespace imports vs default\n- **TypeScript:** Strictness, interface vs type, generics usage\n- **Comments:** Level of documentation, JSDoc usage\n\n> ⚠️ **CRITICAL:** Your converted Weaverse components MUST match these conventions. If the project uses `function` declarations, don't use `const X = () =>`. If they use Tailwind, don't introduce CSS modules.\n\n### 1.4 Identify Convertible Components\n\nFind components that are good candidates for Weaverse sections:\n\n**Good candidates:**\n- Hero banners / sliders\n- Featured collections / product grids\n- Testimonials / reviews\n- Newsletter signups\n- Promotional banners\n- Custom content sections (image + text, video, etc.)\n- Footer sections (newsletter, social links)\n- Navigation components with editable content\n\n**Skip (don't convert):**\n- Layout primitives (Button, Input, Modal — keep as shared components)\n- Route-level wrappers\n- Cart / checkout logic components\n- Analytics / tracking components\n- Server utilities\n\n---\n\n## Phase 2: Install & Configure Weaverse SDK\n\n### 2.1 Install Package\n\n```bash\n# Use whatever package manager the project already uses\n# React Router v7 (Hydrogen 2025.5.0+)\nnpm install @weaverse/hydrogen@latest\n\n# Remix (legacy)\nnpm install @weaverse/hydrogen@4\n```\n\n### 2.2 Environment Variables\n\nAdd to `.env`:\n\n```env\nWEAVERSE_PROJECT_ID=\"provided-by-user\"\nWEAVERSE_API_KEY=\"provided-by-user\"\n```\n\n**Also add to `.env.example`** (without real values) and update TypeScript env types:\n\n```ts\n// Add to the Env type in env.d.ts or wherever the project defines it\nWEAVERSE_PROJECT_ID: string;\nWEAVERSE_API_KEY: string;\nWEAVERSE_HOST?: string;\n```\n\n### 2.3 Create `app/weaverse/` Directory\n\nCreate these 5 files. **Match the project's existing code style** (exports, naming, quotes, semicolons).\n\n#### `app/weaverse/schema.server.ts` — Theme Schema\n\n```ts\nimport type { HydrogenThemeSchema } from \"@weaverse/hydrogen\";\nimport pkg from \"../../package.json\";\n\nexport let themeSchema: HydrogenThemeSchema = {\n  info: {\n    version: pkg.version,\n    author: \"Your Store Name\",\n    name: \"Your Theme Name\",\n  },\n  settings: [\n    // Start minimal — add more as you convert components\n    {\n      group: \"Colors\",\n      inputs: [\n        {\n          type: \"color\",\n          name: \"colorPrimary\",\n          label: \"Primary Color\",\n          defaultValue: \"#000000\",\n        },\n        {\n          type: \"color\",\n          name: \"colorBackground\",\n          label: \"Background Color\",\n          defaultValue: \"#ffffff\",\n        },\n        {\n          type: \"color\",\n          name: \"colorText\",\n          label: \"Text Color\",\n          defaultValue: \"#1a1a1a\",\n        },\n      ],\n    },\n    {\n      group: \"Typography\",\n      inputs: [\n        {\n          type: \"range\",\n          name: \"headingBaseSize\",\n          label: \"Heading Base Size\",\n          configs: { min: 14, max: 32, step: 1, unit: \"px\" },\n          defaultValue: 28,\n        },\n        {\n          type: \"range\",\n          name: \"bodyBaseSize\",\n          label: \"Body Base Size\",\n          configs: { min: 12, max: 20, step: 1, unit: \"px\" },\n          defaultValue: 16,\n        },\n      ],\n    },\n  ],\n};\n```\n\n#### `app/weaverse/style.tsx` — Global Styles\n\nRead the project's existing global styles (CSS files, Tailwind config, root layout) and create CSS variables that integrate with their existing setup.\n\n```tsx\nimport { useThemeSettings } from \"@weaverse/hydrogen\";\n\nexport function GlobalStyle() {\n  let settings = useThemeSettings();\n  if (!settings) return null;\n\n  return (\n    <style\n      id=\"weaverse-global-style\"\n      key=\"weaverse-global-style\"\n      suppressHydrationWarning\n      dangerouslySetInnerHTML={{\n        __html: `\n          :root {\n            --color-primary: ${settings.colorPrimary};\n            --color-bg: ${settings.colorBackground};\n            --color-text: ${settings.colorText};\n            --heading-base: ${settings.headingBaseSize}px;\n            --body-base: ${settings.bodyBaseSize}px;\n          }\n        `,\n      }}\n    />\n  );\n}\n```\n\n#### `app/weaverse/components.ts` — Component Registry\n\n```ts\nimport type { HydrogenComponent } from \"@weaverse/hydrogen\";\n\n// Import converted sections here — start empty, add as you convert\n// MUST use namespace imports: import * as X, NOT import X from\nexport let components: HydrogenComponent[] = [\n  // Sections will be added during Phase 3\n];\n```\n\n#### `app/weaverse/index.tsx` — WeaverseContent\n\n```tsx\nimport { WeaverseHydrogenRoot } from \"@weaverse/hydrogen\";\nimport { components } from \"./components\";\n\nexport function WeaverseContent() {\n  return (\n    <WeaverseHydrogenRoot\n      components={components}\n      errorComponent={GenericError}\n    />\n  );\n}\n```\n\nUse the project's existing error component if they have one, otherwise create a minimal `GenericError`.\n\n#### `app/weaverse/csp.ts` — Content Security Policy\n\n```ts\nexport function getWeaverseCsp(request: Request, context: any) {\n  let url = new URL(request.url);\n  let weaverseHost = context.env?.WEAVERSE_HOST || \"https://weaverse.io\";\n  let isDesignMode = url.searchParams.get(\"weaverse_design_mode\") === \"true\";\n\n  let weaverseHosts = [\n    new URL(weaverseHost).host,\n    \"weaverse.io\",\n    \"*.weaverse.io\",\n    \"shopify.com\",\n    \"*.shopify.com\",\n    \"*.myshopify.com\",\n  ];\n\n  let updatedCsp: Record<string, string[] | string | boolean> = {\n    frameAncestors: weaverseHosts,\n    defaultSrc: [\"'self'\", \"data:\", ...weaverseHosts],\n    scriptSrc: [\"'self'\", \"'unsafe-inline'\", ...weaverseHosts],\n    styleSrc: [\"'self'\", \"'unsafe-inline'\", ...weaverseHosts],\n    connectSrc: [\"'self'\", ...weaverseHosts],\n  };\n\n  if (isDesignMode) {\n    updatedCsp.frameAncestors = [\"*\"];\n  }\n\n  return updatedCsp;\n}\n```\n\n### 2.4 Update Server Context\n\nModify the existing context file (usually `server.ts` or `app/lib/context.ts`):\n\n```ts\n// ADD these imports\nimport { WeaverseClient } from \"@weaverse/hydrogen\";\nimport { themeSchema } from \"~/weaverse/schema.server\"; // adjust path alias\nimport { components } from \"~/weaverse/components\";\n\n// INSIDE createAppLoadContext, after hydrogenContext is created:\nreturn {\n  ...hydrogenContext,\n  weaverse: new WeaverseClient({\n    ...hydrogenContext,\n    request,\n    cache,\n    themeSchema,\n    components,\n  }),\n};\n```\n\n**Don't restructure their context creation** — just spread the Weaverse client into their existing return object.\n\n### 2.5 Update Root & Entry Files\n\n#### `app/root.tsx` — Wrap with `withWeaverse`\n\n```tsx\nimport { withWeaverse } from \"@weaverse/hydrogen\";\nimport { GlobalStyle } from \"~/weaverse/style\";\n\n// Keep their existing Layout/App components untouched\n// Only change: wrap the default export\n\n// BEFORE:\n// export default function App() { ... }\n\n// AFTER:\nfunction App() {\n  // ... their existing App code, unchanged\n}\nexport default withWeaverse(App);\n```\n\nAdd `<GlobalStyle />` inside `<head>` in their Layout component.\n\n#### `app/entry.server.tsx` — Add Weaverse CSP\n\n```tsx\nimport { getWeaverseCsp } from \"~/weaverse/csp\";\n\n// Inside handleRequest, merge Weaverse CSP with existing:\nconst { nonce, header, NonceProvider } = createContentSecurityPolicy({\n  ...getWeaverseCsp(request, context),\n  shop: {\n    checkoutDomain: context.env?.PUBLIC_CHECKOUT_DOMAIN || context.env?.PUBLIC_STORE_DOMAIN,\n    storeDomain: context.env?.PUBLIC_STORE_DOMAIN,\n  },\n});\n```\n\nMerge with their existing CSP config — don't replace it.\n\n---\n\n## Phase 3: Convert Existing Components to Weaverse Sections\n\nThis is the most important phase. Convert the user's existing components into Weaverse-editable sections while **preserving their exact visual output and behavior**.\n\n### 3.1 Conversion Strategy\n\nFor each convertible component:\n\n1. **Read the original** — understand props, state, data fetching, styling\n2. **Create a Weaverse wrapper** — add schema + optional loader\n3. **Keep the original rendering** — don't rewrite the JSX, just wrap it\n4. **Register in components.ts** — add namespace import\n\n### 3.2 Conversion Pattern\n\n**Original component (before):**\n```tsx\n// app/components/hero-banner.tsx\ninterface HeroBannerProps {\n  heading: string;\n  subtitle: string;\n  backgroundImage: string;\n  alignment: \"left\" | \"center\";\n}\n\nfunction HeroBanner({ heading, subtitle, backgroundImage, alignment }: HeroBannerProps) {\n  return (\n    <section className=\"relative bg-cover bg-center\" style={{ backgroundImage: `url(${backgroundImage})` }}>\n      <div className={`flex flex-col ${alignment === 'center' ? 'items-center text-center' : 'items-start'}`}>\n        <h1 className=\"text-4xl font-bold\">{heading}</h1>\n        <p className=\"text-xl mt-4\">{subtitle}</p>\n      </div>\n    </section>\n  );\n}\nexport default HeroBanner;\n```\n\n**Converted component (after):**\n```tsx\n// app/sections/hero-banner.tsx (or keep original path, just add schema)\nimport type { HydrogenComponentProps } from \"@weaverse/hydrogen\";\nimport { createSchema } from \"@weaverse/hydrogen\";\n\ninterface HeroBannerProps extends HydrogenComponentProps {\n  heading: string;\n  subtitle: string;\n  backgroundImage: string;\n  alignment: \"left\" | \"center\";\n}\n\nfunction HeroBanner({ heading, subtitle, backgroundImage, alignment, children, ...rest }: HeroBannerProps) {\n  return (\n    <section {...rest} className=\"relative bg-cover bg-center\" style={{ backgroundImage: `url(${backgroundImage})` }}>\n      <div className={`flex flex-col ${alignment === 'center' ? 'items-center text-center' : 'items-start'}`}>\n        <h1 className=\"text-4xl font-bold\">{heading}</h1>\n        <p className=\"text-xl mt-4\">{subtitle}</p>\n      </div>\n      {children}\n    </section>\n  );\n}\nexport default HeroBanner;\n\nexport let schema = createSchema({\n  type: \"hero-banner\",\n  title: \"Hero Banner\",\n  settings: [\n    {\n      group: \"Content\",\n      inputs: [\n        { type: \"text\", name: \"heading\", label: \"Heading\", defaultValue: \"Welcome\" },\n        { type: \"textarea\", name: \"subtitle\", label: \"Subtitle\" },\n        { type: \"image\", name: \"backgroundImage\", label: \"Background Image\" },\n        {\n          type: \"toggle-group\",\n          name: \"alignment\",\n          label: \"Alignment\",\n          configs: {\n            options: [\n              { value: \"left\", label: \"Left\" },\n              { value: \"center\", label: \"Center\" },\n            ],\n          },\n          defaultValue: \"center\",\n        },\n      ],\n    },\n  ],\n  presets: {\n    heading: \"Welcome\",\n    alignment: \"center\",\n  },\n});\n```\n\n**Key changes:**\n- Extend `HydrogenComponentProps` (adds `children`, `loaderData`, and Weaverse internals)\n- Spread `{...rest}` on root element (required for Studio interaction)\n- Render `{children}` if the component can accept nested sections\n- Add `schema` export with `createSchema()`\n- Keep the exact same JSX structure and styling\n\n### 3.3 Schema Design Rules\n\nWhen creating schemas for converted components:\n\n| Original prop type | Schema input type |\n|---|---|\n| `string` (short text) | `text` |\n| `string` (long text) | `textarea` or `richtext` |\n| `string` (URL) | `url` |\n| `string` (image path) | `image` |\n| `string` (hex color) | `color` |\n| `number` | `range` (with appropriate min/max/step) |\n| `boolean` | `switch` |\n| `string` (enum) | `select` or `toggle-group` |\n| Object with Shopify data | `product`, `collection`, `blog`, etc. |\n\n**Group settings logically** — match what makes sense for the component, typically:\n- \"Content\" group — text, images, links\n- \"Design\" group — colors, spacing, layout options\n- \"Advanced\" group — visibility, custom CSS class\n\n### 3.4 Converting Data-Fetching Components\n\nIf the original component fetches data (e.g., a featured collection), convert the data fetching to a Weaverse loader:\n\n```tsx\nimport type { ComponentLoaderArgs } from \"@weaverse/hydrogen\";\n\ntype SectionData = {\n  collectionHandle: string;\n  count: number;\n};\n\nexport let loader = async ({ weaverse, data }: ComponentLoaderArgs<SectionData>) => {\n  if (!data?.collectionHandle) return null;\n  return weaverse.storefront.query(COLLECTION_QUERY, {\n    variables: { handle: data.collectionHandle, first: data.count ?? 8 },\n  });\n};\n```\n\nUse the project's existing GraphQL queries and fragments — don't rewrite them. If they have a `graphql/` directory with shared queries, import from there.\n\n### 3.5 Register Converted Components\n\nUpdate `app/weaverse/components.ts`:\n\n```ts\nimport * as HeroBanner from \"~/sections/hero-banner\";\nimport * as FeaturedCollection from \"~/sections/featured-collection\";\n// ... other converted components\n\nexport let components: HydrogenComponent[] = [\n  HeroBanner,\n  FeaturedCollection,\n  // ...\n];\n```\n\n**MUST use `import * as X`** — not `import X from`. This is the most common mistake.\n\n---\n\n## Phase 4: Update Routes\n\nFor each route that should be Weaverse-editable:\n\n### 4.1 Route Conversion Pattern\n\n```tsx\n// BEFORE — original route\nimport { useLoaderData } from \"react-router\"; // or \"@remix-run/react\"\nimport HeroBanner from \"~/components/hero-banner\";\nimport ProductGrid from \"~/components/product-grid\";\n\nexport async function loader({ context, params }: LoaderFunctionArgs) {\n  const productData = await context.storefront.query(PRODUCT_QUERY, { ... });\n  return { product: productData.product };\n}\n\nexport default function Homepage() {\n  const { product } = useLoaderData<typeof loader>();\n  return (\n    <div>\n      <HeroBanner heading=\"Sale\" subtitle=\"Big deals\" />\n      <ProductGrid products={product} />\n    </div>\n  );\n}\n```\n\n```tsx\n// AFTER — Weaverse-enabled route\nimport { WeaverseContent } from \"~/weaverse\";\n\nexport async function loader({ context, params }: LoaderFunctionArgs) {\n  // Keep existing data loading\n  const productData = await context.storefront.query(PRODUCT_QUERY, { ... });\n\n  // ADD Weaverse page loading\n  const weaverseData = await context.weaverse.loadPage({ type: \"INDEX\" });\n\n  return {\n    product: productData.product,\n    weaverseData,\n  };\n}\n\nexport default function Homepage() {\n  // Render Weaverse content — it will use the registered components\n  return <WeaverseContent />;\n}\n```\n\n### 4.2 Page Types\n\n| Route | `type` value |\n|---|---|\n| Homepage (`_index`) | `\"INDEX\"` |\n| Product page | `\"PRODUCT\"` (with `handle: params.productHandle`) |\n| Collection page | `\"COLLECTION\"` (with `handle: params.collectionHandle`) |\n| Collections list | `\"ALL_PRODUCTS\"` |\n| Blog | `\"BLOG\"` |\n| Article | `\"ARTICLE\"` (with `handle: params.articleHandle`) |\n| Custom page | `\"PAGE\"` (with `handle: params.pageHandle`) |\n| Custom template | `\"CUSTOM\"` |\n\n### 4.3 Gradual Migration (Recommended)\n\nYou don't have to convert all routes at once. Start with:\n\n1. **Homepage** — highest impact, usually simplest\n2. **Product page** — merchant value is high\n3. **Collection page** — enables visual merchandising\n4. **Other pages** — as needed\n\nFor routes not yet converted, keep them as-is. Weaverse doesn't interfere with non-Weaverse routes.\n\n---\n\n## Phase 5: Handle Edge Cases\n\n### 5.1 Existing Layout Components\n\nIf the project has shared layout components (header, footer, nav):\n\n- **Header/Footer** — keep them outside Weaverse for now, rendered in `root.tsx` Layout\n- OR convert them to Weaverse components if the user wants them editable\n- Ask the user which approach they prefer\n\n### 5.2 Shared Components (Buttons, Inputs, etc.)\n\nDon't convert primitive/shared components. They stay in `app/components/` and are used inside Weaverse sections.\n\n### 5.3 Third-Party Integrations\n\nIf the project uses:\n- **Analytics** (GA4, Segment, etc.) — keep in route loaders or root layout\n- **A/B testing** — keep outside Weaverse page rendering\n- **Custom middleware** — ensure Weaverse CSP doesn't block third-party scripts\n- **CMS data** (Contentful, Sanity, etc.) — can coexist; Weaverse handles visual layout, external CMS handles structured content\n\n### 5.4 TypeScript Types\n\nAdd to the project's type definitions:\n\n```ts\n// Wherever the project defines AppLoadContext\ninterface AppLoadContext {\n  // ... existing properties\n  weaverse: import(\"@weaverse/hydrogen\").WeaverseClient;\n}\n```\n\n---\n\n## Phase 6: Verification Checklist\n\nAfter integration, verify:\n\n- [ ] `npm run dev` starts without errors\n- [ ] Existing routes still render correctly (visual regression check)\n- [ ] Weaverse Studio preview loads at the local dev URL\n- [ ] Converted components appear in Weaverse Studio component picker\n- [ ] Theme settings show in Studio > Theme > Customize\n- [ ] Converted components render identically to their originals\n- [ ] Component schemas expose the right editable settings\n- [ ] Data-fetching sections load data correctly\n- [ ] `npm run build` completes without errors\n- [ ] TypeScript compiles without new errors\n- [ ] Cart, checkout, and customer account flows still work\n- [ ] No console errors related to CSP\n\n---\n\n## Common Mistakes to Avoid\n\n| Mistake | Fix |\n|---|---|\n| `import X from` instead of `import * as X` | Always namespace import for component registration |\n| Forgetting `{...rest}` on root element | Required for Weaverse Studio drag/drop interaction |\n| Not rendering `{children}` in container components | Required for nested sections |\n| Overriding existing CSP instead of merging | Spread Weaverse CSP into existing config |\n| Rewriting component JSX \"to make it better\" | Preserve the exact original rendering |\n| Converting ALL components at once | Convert sections first, keep primitives as shared components |\n| Using `inspector` in schema | Use `settings` — `inspector` is deprecated |\n| Creating `app/weaverse/` outside `app/` | Must be inside the app directory |\n| Forgetting env vars in type definitions | Add WEAVERSE_* to the Env type |\n\n---\n\n## Quick Reference — File Changes Summary\n\n| File | Action |\n|---|---|\n| `package.json` | Add `@weaverse/hydrogen` dependency |\n| `.env` | Add `WEAVERSE_PROJECT_ID`, `WEAVERSE_API_KEY` |\n| `app/weaverse/schema.server.ts` | **CREATE** — theme schema |\n| `app/weaverse/style.tsx` | **CREATE** — global styles component |\n| `app/weaverse/components.ts` | **CREATE** — component registry |\n| `app/weaverse/index.tsx` | **CREATE** — WeaverseContent wrapper |\n| `app/weaverse/csp.ts` | **CREATE** — CSP configuration |\n| `server.ts` (or context file) | **MODIFY** — add WeaverseClient to context |\n| `app/root.tsx` | **MODIFY** — wrap with `withWeaverse`, add `<GlobalStyle />` |\n| `app/entry.server.tsx` | **MODIFY** — merge Weaverse CSP |\n| `app/sections/*.tsx` | **CREATE/MODIFY** — converted components |\n| Route files | **MODIFY** — add `weaverse.loadPage()`, render `<WeaverseContent />` |\n| Type definitions | **MODIFY** — add WEAVERSE_* env vars, weaverse context |\n| `.gitignore` | **VERIFY** — `.react-router/` is ignored (RRv7 projects) |","tags":["weaverse","integration","shopify","hydrogen","skills","agent-skills","agentic-commerce","shopify-hydrogen","shopify-hydrogen-skills","weaverse-hydrogen"],"capabilities":["skill","source-weaverse","skill-weaverse-integration","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-integration","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 (21,510 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.226Z","embedding":null,"createdAt":"2026-04-18T22:21:49.520Z","updatedAt":"2026-05-01T12:57:21.226Z","lastSeenAt":"2026-05-01T12:57:21.226Z","tsv":"'/../package.json':616 '/existing-hydrogen-integration':114 '/react':176 '000000':652 '1':119,688,707 '1.1':136 '1.2':223 '1.3':313 '1.4':423 '12':703 '14':684 '16':711 '1a1a1a':670 '2':495 '2.1':500 '2.2':527 '2.3':585 '20':705 '2025.5.0':166,187,516 '28':692 '32':686 '4':178,526 '5':591 'absolut':374 'add':530,549,561,635 'advanc':113 'alias':297,310 'alreadi':88,510 'also':548 'alway':97 'analysi':63 'analyt':489 'analyz':12,120 'api':542,579 'app/components':268 'app/entry.server.tsx':250 'app/root.tsx':244 'app/routes':261 'app/sections':274 'app/styles':282 'app/weaverse':587 'app/weaverse/schema.server.ts':604 'app/weaverse/style.tsx':712 'approach':254,273,286 'arrow':327 'ask':188 'author':624 'background':658 'banner':439,450 'base':680,699 'bash':96,140,503 'bodi':698 'bodybases':696 'build':295 'button':474 'camelcas':371 'candid':432,437 'cart':485 'case':369 'cat':143 'catalog':224 'check':141 'checkout':486 'class':343 'code':27,79,127,315,598 'codebas':13,226 'collect':442 'color':642,645,650,654,659,663,668 'colorbackground':656 'colorprimari':647 'colortext':665 'comment':388 'compon':16,66,269,292,322,348,398,426,428,464,480,488,491,640 'config':682,701,725 'configur':23,497 'const':412 'content':452,467 'context':258,354 'convent':83,267,316,402 'convers':67 'convert':14,396,425,471,639 'creat':586,589,729 'createhydrogencontext':117 'creation':259 'critic':394 'csp':251 'css':288,344,421,722,730 'current':52,134,211 'custom':451 'data':356 'decis':103 'declar':325,408 'default':334,380 'defaultvalu':651,660,669,691,710 'defin':572 'depend':239 'detect':137 'directori':588 'doc':100 'document':95,130,314,391 'e':146 'edit':466 'env':298,302,532,533,558,564 'env.d.ts':567 'env.example':300,551 'environ':528 'error':363 'etc':293,457 'exist':8,15,37,75,106,122,277,301,597,719,736 'export':331,333,337,339,600,617,743 'extend':90 'featur':441 'fetch':98,357 'ffffff':661 'file':229,234,365,592,723 'find':157,427 'first':200 'footer':458 'forwardref':330 'framework':138 'full':61 'function':324,328,407,744 'futur':222 'generic':386 'global':248,713,720 'globalstyl':745 'good':431,436 'graphql':360 'grep':145 'grid':444 'group':641,671 'guid':57 'handl':364 'head':679 'headingbases':677 'hero':438 'hook':353 'host':583 'hydrogen':10,38,47,107,515 'hydrogenthemeschema':610,620 'id':536,576 'identifi':424 'imag':454 'import':372,378,608,613,739 'info':621 'inlin':349 'input':475,643,673 'instal':161,496,501,518,524 'integr':3,4,36,43,108,202,206,733 'interfac':383 'introduc':420 'jsdoc':392 'kebab':368 'kebab-cas':367 'keep':477 'key':71,543,580 'label':648,657,666,678,697 'latest':99,168,520 'layout':245,472,727 'legaci':522 'let':340,618,746 'level':389,483 'link':462 'live':94 'loader':264,358 'logic':487 'make':102 'manag':242,352,507 'match':77,400,593 'max':685,704 'middlewar':260 'migrat':69,112,195,217 'migration-advanc':111 'min':683,702 'minim':634 'modal':476 'modul':289,345,422 'must':399 'name':266,336,366,601,627,628,631,646,655,664,676,695 'namespac':377 'navig':463 'newslett':447,460 'node':104,109,115 'note':231,317 'npm':517,523 'npm/yarn/pnpm/bun':243 'null':752 'observ':237 'packag':241,502,506 'package.json':142,144,238 'pascalcas':370 'path':218,309 'pattern':81,233,265,270,321,359 'phase':118,494 'pkg':614 'pkg.version':623 'plugin':296 'pre':186 'preserv':26,319 'primari':649 'primit':473 'principl':72 'process':62 'product':443 'project':11,30,39,48,76,123,132,183,405,509,535,571,575,595,717 'promot':449 'prop':271 'provid':247,538,545 'provided-by-us':537,544 'purpos':40 'px':690,709 'queri':361 'quot':602 'rang':675,694 're':280 'react':148,163,170,197,512 'react-rout':147,162 'read':128,227,306,715 'real':553 'recommend':214 'relat':376 'remix':151,174,180,185,212,521 'remix-run':150,173 'render':253 'respect':73 'restructur':86 'return':751,753 'review':446 'root':726 'rout':24,68,262,482 'route-level':481 'router':149,164,171,198,513 'run':152,175 'schema':606 'script':240 'scripts/get_weaverse_page.mjs':110 'scripts/search_shopify_docs.mjs':116 'scripts/search_weaverse_docs.mjs':105 'sdk':22,64,499 'secret':307 'section':19,276,435,453,459 'semicolon':603 'server':492 'server.ts':255 'server/index.ts':257 'set':20,312,632,747,750 'setup':65,213,252,737 'share':479 'shopifi':9 'shopify/hydrogen':153,165 'signup':448 'size':681,700 'skill':56 'skill-weaverse-integration' 'skip':468 'slider':440 'social':461 'source-weaverse' 'start':633 'state':135,351 'step':687,706 'store':355,626 'strict':311,382 'string':577,581,584 'structur':246,263,281,362 'style':28,80,249,272,285,291,323,332,341,347,350,373,599,714,721 'styled-compon':290,346 'tailwind':287,342,417,724 'tailwind.config':284 'testimoni':445 'text':455,667 'theme':605,630 'themeschema':619 'topic-agent-skills' 'topic-agentic-commerce' 'topic-shopify-hydrogen' 'topic-shopify-hydrogen-skills' 'topic-weaverse-hydrogen' 'touch':125 'track':490 'ts':560,607 'tsconfig.json':308 'tsx':738 'type':385,559,565,609,644,653,662,674,693 'typescript':381,557 'typographi':672 'unit':689,708 'updat':556 'usag':387,393 'use':33,53,184,406,411,416,504,511 'user':190,540,547 'usethemeset':740,748 'util':493 'v4':179,208 'v5':169,204 'v7':172,199,216,514 'valu':554 'var':303 'variabl':529,731 'verif':70 'version':139,159,622 'video':456 'vite.config.ts':294 'vs':326,329,335,338,375,379,384 'want':193 'weavers':2,5,18,34,35,44,93,154,158,203,207,397,434,498,534,541,574,578,582 'weaverse-integr':1 'weaverse/hydrogen':167,177,519,525,612,742 'whatev':505 'wherev':569 'without':552 'work':89 'wrapper':484 'x':413 'yet':32","prices":[{"id":"50bab1c8-5a82-43d1-9f5e-798efc9f5c64","listingId":"ceecd164-5c0b-420b-8aad-d44f260ceb7e","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:49.520Z"}],"sources":[{"listingId":"ceecd164-5c0b-420b-8aad-d44f260ceb7e","source":"github","sourceId":"Weaverse/shopify-hydrogen-skills/weaverse-integration","sourceUrl":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/weaverse-integration","isPrimary":false,"firstSeenAt":"2026-04-18T22:21:49.520Z","lastSeenAt":"2026-05-01T12:57:21.226Z"}],"details":{"listingId":"ceecd164-5c0b-420b-8aad-d44f260ceb7e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"Weaverse","slug":"weaverse-integration","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":"c1f54a62bf0856d197c42f71bf62b7c14d02acf6","skill_md_path":"skills/weaverse-integration/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/Weaverse/shopify-hydrogen-skills/tree/main/skills/weaverse-integration"},"layout":"multi","source":"github","category":"shopify-hydrogen-skills","frontmatter":{"name":"weaverse-integration","description":"Integrate Weaverse into an existing Shopify Hydrogen project — analyze codebase, convert existing components to Weaverse sections, set up SDK, configure routes, and preserve coding style. For projects not yet using Weaverse."},"skills_sh_url":"https://skills.sh/Weaverse/shopify-hydrogen-skills/weaverse-integration"},"updatedAt":"2026-05-01T12:57:21.226Z"}}