weaverse-integration

Name: weaverse-integration
Author: Weaverse

54installs25forks

How to install weaverse-integration?

weaverse/shopify-hydrogen-skills/weaverse-integration

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill weaverse-integration

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Weaverse Integration — Existing Hydrogen Project
2
3	> 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.
4	>
5	> Key principle: Respect the existing project. Match their coding style, patterns, and conventions. Don't restructure what already works — extend it with Weaverse.
6
7	## Live Documentation
8
9	```bash
10	# Always fetch latest docs before making decisions
11	node scripts/search_weaverse_docs.mjs "existing hydrogen integration"
12	node scripts/get_weaverse_page.mjs "migration-advanced/existing-hydrogen-integration"
13	node scripts/search_shopify_docs.mjs "createHydrogenContext"
14	```
15
16	---
17
18	## Phase 1: Analyze the Existing Project
19
20	Before touching any code, read and document the project's current state.
21
22	### 1.1 Detect Framework Version
23
24	```bash
25	# Check package.json
26	cat package.json \| grep -E '"react-router"\|"@remix-run"\|"@shopify/hydrogen"\|"@weaverse"'
27	```
28
29	\| What you find \| Weaverse version to install \|
30	\|---\|---\|
31	\| `react-router` + `@shopify/hydrogen@2025.5.0+` \| `@weaverse/hydrogen@latest` (v5, React Router v7) \|
32	\| `@remix-run/react` \| `@weaverse/hydrogen@4` (v4, Remix) \|
33
34	If the project uses Remix (pre-2025.5.0):
35	- Ask the user if they want to migrate to React Router v7 first, then integrate Weaverse v5
36	- Or integrate Weaverse v4 on their current Remix setup
37	- Recommend the v7 migration path — it's the future
38
39	### 1.2 Catalog the Codebase
40
41	Read these files and note their patterns:
42
43	\| File \| What to observe \|
44	\|---\|---\|
45	\| `package.json` \| Dependencies, scripts, package manager (npm/yarn/pnpm/bun) \|
46	\| `app/root.tsx` \| Layout structure, providers, global styles \|
47	\| `app/entry.server.tsx` \| CSP setup, rendering approach \|
48	\| `server.ts` (or `server/index.ts`) \| Context creation, middleware \|
49	\| `app/routes/**` \| Route structure, loader patterns, naming convention \|
50	\| `app/components/**` \| Component patterns, props, styling approach \|
51	\| `app/sections/**` \| If sections exist — how they're structured \|
52	\| `app/styles/*` or `tailwind.config.` \| Styling approach (Tailwind, CSS modules, styled-components, etc.) \|
53	\| `vite.config.ts` \| Build plugins, aliases \|
54	\| `.env` or `.env.example` \| Existing env vars (DO NOT read secrets) \|
55	\| `tsconfig.json` \| Path aliases, strictness settings \|
56
57	### 1.3 Document Coding Conventions
58
59	Note and preserve these patterns:
60
61	- Component style: Function declarations vs arrow functions vs `forwardRef`
62	- Export style: `export default` vs named exports vs `export let`
63	- Styling: Tailwind classes, CSS modules, styled-components, inline styles
64	- State management: Hooks, context, stores
65	- Data fetching: Loader patterns, GraphQL query structure, error handling
66	- File naming: kebab-case, PascalCase, camelCase
67	- Import style: Absolute (`~/`) vs relative, namespace imports vs default
68	- TypeScript: Strictness, interface vs type, generics usage
69	- Comments: Level of documentation, JSDoc usage
70
71	> ⚠️ 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.
72
73	### 1.4 Identify Convertible Components
74
75	Find components that are good candidates for Weaverse sections:
76
77	Good candidates:
78	- Hero banners / sliders
79	- Featured collections / product grids
80	- Testimonials / reviews
81	- Newsletter signups
82	- Promotional banners
83	- Custom content sections (image + text, video, etc.)
84	- Footer sections (newsletter, social links)
85	- Navigation components with editable content
86
87	Skip (don't convert):
88	- Layout primitives (Button, Input, Modal — keep as shared components)
89	- Route-level wrappers
90	- Cart / checkout logic components
91	- Analytics / tracking components
92	- Server utilities
93
94	---
95
96	## Phase 2: Install & Configure Weaverse SDK
97
98	### 2.1 Install Package
99
100	```bash
101	# Use whatever package manager the project already uses
102	# React Router v7 (Hydrogen 2025.5.0+)
103	npm install @weaverse/hydrogen@latest
104
105	# Remix (legacy)
106	npm install @weaverse/hydrogen@4
107	```
108
109	### 2.2 Environment Variables
110
111	Add to `.env`:
112
113	```env
114	WEAVERSE_PROJECT_ID="provided-by-user"
115	WEAVERSE_API_KEY="provided-by-user"
116	```
117
118	Also add to `.env.example` (without real values) and update TypeScript env types:
119
120	```ts
121	// Add to the Env type in env.d.ts or wherever the project defines it
122	WEAVERSE_PROJECT_ID: string;
123	WEAVERSE_API_KEY: string;
124	WEAVERSE_HOST?: string;
125	```
126
127	### 2.3 Create `app/weaverse/` Directory
128
129	Create these 5 files. Match the project's existing code style (exports, naming, quotes, semicolons).
130
131	#### `app/weaverse/schema.server.ts` — Th

People who liked this also viewed

6 picks

Type

weaverse-integration

54installs25forks

View on GitHub

How to install weaverse-integration?

weaverse/shopify-hydrogen-skills/weaverse-integration

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill weaverse-integration

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Weaverse Integration — Existing Hydrogen Project
2
3	> 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.
4	>
5	> Key principle: Respect the existing project. Match their coding style, patterns, and conventions. Don't restructure what already works — extend it with Weaverse.
6
7	## Live Documentation
8
9	```bash
10	# Always fetch latest docs before making decisions
11	node scripts/search_weaverse_docs.mjs "existing hydrogen integration"
12	node scripts/get_weaverse_page.mjs "migration-advanced/existing-hydrogen-integration"
13	node scripts/search_shopify_docs.mjs "createHydrogenContext"
14	```
15
16	---
17
18	## Phase 1: Analyze the Existing Project
19
20	Before touching any code, read and document the project's current state.
21
22	### 1.1 Detect Framework Version
23
24	```bash
25	# Check package.json
26	cat package.json \| grep -E '"react-router"\|"@remix-run"\|"@shopify/hydrogen"\|"@weaverse"'
27	```
28
29	\| What you find \| Weaverse version to install \|
30	\|---\|---\|
31	\| `react-router` + `@shopify/hydrogen@2025.5.0+` \| `@weaverse/hydrogen@latest` (v5, React Router v7) \|
32	\| `@remix-run/react` \| `@weaverse/hydrogen@4` (v4, Remix) \|
33
34	If the project uses Remix (pre-2025.5.0):
35	- Ask the user if they want to migrate to React Router v7 first, then integrate Weaverse v5
36	- Or integrate Weaverse v4 on their current Remix setup
37	- Recommend the v7 migration path — it's the future
38
39	### 1.2 Catalog the Codebase
40
41	Read these files and note their patterns:
42
43	\| File \| What to observe \|
44	\|---\|---\|
45	\| `package.json` \| Dependencies, scripts, package manager (npm/yarn/pnpm/bun) \|
46	\| `app/root.tsx` \| Layout structure, providers, global styles \|
47	\| `app/entry.server.tsx` \| CSP setup, rendering approach \|
48	\| `server.ts` (or `server/index.ts`) \| Context creation, middleware \|
49	\| `app/routes/**` \| Route structure, loader patterns, naming convention \|
50	\| `app/components/**` \| Component patterns, props, styling approach \|
51	\| `app/sections/**` \| If sections exist — how they're structured \|
52	\| `app/styles/*` or `tailwind.config.` \| Styling approach (Tailwind, CSS modules, styled-components, etc.) \|
53	\| `vite.config.ts` \| Build plugins, aliases \|
54	\| `.env` or `.env.example` \| Existing env vars (DO NOT read secrets) \|
55	\| `tsconfig.json` \| Path aliases, strictness settings \|
56
57	### 1.3 Document Coding Conventions
58
59	Note and preserve these patterns:
60
61	- Component style: Function declarations vs arrow functions vs `forwardRef`
62	- Export style: `export default` vs named exports vs `export let`
63	- Styling: Tailwind classes, CSS modules, styled-components, inline styles
64	- State management: Hooks, context, stores
65	- Data fetching: Loader patterns, GraphQL query structure, error handling
66	- File naming: kebab-case, PascalCase, camelCase
67	- Import style: Absolute (`~/`) vs relative, namespace imports vs default
68	- TypeScript: Strictness, interface vs type, generics usage
69	- Comments: Level of documentation, JSDoc usage
70
71	> ⚠️ 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.
72
73	### 1.4 Identify Convertible Components
74
75	Find components that are good candidates for Weaverse sections:
76
77	Good candidates:
78	- Hero banners / sliders
79	- Featured collections / product grids
80	- Testimonials / reviews
81	- Newsletter signups
82	- Promotional banners
83	- Custom content sections (image + text, video, etc.)
84	- Footer sections (newsletter, social links)
85	- Navigation components with editable content
86
87	Skip (don't convert):
88	- Layout primitives (Button, Input, Modal — keep as shared components)
89	- Route-level wrappers
90	- Cart / checkout logic components
91	- Analytics / tracking components
92	- Server utilities
93
94	---
95
96	## Phase 2: Install & Configure Weaverse SDK
97
98	### 2.1 Install Package
99
100	```bash
101	# Use whatever package manager the project already uses
102	# React Router v7 (Hydrogen 2025.5.0+)
103	npm install @weaverse/hydrogen@latest
104
105	# Remix (legacy)
106	npm install @weaverse/hydrogen@4
107	```
108
109	### 2.2 Environment Variables
110
111	Add to `.env`:
112
113	```env
114	WEAVERSE_PROJECT_ID="provided-by-user"
115	WEAVERSE_API_KEY="provided-by-user"
116	```
117
118	Also add to `.env.example` (without real values) and update TypeScript env types:
119
120	```ts
121	// Add to the Env type in env.d.ts or wherever the project defines it
122	WEAVERSE_PROJECT_ID: string;
123	WEAVERSE_API_KEY: string;
124	WEAVERSE_HOST?: string;
125	```
126
127	### 2.3 Create `app/weaverse/` Directory
128
129	Create these 5 files. Match the project's existing code style (exports, naming, quotes, semicolons).
130
131	#### `app/weaverse/schema.server.ts` — Th

People who liked this also viewed

6 picks

Type