@wix/agent-skills 1.8.0 → 1.10.0

package/skills/wix-headless/references/astro/templates/gift-cards/components-gift-cards.css

@@ -8,8 +8,9 @@
  * Reuses tokens declared by the designer foundation: --color-cream,
  * --color-cream-deep, --color-ink, --color-ink-soft, --color-muted,
  * --color-rule, --color-paper, --color-bark/espresso/gold-deep,
- * --spacing-{sm,md,lg,xl,2xl,3xl,4xl}, --radius-sm, --font-body,
- * --font-display. If a token isn't in your design system, fall back to a
+ * --radius-sm, --font-body, --font-display. (Spacing uses Tailwind's numeric
+ * scale — gap-4, py-24 — not a design token.) If a token isn't in your design
+ * system, fall back to a
  * sibling token; do NOT invent new ones.
  */
 
@@ -20,8 +21,8 @@
 .gift-card-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
-  margin-top: var(--spacing-lg);
+  gap: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 .gift-card-fieldset {
@@ -33,14 +34,14 @@
 .gift-card-amounts {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-sm);
+  gap: 0.75rem;
+  margin-top: 0.75rem;
 }
 
 .gift-card-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-md);
+  gap: 1rem;
 }
 
 .gift-card-field {
@@ -101,20 +102,20 @@
 .gift-card-page {
   max-width: 80rem;
   margin: 0 auto;
-  padding: var(--spacing-3xl) var(--spacing-lg) var(--spacing-4xl);
+  padding: 4rem 1.5rem 6rem;
 }
 
 .gift-card-grid-wrap {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
+  gap: 3rem;
   align-items: start;
 }
 
 @media (min-width: 768px) {
   .gift-card-grid-wrap {
     grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-4xl);
+    gap: 6rem;
   }
 }
 
@@ -139,7 +140,7 @@
 }
 
 .gift-card-body h1 {
-  margin: var(--spacing-md) 0 var(--spacing-md);
+  margin: 1rem 0 1rem;
 }
 
 .gift-card-lede {
@@ -148,11 +149,11 @@
   line-height: 1.7;
   color: var(--color-ink-soft);
   max-width: 48ch;
-  margin: 0 0 var(--spacing-xl);
+  margin: 0 0 2rem;
 }
 
 .gift-card-fineprint {
-  margin-top: var(--spacing-lg);
+  margin-top: 1.5rem;
   font-family: var(--font-body);
   font-size: 0.8125rem;
   line-height: 1.6;
@@ -165,14 +166,14 @@
 /* -------------------------------------------------------------------------- */
 
 .gift-card-teaser {
-  padding: var(--spacing-4xl) var(--spacing-lg);
+  padding: 6rem 1.5rem;
   background: var(--color-cream-deep, var(--color-paper, var(--color-cream)));
 }
 
 .gift-card-teaser-link {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-2xl);
+  gap: 3rem;
   max-width: 80rem;
   margin: 0 auto;
   align-items: center;
@@ -183,7 +184,7 @@
 @media (min-width: 768px) {
   .gift-card-teaser-link {
     grid-template-columns: 1fr 1fr;
-    gap: var(--spacing-4xl);
+    gap: 6rem;
   }
 }
 
@@ -206,7 +207,7 @@
 }
 
 .gift-card-teaser-body h2 {
-  margin: var(--spacing-md) 0 var(--spacing-md);
+  margin: 1rem 0 1rem;
 }
 
 .gift-card-teaser-lede {
@@ -215,5 +216,5 @@
   line-height: 1.7;
   color: var(--color-ink-soft);
   max-width: 44ch;
-  margin: 0 0 var(--spacing-lg);
+  margin: 0 0 1.5rem;
 }

package/skills/wix-headless/references/astro/templates/gift-cards/gift-cards.astro

@@ -18,8 +18,8 @@ const heroImage = resolveWixImageUrl(product.image, 800, 800);
   title={product.name}
   description={product.description}
 >
-  <section class="py-3xl md:py-4xl">
-    <div class="max-w-wide mx-auto px-xl grid grid-cols-1 md:grid-cols-2 gap-2xl md:gap-4xl items-center">
+  <section class="py-16 md:py-24">
+    <div class="max-w-wide mx-auto px-8 grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24 items-center">
       <div class="aspect-square bg-cream rounded-sm overflow-hidden">
         {heroImage && (
           <img
@@ -34,7 +34,7 @@ const heroImage = resolveWixImageUrl(product.image, 800, 800);
         )}
       </div>
 
-      <div class="flex flex-col gap-lg">
+      <div class="flex flex-col gap-6">
         <p class="eyebrow">A gift, considered</p>
         <h1 class="font-display text-5xl leading-tight">{product.name}</h1>
         <p class="text-ink-soft leading-relaxed">{product.description}</p>

package/skills/wix-headless/references/astro/templates/global.css

@@ -10,10 +10,12 @@
 
 @theme {
   /* {{theme}} — Composer substitutes the full palette here from designTokens:
-     every --color-*, --font-*, --spacing-* (2xs..4xl), --container-*, and
-     --radius-* line. The required-token set (enforced by compose.mjs)
-     MUST all be present, or components render unstyled. Container scale is
-     separate from spacing — never alias --container-3xl to --spacing-3xl. */
+     every --color-*, --font-*, --container-*, and --radius-* line. The
+     required-token set (enforced by compose.mjs) MUST all be present, or
+     components render unstyled. Spacing is NOT a token here — it uses
+     Tailwind's built-in numeric scale (gap-4, py-24, …); never add a named
+     --spacing-* scale, since that namespace also powers the width utilities
+     (max-w-*/w-*) and would shadow them. */
 }
 
 /* Reading-width helper so prose pages center without guessing Tailwind sizes. */
@@ -25,7 +27,7 @@
 /* Shared button primitive — declared with @utility so the variants below can
    @apply it (a plain contract class is NOT @apply-able in Tailwind v4). */
 @utility btn {
-  @apply inline-flex items-center justify-center px-lg py-md rounded-md font-medium;
+  @apply inline-flex items-center justify-center px-6 py-4 rounded-md font-medium;
   transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
 }
 
@@ -130,7 +132,7 @@
   height: 1px;
   background: var(--color-accent);
   opacity: 0.6;
-  margin-block: var(--spacing-lg);
+  margin-block: 1.5rem;
 }
 
 /* ── Universal site chrome ────────────────────────────────────────────────── */
@@ -204,8 +206,8 @@ body[data-navigating="true"] .product-grid {
   min-width: 12rem;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2xs);
-  padding: var(--spacing-sm);
+  gap: 0.25rem;
+  padding: 0.75rem;
   background: var(--color-paper);
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-md);
@@ -223,7 +225,7 @@ body[data-navigating="true"] .product-grid {
 .site-nav-sublink {
   font-size: 0.875rem;
   color: var(--color-ink-soft, var(--color-mute));
-  padding-block: var(--spacing-2xs);
+  padding-block: 0.25rem;
 }
 .site-nav-sublink:hover,
 .site-nav-sublink[aria-current="page"] {
@@ -237,13 +239,13 @@ body[data-navigating="true"] .product-grid {
 .category-rail-inner {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
-  padding-block: var(--spacing-md);
+  gap: 0.75rem;
+  padding-block: 1rem;
 }
 .category-pill {
   display: inline-flex;
   align-items: center;
-  padding: var(--spacing-2xs) var(--spacing-md);
+  padding: 0.25rem 1rem;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-sm);
   font-size: 0.8125rem;
@@ -262,12 +264,12 @@ body[data-navigating="true"] .product-grid {
   border-color: var(--color-ink);
 }
 .pagination {
-  margin-block: var(--spacing-xl);
+  margin-block: 2rem;
 }
 .pagination-inner {
   display: flex;
   justify-content: space-between;
-  gap: var(--spacing-md);
+  gap: 1rem;
 }
 .pagination-link {
   color: var(--color-ink);
@@ -282,5 +284,5 @@ body[data-navigating="true"] .product-grid {
 .breadcrumbs {
   font-size: 0.8125rem;
   color: var(--color-mute);
-  margin-bottom: var(--spacing-sm);
+  margin-bottom: 0.75rem;
 }

package/skills/wix-headless/references/astro/templates/index.astro

@@ -17,8 +17,8 @@ import Layout from '../layouts/Layout.astro';
 ---
 <Layout>
   <section class="relative">
-    <div class="max-w-6xl mx-auto px-lg py-4xl grid grid-cols-1 md:grid-cols-2 gap-3xl items-center">
-      <div class="flex flex-col gap-lg">
+    <div class="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
+      <div class="flex flex-col gap-6">
         <h1 class="font-display text-4xl md:text-5xl leading-tight">{{shell.heroHeadline}}</h1>
         <p class="text-lg text-mute max-w-prose">{{shell.heroSub}}</p>
       </div>
@@ -34,7 +34,7 @@ import Layout from '../layouts/Layout.astro';
 
   {{home-markers}}
 
-  <section class="max-w-6xl mx-auto px-lg py-4xl grid grid-cols-1 md:grid-cols-2 gap-3xl items-center">
+  <section class="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
     <div
       class="about-image rounded-md order-last md:order-first"
       data-decorative-slot="about"
@@ -42,7 +42,7 @@ import Layout from '../layouts/Layout.astro';
     >
       <!-- orchestrator injects <img src={decorativeImages.about} …> here -->
     </div>
-    <div class="flex flex-col gap-md max-w-prose">
+    <div class="flex flex-col gap-4 max-w-prose">
       <hr class="editorial-rule w-16 ml-0" />
       <h2 class="font-display text-3xl leading-tight">The story behind {{brand.name}}</h2>
       <p class="text-ink leading-relaxed">

package/skills/wix-headless/references/astro/templates/stores/components-stores.css

@@ -28,7 +28,7 @@
 .product-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: var(--spacing-xl);
+  gap: 2rem;
   transition: opacity 200ms ease;
 }
 body[data-navigating="true"] .product-grid {
@@ -40,8 +40,8 @@ body[data-navigating="true"] .product-grid {
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
-  padding-bottom: var(--spacing-md);
+  gap: 1rem;
+  padding-bottom: 1rem;
   background: var(--color-paper, var(--color-cream));
   border-radius: var(--radius-xl);
   overflow: hidden;
@@ -59,7 +59,7 @@ body[data-navigating="true"] .product-grid {
 
 .product-card-media {
   position: relative;
-  margin: var(--spacing-md);
+  margin: 1rem;
   aspect-ratio: 4 / 5;
   background: var(--color-paper-warm, var(--color-cream));
   border-radius: var(--radius-md);
@@ -75,8 +75,8 @@ body[data-navigating="true"] .product-grid {
 .product-card-body {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
-  padding-inline: var(--spacing-md);
+  gap: 0.5rem;
+  padding-inline: 1rem;
 }
 .product-card-name {
   margin: 0;
@@ -95,8 +95,8 @@ body[data-navigating="true"] .product-grid {
 
 .product-card-ribbon {
   position: absolute;
-  top: var(--spacing-md);
-  left: var(--spacing-md);
+  top: 1rem;
+  left: 1rem;
   padding: 0.375rem 0.625rem;
   background: var(--color-accent);
   color: var(--color-ink);
@@ -110,8 +110,8 @@ body[data-navigating="true"] .product-grid {
 }
 .product-card-index {
   position: absolute;
-  top: var(--spacing-md);
-  right: var(--spacing-md);
+  top: 1rem;
+  right: 1rem;
   padding: 0.375rem 0.5rem;
   background: rgba(255, 255, 255, 0.85);
   color: var(--color-ink);
@@ -132,19 +132,19 @@ body[data-navigating="true"] .product-grid {
   background: var(--color-paper-warm, var(--color-cream));
   border: 1px solid var(--color-rule);
   border-left: 2px solid var(--color-accent);
-  padding: var(--spacing-lg);
+  padding: 1.5rem;
   border-radius: var(--radius-md);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
+  gap: 1rem;
 }
 .offer-callout-item {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
+  gap: 0.5rem;
 }
 .offer-callout-item + .offer-callout-item {
-  padding-top: var(--spacing-md);
+  padding-top: 1rem;
   border-top: 1px solid var(--color-rule);
 }
 .offer-callout-badge {
@@ -190,7 +190,7 @@ body[data-navigating="true"] .product-grid {
    of this template used `@apply font-heading text-bark/70 bg-parchment …`,
    which assumed a different token vocabulary than current designer output
    (`paper`/`ink`/`font-display` …) and built-failed on every run that loaded
-   it. Direct `var(--color-paper)` / `var(--spacing-sm)` calls work against
+   it. Direct `var(--color-paper)` / `0.75rem` calls work against
    any designer-published token set as long as the core scales exist (they
    always do). Use fallback chains (`var(--color-paper-warm, var(--color-cream))`)
    when a token is sometimes-published.
@@ -200,8 +200,8 @@ body[data-navigating="true"] .product-grid {
 .option-group {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
-  margin-bottom: var(--spacing-lg);
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
 }
 .option-label {
   font-family: var(--font-display);
@@ -213,10 +213,10 @@ body[data-navigating="true"] .product-grid {
 .option-choices {
   display: flex;
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .option-pill {
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   border: 1px solid var(--color-ink);
   background: transparent;
   color: var(--color-ink);
@@ -255,14 +255,14 @@ body[data-navigating="true"] .product-grid {
   cursor: not-allowed;
 }
 .quantity-value {
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   font-variant-numeric: tabular-nums;
 }
 
 /* --- Modifier free-text input (ProductPurchase.tsx, FREE_TEXT render type) --- */
 .modifier-text {
   width: 100%;
-  padding: var(--spacing-sm);
+  padding: 0.75rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
   border: 1px solid var(--color-rule);
@@ -290,9 +290,9 @@ body[data-navigating="true"] .product-grid {
 .back-in-stock-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-md);
-  margin-top: var(--spacing-md);
-  padding: var(--spacing-lg);
+  gap: 1rem;
+  margin-top: 1rem;
+  padding: 1.5rem;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-md);
   background: var(--color-paper, var(--color-cream));
@@ -300,7 +300,7 @@ body[data-navigating="true"] .product-grid {
 .back-in-stock-headline {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .back-in-stock-eyebrow {
   font-family: var(--font-display);
@@ -326,11 +326,11 @@ body[data-navigating="true"] .product-grid {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: var(--spacing-sm);
+  gap: 0.75rem;
 }
 .back-in-stock-input {
   flex: 1;
-  padding: var(--spacing-sm) var(--spacing-md);
+  padding: 0.75rem 1rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
   border: 1px solid var(--color-rule);
@@ -345,7 +345,7 @@ body[data-navigating="true"] .product-grid {
   border-color: var(--color-ink);
 }
 .back-in-stock-submit {
-  padding: var(--spacing-sm) var(--spacing-lg);
+  padding: 0.75rem 1.5rem;
   font-family: var(--font-display);
   font-size: 0.75rem;
   text-transform: uppercase;
@@ -370,8 +370,8 @@ body[data-navigating="true"] .product-grid {
   color: var(--color-error, var(--color-accent));
 }
 .back-in-stock-success {
-  margin-top: var(--spacing-md);
-  padding: var(--spacing-lg);
+  margin-top: 1rem;
+  padding: 1.5rem;
   border: 1px solid var(--color-rule);
   border-radius: var(--radius-md);
   background: var(--color-paper, var(--color-cream));
@@ -390,7 +390,7 @@ body[data-navigating="true"] .product-grid {
   margin: 0;
 }
 .stock-status.back-in-stock-alt {
-  margin-top: var(--spacing-sm);
+  margin-top: 0.75rem;
   font-family: var(--font-body);
   font-size: 0.875rem;
   font-style: italic;

package/skills/wix-headless/references/astro/templates/stores/products/[slug].astro

@@ -89,14 +89,14 @@ const viewContentPayload = {
   hasSeoTags={hasSeoTags}
 >
   {hasSeoTags && <SeoTags slot="head" tags={seoTags} />}
-  <main class="py-3xl">
-    <div class="max-w-wide mx-auto px-xl">
+  <main class="py-16">
+    <div class="max-w-wide mx-auto px-8">
       <a href="/products" class="text-mute text-sm tracking-wide uppercase">&larr; Back to products</a>
-      <div class="grid grid-cols-1 md:grid-cols-[7fr_5fr] gap-2xl md:gap-4xl mt-xl items-start">
+      <div class="grid grid-cols-1 md:grid-cols-[7fr_5fr] gap-12 md:gap-24 mt-8 items-start">
         <div class="aspect-[4/5] bg-cream rounded-sm overflow-hidden">
           {imageUrl && <img src={imageUrl} alt={product.name ?? "Product"} class="w-full h-full object-cover" />}
         </div>
-        <div class="flex flex-col gap-lg md:sticky md:top-2xl">
+        <div class="flex flex-col gap-6 md:sticky md:top-12">
           <h1 class="font-display text-4xl leading-tight">{product.name}</h1>
           {price && <p class="text-xl text-ink-soft">{price}</p>}
           {description && <p class="text-ink-soft leading-relaxed">{description}</p>}