mcpField
W
wix-headless-templates

wix-headless-templates

github.com/wixDevelopment36179 installsUpdated today
Repository

About wix-headless-templates

A collection of Wix Headless site templates, organized by business solution, for use with `wix-headless-kit`. It supplies source code and seed materials that the kit composes into deployable projects.

Key features

  1. 01Templates for 13 Wix business solutions
  2. 02Framework-agnostic application core
  3. 03Astro pages with editable SEO
  4. 04Plain-fetch REST data layer
  5. 05Scripts to seed and inspect sites
  6. 06Composed project scaffolds

Use cases

  1. 01Start a Wix Headless storefront or blog
  2. 02Build a site around bookings, events, or forms
  3. 03Seed a site from a plan and inspect its contents

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/wix/skills --skill wix-headless-templates

After installing, type/wix-headless-templatesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

blank/project/
.gitignore
astro.config.mjs
package.json
README.md
tsconfig.json
blank/project/public/
favicon.svg
blank/project/src/assets/
astro.svg
background.svg
wix.svg
blank/project/src/components/
Hero.astro
Welcome.astro
blank/project/src/layouts/
Layout.astro
blank/project/src/pages/
index.astro
blog/app-astro/layouts/
SiteLayout.astro
blog/app-astro/pages/
blog.astro
blog/app-astro/pages/blog/
[...slug].astro
blog/app-astro/pages/blog/category/
[slug].astro
blog/app-astro/pages/blog/tag/
[slug].astro
blog/app/components/blog/
BlogFeedView.tsx
CommentsView.tsx
PostLikeButton.tsx
PostView.tsx
RichContent.tsx
blog/app/hooks/blog/
useBlogFeed.ts
useComments.ts
usePost.ts
blog/app/wix/blog/
authors-core.ts
authors.ts
blog-feed-store.ts
comments-core.ts

Details

From the project README

Wix Headless Templates

The code a Wix Headless site is built from, one folder per Wix Business Solution. wix-headless-kit is the skill that runs a build: its install/templates.mjs fetches this folder once into the kit's own templates/ (a sparse clone of skills/wix-headless-templates/, or the checkout when the kit runs from one) and the kit copies, deploys and seeds from there. This skill holds no flow of its own; it is the material, kept as a skill so it is published, mirrored and readable like one.

Layout

pathwhat it is
<solution>/INSTRUCTIONS.mdthe solution's playbook: what ships, the contracts of every hook, store and DTO, the pages, the dashboard links
<solution>/app/the framework-agnostic core: wix/<solution>/*-core.ts (pure logic), the SDK transport, *-store.ts state machines, types.ts; hooks/ (React bindings) and components/ (reference implementations, correct and plain)
<solution>/app-astro/Astro pages and layouts with owner-editable SEO pre-wired
<solution>/rest/the data layer a second time over plain fetch, same exports, for a site with no bundler
<solution>/seed/SEED.md (the plan shape and the traps), seed-<solution>.mjs (fills the site from a plan, idempotent), read-site.mjs (reports what the site already holds)
<solution>/project/the composed project: the CLI's blank scaffold with the solution deployed and a package-lock.json, copied whole at create or attach so npm ci installs without resolving
shared/DESIGN.md and CONTENT.md (the floors every site meets), CUSTOM_OPERATIONS.md (server-side work that needs elevated calls), app/ and rest/ (the client, media and config seams), capabilities/ (site search, media upload), seed/ (the CLI resolver, token, image resolver and site context every seed uses)
blank/the pristine CLI scaffold the composed projects start from
compose.mjsrepository tooling: rebuilds a solution's project/ from blank/ plus a deploy, and its lock

The solutions: storefront, bookings, rentals, blog, cms, forms, members, events, restaurants, donations, pricing-plans, portfolio, faq.

Reading it on its own

  • What a solution does and how its pieces fit: <solution>/INSTRUCTIONS.md, then app/wix/<solution>/types.ts.
  • How a site is filled and what the seed refuses: <solution>/seed/SEED.md.
  • What an existing site holds before anything is written: node <solution>/seed/read-site.mjs --site <siteId> (a logged-in Wix CLI).
  • A seed by hand, from a project folder with a wix.config.json: node <solution>/seed/seed-<solution>.mjs plan.json.

Changing it

Code under app/, app-astro/, rest/ and seed/ is the source; project/ is generated from it with node compose.mjs <solution> from a checkout of the repository (it reinstalls the project's dependencies, so run npm ci in the project before a typecheck). A composed project is checked with tsc on its own tsconfig.json. Locks are resolved locally, never on a sandbox mirror.

Comments

Markdown supported