generating-weaverse-project-json

Name: generating-weaverse-project-json
Author: Weaverse

83stars25forks

How to install generating-weaverse-project-json?

weaverse/shopify-hydrogen-skills/generating-weaverse-project-json

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill generating-weaverse-project-json

Installs into the current project.

Summary

Use when generating Weaverse project export JSON for import into the Weaverse editor. Triggers on requests to create, build, or produce a Weaverse project JSON file from a site migration, design spec, page layout description, or existing export. Also use when converting section p

Files · 1

View on GitHub

SKILL.md

1	# Generating Weaverse Project JSON
2
3	Generate valid, import-ready Weaverse project export JSON files.
4
5	## Overview
6
7	This skill produces JSON files that conform to the Weaverse import contract. It works independently — you can use it from a site migration, a design spec, a verbal description, or any other input that describes what pages and sections should exist.
8
9	The output is a single JSON file matching the schema in `references/project-json-schema.md`, with a real-world example in `references/demo.json`.
10
11	## Inputs
12
13	This skill accepts any of these as input:
14
15	- Section mapping from `cloning-websites-to-weaverse` (website migration flow)
16	- Section mapping + token table from `figma-to-weaverse` (Figma design flow)
17	- Design spec describing pages, sections, and content
18	- Verbal description of what the storefront should look like
19	- Existing export to modify or extend
20
21	The only hard requirement: you need to know which section types to use. Read `app/weaverse/components.ts` to get the list of registered sections and blocks.
22
23	## Delivery
24
25	This skill produces an import JSON that establishes the project structure — pages, sections, and initial content. That JSON is imported once into the Weaverse Studio editor to create the project.
26
27	After the structure exists, ongoing content edits (copy, images, localization, bulk updates) should go through the `weaverse-content-api` skill, not by re-importing. The Content API can only update items that already exist, so the import-then-update split matters: use this skill to create structure, `weaverse-content-api` to maintain it. Keep the item ids stable between the two.
28
29	## Generation Steps
30
31	1. Read references — load `references/project-json-schema.md` for the contract and `references/demo.json` for a complete real-world example
32	2. Identify registered types — read `app/weaverse/components.ts` to know which section and block types are available
33	3. Read section source code — for each section type you plan to use, read its source in `app/sections/` or `app/components/` to learn valid schema fields, enum values, and defaults
34	4. Build the JSON following the structure below
35	5. Run the validator — execute `python scripts/validate.py <output-file>` to catch structural errors
36	6. Fix any issues the validator reports, then re-run until clean
37
38	## JSON Structure
39
40	### Top-level
41
42	```json
43	{
44	"version": "1.0.0",
45	"exportedAt": "<ISO timestamp>",
46	"project": { "name": "<name>", "config": {} },
47	"pages": [],
48	"pageAssignments": []
49	}
50	```
51
52	### project.config
53
54	Contains theme settings, locale, and colors. Accepted keys:
55
56	\| Key \| Type \| Purpose \|
57	\|-----\|------\|---------\|
58	\| `previewHost` \| string \| Dev server URL, usually `http://localhost:3456` \|
59	\| `theme` \| object \| Storefront-wide design tokens (colors, typography, layout) \|
60	\| `defaultLocale` \| object \| `{ label, language, country, currency, pathPrefix }` \|
61	\| `recentColors` \| string[] \| Editor color picker recent colors \|
62
63	For `theme`, refer to `references/demo.json` → `project.config.theme` for the full set of valid keys. Key categories:
64
65	- Colors: `colorPrimary`, `colorText`, `colorBackground`, `colorLine`, `colorTextSubtle`, `colorLineSubtle`, `colorTextInverse`, `colorForeground`
66	- Typography: `bodyBaseSize`, `bodyBaseLineHeight`, `bodyBaseSpacing`, `h1BaseSize`, `headingBaseLineHeight`, `headingBaseSpacing`
67	- Layout: `pageWidth`, `footerWidth`, `headerWidth`, `navHeightDesktop`, `navHeightTablet`, `navHeightMobile`
68	- Header/Footer: `headerBgColor`, `headerText`, `footerBgColor`, `footerText`, `topbarBgColor`, `topbarTextColor`, `topbarHeight`
69	- Buttons: `buttonPrimaryBg`, `buttonPrimaryColor`, `buttonSecondaryBg`, `buttonSecondaryColor`, `btnCornerRadius`
70	- Product cards: `pcardAlignment`, `pcardImageRatio`, `pcardBorderRadius`, `pcardShowVendor`, `pcardShowReviews`, `pcardShowSalePrice`, etc.
71	- Badges: `newBadgeText`, `newBadgeColor`, `saleBadgeText`, `saleBadgeColor`, `soldOutBadgeText`, `soldOutBadgeColor`, `bestSellerBadgeText`, `bestSellerBadgeColor`
72	- Social: `socialFacebook`, `socialInstagram`, `socialLinkedIn`, `socialX`
73	- Newsletter: `newsletterTitle`, `newsletterDescription`, `newsletterButtonText`, `newsletterPlaceholder`, `newsletterPopupEnabled`, etc.
74
75	Only include theme keys you understand and intend to set. Do not copy the entire demo theme blindly.
76
77	### Pages
78
79	Each page has `id`, `name`, `rootId`, and a flat `items` array:
80
81	```json
82	{
83	"id": "b98mnnqmv3tmce7wmw3l7vw4",
84	"name": "Homepage",
85	"rootId": "019b917a-f48f-72d4-aee7-3b1eae6b7dca",
86	"items": [

People who liked this also viewed

6 picks

Type

generating-weaverse-project-json

83stars25forks

View on GitHub

How to install generating-weaverse-project-json?

weaverse/shopify-hydrogen-skills/generating-weaverse-project-json

$npx -y skills add Weaverse/shopify-hydrogen-skills --skill generating-weaverse-project-json

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Generating Weaverse Project JSON
2
3	Generate valid, import-ready Weaverse project export JSON files.
4
5	## Overview
6
7	This skill produces JSON files that conform to the Weaverse import contract. It works independently — you can use it from a site migration, a design spec, a verbal description, or any other input that describes what pages and sections should exist.
8
9	The output is a single JSON file matching the schema in `references/project-json-schema.md`, with a real-world example in `references/demo.json`.
10
11	## Inputs
12
13	This skill accepts any of these as input:
14
15	- Section mapping from `cloning-websites-to-weaverse` (website migration flow)
16	- Section mapping + token table from `figma-to-weaverse` (Figma design flow)
17	- Design spec describing pages, sections, and content
18	- Verbal description of what the storefront should look like
19	- Existing export to modify or extend
20
21	The only hard requirement: you need to know which section types to use. Read `app/weaverse/components.ts` to get the list of registered sections and blocks.
22
23	## Delivery
24
25	This skill produces an import JSON that establishes the project structure — pages, sections, and initial content. That JSON is imported once into the Weaverse Studio editor to create the project.
26
27	After the structure exists, ongoing content edits (copy, images, localization, bulk updates) should go through the `weaverse-content-api` skill, not by re-importing. The Content API can only update items that already exist, so the import-then-update split matters: use this skill to create structure, `weaverse-content-api` to maintain it. Keep the item ids stable between the two.
28
29	## Generation Steps
30
31	1. Read references — load `references/project-json-schema.md` for the contract and `references/demo.json` for a complete real-world example
32	2. Identify registered types — read `app/weaverse/components.ts` to know which section and block types are available
33	3. Read section source code — for each section type you plan to use, read its source in `app/sections/` or `app/components/` to learn valid schema fields, enum values, and defaults
34	4. Build the JSON following the structure below
35	5. Run the validator — execute `python scripts/validate.py <output-file>` to catch structural errors
36	6. Fix any issues the validator reports, then re-run until clean
37
38	## JSON Structure
39
40	### Top-level
41
42	```json
43	{
44	"version": "1.0.0",
45	"exportedAt": "<ISO timestamp>",
46	"project": { "name": "<name>", "config": {} },
47	"pages": [],
48	"pageAssignments": []
49	}
50	```
51
52	### project.config
53
54	Contains theme settings, locale, and colors. Accepted keys:
55
56	\| Key \| Type \| Purpose \|
57	\|-----\|------\|---------\|
58	\| `previewHost` \| string \| Dev server URL, usually `http://localhost:3456` \|
59	\| `theme` \| object \| Storefront-wide design tokens (colors, typography, layout) \|
60	\| `defaultLocale` \| object \| `{ label, language, country, currency, pathPrefix }` \|
61	\| `recentColors` \| string[] \| Editor color picker recent colors \|
62
63	For `theme`, refer to `references/demo.json` → `project.config.theme` for the full set of valid keys. Key categories:
64
65	- Colors: `colorPrimary`, `colorText`, `colorBackground`, `colorLine`, `colorTextSubtle`, `colorLineSubtle`, `colorTextInverse`, `colorForeground`
66	- Typography: `bodyBaseSize`, `bodyBaseLineHeight`, `bodyBaseSpacing`, `h1BaseSize`, `headingBaseLineHeight`, `headingBaseSpacing`
67	- Layout: `pageWidth`, `footerWidth`, `headerWidth`, `navHeightDesktop`, `navHeightTablet`, `navHeightMobile`
68	- Header/Footer: `headerBgColor`, `headerText`, `footerBgColor`, `footerText`, `topbarBgColor`, `topbarTextColor`, `topbarHeight`
69	- Buttons: `buttonPrimaryBg`, `buttonPrimaryColor`, `buttonSecondaryBg`, `buttonSecondaryColor`, `btnCornerRadius`
70	- Product cards: `pcardAlignment`, `pcardImageRatio`, `pcardBorderRadius`, `pcardShowVendor`, `pcardShowReviews`, `pcardShowSalePrice`, etc.
71	- Badges: `newBadgeText`, `newBadgeColor`, `saleBadgeText`, `saleBadgeColor`, `soldOutBadgeText`, `soldOutBadgeColor`, `bestSellerBadgeText`, `bestSellerBadgeColor`
72	- Social: `socialFacebook`, `socialInstagram`, `socialLinkedIn`, `socialX`
73	- Newsletter: `newsletterTitle`, `newsletterDescription`, `newsletterButtonText`, `newsletterPlaceholder`, `newsletterPopupEnabled`, etc.
74
75	Only include theme keys you understand and intend to set. Do not copy the entire demo theme blindly.
76
77	### Pages
78
79	Each page has `id`, `name`, `rootId`, and a flat `items` array:
80
81	```json
82	{
83	"id": "b98mnnqmv3tmce7wmw3l7vw4",
84	"name": "Homepage",
85	"rootId": "019b917a-f48f-72d4-aee7-3b1eae6b7dca",
86	"items": [

People who liked this also viewed

6 picks

Type