@wix/agent-skills 1.8.0 → 1.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/agent-skills",
-  "version": "1.8.0",
+  "version": "1.10.0",
   "description": "Wix Skills for AI coding agents — versioned npm distribution of the wix/skills content.",
   "license": "MIT",
   "repository": {

package/skills/wix-app/references/EDITOR_REACT_COMPONENT.md

@@ -72,7 +72,8 @@ Topic-focused references (rules + patterns + common mistakes in one place):
 - [`editor-react-component/DIRECTIONALITY.md`](editor-react-component/DIRECTIONALITY.md) — RTL/LTR rules and patterns
 - [`editor-react-component/PROPS-VS-CSS.md`](editor-react-component/PROPS-VS-CSS.md) — What should be a React prop vs CSS
 - [`editor-react-component/COMPONENT-API.md`](editor-react-component/COMPONENT-API.md) — Props structure, elementProps, data types, file splitting, containers, array props
-- [`editor-react-component/REACT-PATTERNS.md`](editor-react-component/REACT-PATTERNS.md) — SSR-safe patterns, CSS rules, remaining common mistakes
+- [`editor-react-component/SSR.md`](editor-react-component/SSR.md) — Server-side rendering rules (mandatory)
+- [`editor-react-component/REACT-PATTERNS.md`](editor-react-component/REACT-PATTERNS.md) — CSS rules, remaining common mistakes
 
 ## CSS guidelines
 

package/skills/wix-app/references/editor-react-component/ACCESSIBILITY.md

@@ -13,6 +13,20 @@ Rules and patterns for ARIA accessibility support in Editor React components.
 - The `A11y` type includes: `ariaLabel`, `ariaDescribedBy`, `ariaLabelledBy`, `role`, `ariaHidden`, `ariaLive`, and all other ARIA attributes.
 - Users provide ARIA values through the `a11y` prop: `<Component a11y={{ ariaLabel: "..." }} />`
 
+### Stable IDs for Element Relationships
+
+ARIA relationships (`aria-controls`, `aria-labelledby`, `aria-describedby`) and `htmlFor` need element ids. Generate them with `useStableId` from `@wix/react-component-utils` — passing the `id` prop as the override — never `Math.random()`, a manual counter, or a bare `React.useId()` (those break SSR/hydration). See [`SSR.md`](SSR.md) for the full rule.
+
+```tsx
+import { useStableId } from '@wix/react-component-utils';
+
+const rootId = useStableId(id);
+const panelId = `${rootId}-panel`;
+
+<button aria-controls={panelId}>{label}</button>
+<div id={panelId} role="tabpanel">{content}</div>
+```
+
 ### ARIA Label Rules
 
 ARIA labels are user-facing content and must NEVER be hardcoded as string literals in JSX.

package/skills/wix-app/references/editor-react-component/REACT-GUIDELINES.md

@@ -8,7 +8,8 @@ This guide defines rules and guidance on **how to implement** production-quality
 - [`DIRECTIONALITY.md`](DIRECTIONALITY.md) — RTL/LTR rules and patterns
 - [`PROPS-VS-CSS.md`](PROPS-VS-CSS.md) — What should be a React prop vs CSS
 - [`COMPONENT-API.md`](COMPONENT-API.md) — Props structure, elementProps, data types, file splitting, containers, array props
-- [`REACT-PATTERNS.md`](REACT-PATTERNS.md) — SSR-safe patterns, CSS rules, common mistakes
+- [`SSR.md`](SSR.md) — Server-side rendering rules (mandatory)
+- [`REACT-PATTERNS.md`](REACT-PATTERNS.md) — CSS rules, common mistakes
 
 ## React 18 features are not supported
 
@@ -42,6 +43,10 @@ Direction support is mandatory — see [`DIRECTIONALITY.md`](DIRECTIONALITY.md).
 
 See [`ACCESSIBILITY.md`](ACCESSIBILITY.md) for full rules and patterns.
 
+### SSR Safety
+
+Components are server-rendered, then hydrated — they MUST render correctly, completely, and identically on the server. See [`SSR.md`](SSR.md) for full rules and patterns.
+
 ### TypeScript
 
 - All components must be fully typed
@@ -67,11 +72,11 @@ All components MUST follow these patterns:
 
 **1. SSR-Safe Implementation**
 
-- NO browser APIs at module scope (window, document, navigator, etc.)
-- Guard browser APIs with typeof checks or useEffect
-- All browser-dependent logic must run client-side only
+- NO browser APIs at module scope or during render (window, document, navigator, etc.) — guard inside `useEffect`
+- First render must be complete and deterministic; effects are client-only enhancement
+- Internal ids via `useStableId`; NO `useLayoutEffect`
 
-See [`REACT-PATTERNS.md`](REACT-PATTERNS.md) §1.1 for code examples.
+See [`SSR.md`](SSR.md) for full rules and code examples.
 
 **2. Clean Code**
 
@@ -162,6 +167,6 @@ See [`PROPS-VS-CSS.md`](PROPS-VS-CSS.md) and [`COMPONENT-API.md`](COMPONENT-API.
 
 **Phase 1: Analysis** — Parse information, map component structure (see Part 0)
 
-**Phase 2: Component File** — Apply all §1.1 mandatory features and §1.2 implementation standards
+**Phase 2: Component File** — Apply all §1.1 mandatory features and §1.2 implementation standards; verify SSR safety against [`SSR.md`](SSR.md)
 
 **Phase 3: Styles** — Apply Part 2 SCSS rules

package/skills/wix-app/references/editor-react-component/REACT-PATTERNS.md

@@ -6,23 +6,7 @@ Code patterns and common mistakes for Editor React components.
 
 ## 1.1 SSR-Safe Implementation
 
-Avoid browser-only APIs at module scope or during render; use them inside `useEffect` with `typeof window !== 'undefined'`.
-
-**❌ Wrong:**
-
-```typescript
-const userAgent = window.navigator.userAgent;
-```
-
-**✅ Correct:**
-
-```typescript
-useEffect(() => {
-  if (typeof window !== "undefined") {
-    const userAgent = window.navigator.userAgent;
-  }
-}, []);
-```
+Components are server-rendered then hydrated. See [`SSR.md`](SSR.md) for the full rules and code examples (browser globals, complete first render, deterministic output, `useStableId`, no `useLayoutEffect`).
 
 ## 1.2 Element Visibility (Platform-Managed)
 
@@ -102,6 +86,8 @@ different — they go through a JS-toggled modifier class; see
 
 ## 3.2 Browser APIs at module scope
 
+See [`SSR.md`](SSR.md) for the full SSR rules.
+
 **❌ Wrong:**
 
 ```typescript

package/skills/wix-app/references/editor-react-component/SSR.md

@@ -0,0 +1,119 @@
+# Server-Side Rendering (SSR)
+
+Rules and patterns for SSR-safe Editor React components.
+
+Editor React components are server-rendered and then hydrated on the client — every component MUST render correctly, completely, and identically on the server. SSR safety is mandatory for every component.
+
+---
+
+## Rules
+
+### No browser globals at module scope or during render
+
+`window`, `document`, `navigator`, `localStorage`, `sessionStorage`, `matchMedia`, `IntersectionObserver`, `ResizeObserver`, and other DOM/BOM APIs do not exist on the server. Never touch them at module scope or in the render body. Access them only inside `useEffect`, optionally guarded with `typeof window !== 'undefined'`.
+
+**❌ Wrong:**
+
+```typescript
+const userAgent = window.navigator.userAgent;
+```
+
+**✅ Correct:**
+
+```typescript
+useEffect(() => {
+  if (typeof window !== "undefined") {
+    const userAgent = window.navigator.userAgent;
+  }
+}, []);
+```
+
+### First render must be complete
+
+Render all parts unconditionally — never gate structural elements behind effect-set state. Initialize `useState` to a valid, server-renderable default so the first (server) render already shows the final structure. Element visibility is platform-managed; see [`PROPS-VS-CSS.md`](PROPS-VS-CSS.md) and [`REACT-PATTERNS.md`](REACT-PATTERNS.md) §1.2.
+
+**❌ Wrong — content only appears after an effect runs (missing on the server):**
+
+```tsx
+const [items, setItems] = useState<Array<Item>>([]);
+useEffect(() => {
+  setItems(buildItems(props));
+}, [props]);
+return <ul>{items.map(/* ... */)}</ul>; // empty on the server
+```
+
+**✅ Correct — derive during render so it exists on the first pass:**
+
+```tsx
+const items = buildItems(props);
+return <ul>{items.map(/* ... */)}</ul>;
+```
+
+### Deterministic render
+
+The same props MUST produce the same markup on the server and the client. No `Math.random()`, `Date.now()`, `new Date()`, or locale/timezone-dependent output during render — these differ across environments and break hydration.
+
+**❌ Wrong:**
+
+```tsx
+<span>{new Date().toLocaleString()}</span>
+```
+
+**✅ Correct — derive from props, or compute in an effect:**
+
+```tsx
+<span>{formatDate(props.timestamp)}</span>
+```
+
+### Stable IDs via `useStableId`
+
+When a component needs an internal id (ARIA wiring such as `aria-controls` / `aria-labelledby`, or `htmlFor`), generate it with `useStableId` from `@wix/react-component-utils`. Never use `Math.random()`, a manual counter, or a bare `React.useId()` — those break hydration or are not available across runtimes. Pass the component's `id` prop as the override so a caller-supplied id wins, then derive child ids from the result.
+
+**✅ Correct:**
+
+```tsx
+import { useStableId } from '@wix/react-component-utils';
+
+const rootId = useStableId(id);
+const panelId = `${rootId}-panel`;
+
+<button aria-controls={panelId}>{label}</button>
+<div id={panelId} role="tabpanel">{content}</div>
+```
+
+**❌ Wrong:**
+
+```tsx
+const panelId = `tab-${Math.random()}`; // ❌ differs every render
+const panelId = React.useId();          // ❌ use the useStableId util instead
+```
+
+### No `useLayoutEffect`
+
+`useLayoutEffect` does nothing on the server and triggers a React warning. Use `useEffect` for client-only work.
+
+**❌ Wrong:**
+
+```tsx
+useLayoutEffect(() => { measure(); }, []);
+```
+
+**✅ Correct:**
+
+```tsx
+useEffect(() => { measure(); }, []);
+```
+
+### Effects are client-only enhancement
+
+`useEffect` runs only after hydration, never on the server. Use effects to enhance — not to produce the initial UI. The server-rendered default state must already look correct before any effect runs.
+
+---
+
+## SSR Checklist
+
+- [ ] No browser globals at module scope or in the render body — guarded inside `useEffect` only
+- [ ] All parts render unconditionally on the first pass; state initialized to a server-safe default
+- [ ] Render output is deterministic — no `Math.random()` / `Date.now()` / `new Date()` / locale-dependent output during render
+- [ ] Internal ids come from `useStableId(id)`, never random values, counters, or bare `React.useId()`
+- [ ] No `useLayoutEffect`

package/skills/wix-design-system/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: wix-design-system
-description: Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on "what component", "how do I make", "WDS", "show me props", "testkit", "driver", or component names like Button, Card, Modal, Box, Text.
+description: Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on "what component", "how do I make", "WDS", "show me props", "testkit", "driver", or component names like Button, Card, Box, Text.
 ---
 
 # WDS Documentation Navigator

package/skills/wix-headless/references/BUILD-astro.md

@@ -171,14 +171,12 @@ cp "<SKILL_ROOT>/references/astro/templates/stores/back-in-stock.ts" "src/utils/
 cp "<SKILL_ROOT>/references/astro/templates/stores/categories.ts"     "src/utils/categories.ts"
 # ecom (loaded)
 cp "<SKILL_ROOT>/references/astro/templates/ecom/discounts.ts"        "src/utils/discounts.ts"
-# bookings (loaded) — elevated SSR API endpoints + SeoTags
-mkdir -p src/pages/api
-cp "<SKILL_ROOT>/references/astro/templates/bookings/api/confirm-booking.ts" "src/pages/api/confirm-booking.ts"
-cp "<SKILL_ROOT>/references/astro/templates/bookings/api/waitlist.ts"        "src/pages/api/waitlist.ts"
-cp "<SKILL_ROOT>/references/astro/templates/bookings/SeoTags.astro"          "src/components/SeoTags.astro"
+# bookings (loaded) — the booking SDK module + SeoTags
+cp "<SKILL_ROOT>/references/astro/templates/bookings/bookingDriver.ts" "src/components/bookingDriver.ts"
+cp "<SKILL_ROOT>/references/astro/templates/bookings/SeoTags.astro"    "src/components/SeoTags.astro"
 ```
 
-`categories.ts` is imported by `pages-categories`/`pages-products`/`pages-home-and-nav`; `back-in-stock.ts` by stores components; `discounts.ts` by ecom components + stores product pages; the bookings API endpoints (elevated `confirmBooking` seat-hold + native v1 waitlist register) by `BookingForm.tsx`, and `SeoTags.astro` by `services/[slug].astro`. Static, brand-agnostic SDK wrappers — if not pre-copied, multiple scopes race to author them.
+`categories.ts` is imported by `pages-categories`/`pages-products`/`pages-home-and-nav`; `back-in-stock.ts` by stores components; `discounts.ts` by ecom components + stores product pages; `bookingDriver.ts` (the ecom-Cart-V2 booking sequence — `book()`/`navigateToCheckout()`) by the bookings islands, and `SeoTags.astro` by `services/[slug].astro`. Static, brand-agnostic SDK wrappers — if not pre-copied, multiple scopes race to author them.
 
 ### Dispatch the wave — one concurrent batch (private agents) + a serialized shell chain alongside it
 
@@ -193,7 +191,7 @@ One merged "build" agent per loaded vertical (Instruction file = that vertical's
 **B · Serialized shell chain — agents that patch `Navigation.astro` / `index.astro`** (read-modify-write a shared file → concurrent dispatch trips the staleness guard `File has been modified since read`, **per-file, not per-marker**). **Launch one, wait for its return, launch the next** — each sees the previous one's insertion. Runs **alongside** batch A, not after it. The shell-patchers (today): **ecom, stores `pages-home-and-nav`, bookings, gift-cards** — exactly the packs with `nav:`/`home:` markers:
 - **ecom-build** — `components` (CartView, CartBadge) → `pages` (`cart.astro`, `thank-you.astro` private, **+ CartBadge mount in `Navigation.astro` at `<!-- nav:actions -->`**).
 - **stores-home-and-nav** — patch `index.astro` product grid at `<!-- home:stores -->` + `Navigation.astro` Shop submenu at `<!-- nav:links -->`. Writes no islands; pure shell-patcher.
-- **bookings-build** — `components` (ServiceCard, AvailabilityCalendar, BookingForm, ServiceBookingFlow, ManageBooking) → `pages` (`services/index.astro`, `services/[slug].astro`, `booking-confirmation.astro`, `manage-booking.astro` private, **+ Services link in `Navigation.astro` at `<!-- nav:links -->` / services teaser in `index.astro` at `<!-- home:bookings -->`**).
+- **bookings-build** — `components` (AvailabilityCalendar, BookingForm, ServiceBookingFlow islands; `bookingDriver.ts` + `SeoTags.astro` are pre-copied) → `pages` (`services/index.astro`, `services/[slug].astro`, `ServiceCard.astro`, `booking-confirmation.astro` private, **+ Services link in `Navigation.astro` at `<!-- nav:links -->` / services teaser in `index.astro` at `<!-- home:bookings -->`**).
 - **gift-cards-build** — `components` (probe util, GiftCardPurchase island) → `pages` (gift-cards landing + `Navigation.astro` `<!-- nav:links -->` / `index.astro` `<!-- home:gift-cards -->`).
 
 Cross-vertical imports (`stores-home-and-nav` importing `CategoryRail`/`ProductCard`/`utils/categories.ts`) resolve at **build time**, not write time, so they impose no write-ordering between the chain and batch A. The only ordering: (i) shell-patchers serialize against each other (per-file), (ii) everything is on disk before Build.

package/skills/wix-headless/references/DESIGN_SYSTEM.md

@@ -1,6 +1,6 @@
 ---
 name: design-system-designer
-description: "The Designer role of the wix-headless design-system phase. Picks the brand's visual identity and authors it as DESIGN.md — the single, portable design-token format (palette, type, spacing, rounded, content widths) plus a small block of brand-voice strings. Writes DESIGN.md directly (its only file, at the dispatch's designMdPath) and returns just data.shell + the designMdPath, so the orchestrator never re-emits the tokens. emit-design-tokens.mjs reads DESIGN.md's frontmatter and projects .wix/design-tokens.css + .wix/site.d.ts; compose.mjs (astro) reads DESIGN.md to write the design-system files. Makes no rendering decision (no CSS, no Tailwind, no Astro)."
+description: "The Designer role of the wix-headless design-system phase. Picks the brand's visual identity and authors it as DESIGN.md — the single, portable design-token format (palette, type, rounded, content widths) plus a small block of brand-voice strings. Writes DESIGN.md directly (its only file, at the dispatch's designMdPath) and returns just data.shell + the designMdPath, so the orchestrator never re-emits the tokens. emit-design-tokens.mjs reads DESIGN.md's frontmatter and projects .wix/design-tokens.css + .wix/site.d.ts; compose.mjs (astro) reads DESIGN.md to write the design-system files. Makes no rendering decision (no CSS, no Tailwind, no Astro)."
 ---
 
 # Designer — the design itself
@@ -11,7 +11,7 @@ You author **`DESIGN.md`** (its YAML frontmatter is the spec) — see "What you
 
 Your output is small and mostly thinking: a coherent, complete brand visual expressed as `DESIGN.md` frontmatter, plus a handful of brand-voice strings (returned as `data.shell`). Speed comes from staying in this lane — one small spec file + a small return, not site files.
 
-> **DESIGN.md is the single design artifact — there is no separate "design tokens" JSON contract.** What you author *is* the DESIGN.md frontmatter (DESIGN.md vocabulary: `colors` / `typography` / `spacing` / `rounded` / `containers` / `googleFontsHref`). **You write `DESIGN.md` directly**; `emit-design-tokens.mjs` then projects `.wix/design-tokens.css` + `.wix/site.d.ts` from its frontmatter; `compose.mjs` (astro) reads the same frontmatter to write the site files; non-astro frontends import the token CSS. Because the **frontmatter** is what every consumer reads, your completeness bar is the whole game — a thin spec yields a thin DESIGN.md.
+> **DESIGN.md is the single design artifact — there is no separate "design tokens" JSON contract.** What you author *is* the DESIGN.md frontmatter (DESIGN.md vocabulary: `colors` / `typography` / `rounded` / `containers` / `googleFontsHref`). **You write `DESIGN.md` directly**; `emit-design-tokens.mjs` then projects `.wix/design-tokens.css` + `.wix/site.d.ts` from its frontmatter; `compose.mjs` (astro) reads the same frontmatter to write the site files; non-astro frontends import the token CSS. Because the **frontmatter** is what every consumer reads, your completeness bar is the whole game — a thin spec yields a thin DESIGN.md.
 
 ## Self-Loading
 
@@ -38,7 +38,7 @@ You do **not** receive (and do not need) loaded packs, navigation links, disable
 - Open the file with `---` on its own line and close the frontmatter with `---`.
 - **QUOTE every string value with double quotes — especially hex colors** (`paper: "#FFFBF0"`). An unquoted `#hex` after `: ` is read as a YAML comment and the token vanishes.
 - **2-space indent** for nested groups. `typography` entries may use an indented `fontFamily:` line or flow style `{ fontFamily: "..." }`.
-- Groups: `colors`, `typography`, `spacing`, `rounded`, `containers`; plus the top-level `googleFontsHref`. Fill every color role (completeness is your bar — see below).
+- Groups: `colors`, `typography`, `rounded`, `containers`; plus the top-level `googleFontsHref`. Fill every color role (completeness is your bar — see below).
 
 **The `DESIGN.md` you write** (frontmatter is canonical; the body is documentation, never parsed):
 
@@ -59,16 +59,6 @@ colors:
 typography:
   display: { fontFamily: "..." }
   body: { fontFamily: "..." }
-spacing:
-  2xs: "..."
-  xs: "..."
-  sm: "..."
-  md: "..."
-  lg: "..."
-  xl: "..."
-  2xl: "..."
-  3xl: "..."
-  4xl: "..."
 rounded:
   sm: "..."
   md: "..."
@@ -111,7 +101,7 @@ Concrete values with **semantic roles**, in the DESIGN.md vocabulary (`DESIGN_MD
 - **`colors`** — a complete palette covering semantic roles, not just brand accents. **All six core roles are required** (emit every one): `paper` (primary background), `paper-warm` (secondary surface), `ink` (primary text / dark fills), `mute` (muted text), `rule` (borders / dividers), `accent` (brand emphasis). Also emit the recommended `ink-soft`, `cream`, `error`. Every value a concrete hex string. These wix-native role names are valid DESIGN.md color tokens — use them directly. **Map the approved palette to roles — do not re-pick hues.** The **accent** hex from the Color palette input → `accent`; the dominant **background** → `paper`; the primary **text** → `ink`. The remaining roles (`paper-warm`, `ink-soft`, `mute`, `rule`, `cream`, `error`) are **tonal derivatives of that approved palette** — lighten/darken/desaturate **within the same hue family**, never a new hue and never a generic editorial default set. **`compose.mjs` derives a missing role only as a last-resort fail-safe** (e.g. `ink-soft` ≈ `ink` lightened) — that yields a less intentional palette, so completeness is on you.
 - **`typography`** — a map of levels to type tokens. **Use the exact `display` and `body` font families from the Typography input, verbatim** — no substitution, no "better" pairing, no swapping the approved serif for a different serif. The families are **given to you, not chosen by you**; you decide only `fontSize`/`fontWeight`/`lineHeight`/`letterSpacing` (optional — the wix pipeline consumes only `fontFamily`). Each level is `{ "fontFamily": "<the given family>" }` (e.g. `"Fraunces"`, `"Inter"`). Add `mono` only if the brand needs it.
 - **`googleFontsHref`** (top-level key in `data.design`) — the **ready** Google Fonts stylesheet href for the **given** `display` + `body` families, with the weight/optical axes each family actually supports. Emit the finished URL for those exact families: e.g. `"https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600&family=Inter:wght@400;500;600&display=swap"`. If **both** families are system fonts (`system-ui`, `sans-serif`, etc.), emit `""` (the `<link>` is dropped). (If you omit it, `compose.mjs` builds a valid fallback with a standard 400–700 weight set, but the family-specific axes are lost — so emit it.)
-- **`spacing`** — a full rhythm scale, every step `2xs` through `4xl` (`2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl`), each a concrete length (e.g. `"1rem"`). The brand's spacing rhythm, not container widths.
+- **(no `spacing`)** — do not author a spacing scale. The build uses Tailwind v4's built-in numeric spacing (`gap-4`, `py-24`, …); a named `--spacing-<size>` scale was removed because its t-shirt names collided with the width utilities. Spacing is not your concern.
 - **`rounded`** — corner radii (DESIGN.md's name for radius tokens): `sm` and `md` required; `lg`, `xl` if the brand uses larger curves. Concrete lengths.
 - **`containers`** — content/reading widths (a DESIGN.md extension this skill uses), **conceptually separate from spacing**: `prose` (a readable text column, ~`42rem`), plus `md`, `3xl`, `6xl` as page max-widths. Widths, not spacing steps — never reuse a spacing value as a container value (a reading column is ~`42rem`, not `5rem`).
 
@@ -141,12 +131,12 @@ You pick *what the brand looks like* — "paper = `#FAF6EF`", "display face = Fr
 | Write `global.css`, token CSS, or any **site** file | Write **only** `DESIGN.md` (your design spec) — `emit-design-tokens.mjs` projects the token CSS from it, `compose.mjs` authors site files |
 | Echo the tokens inline in your return | They live in `DESIGN.md`; return only `data.shell` + the `designMdPath` you wrote (keeps the tokens out of the orchestrator's output) |
 | Unquoted hex in frontmatter (`paper: #FFFBF0`) | Quote every string value (`paper: "#FFFBF0"`) — an unquoted `#hex` parses as a comment and the token is lost |
-| Emit an `@theme` block, `--color-*` names, or Tailwind utilities | Return DESIGN.md frontmatter (`colors`/`typography`/`spacing`/`rounded`/`containers`); `compose.mjs` maps them |
+| Emit an `@theme` block, `--color-*` names, or Tailwind utilities | Return DESIGN.md frontmatter (`colors`/`typography`/`rounded`/`containers`); `compose.mjs` maps them |
 | Return the old `designTokens` shape (`fonts`, `radii`) | Use the DESIGN.md vocabulary: `typography` (with `fontFamily`), `rounded` — there is no separate token JSON anymore |
 | Decide CSS structure, View-Transitions, `@apply`, markers, file layout | All application — `compose.mjs`'s domain |
 | Read `STYLING.md`, templates, or `.astro` files | Every input is inlined; read only `DESIGN_MD.md` + `RETURN_CONTRACT.md` |
 | Branch on framework (astro vs custom) or loaded packs | The DESIGN.md is framework- and pack-blind by construction |
-| Alias a container width to a spacing value | `containers.prose` ≈ `42rem`; `spacing.3xl` ≈ `5rem` — different axes |
+| Author a `spacing` scale | Removed — the build uses Tailwind's numeric spacing (`gap-4`, `py-24`); only `colors`/`typography`/`rounded`/`containers`/`googleFontsHref` |
 | Ship a thin palette ("downstream will add what it needs") | Completeness is the contract — fill every semantic role |
 | Substitute or "upgrade" the display/body family (swap the approved Fraunces for Playfair) | Use the exact `display`/`body` families from the Typography input verbatim; you choose only weights/axes |
 | Introduce a hue not in the approved palette for `paper`/`ink`/`accent`, or "improve" the brand color | `accent` = approved accent hex, `paper` = approved background, `ink` = approved text; other roles are tonal variants of those |

package/skills/wix-headless/references/SETUP.md

@@ -96,7 +96,7 @@ npm install --no-fund --no-audit --legacy-peer-deps <package-set> \
 | | **blog** → `@wix/blog @wix/ricos @astrojs/rss @astrojs/sitemap` |
 | | **forms** → `@wix/forms` |
 | | **cms** → `@wix/data @wix/essentials` |
-| | **bookings** → `@wix/bookings @wix/essentials` |
+| | **bookings** → `@wix/bookings @wix/essentials @wix/forms @wix/redirects @wix/auto_sdk_ecom_cart-v-2` |
 | | **gift-cards** → (none — disabled-by-default pack ships no Astro-time imports) |
 
 Example (resolved set = stores + ecom + gift-cards + cms):