@wix/agent-skills 1.6.0 → 1.7.0

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

@@ -182,114 +182,219 @@ body[data-navigating="true"] .product-grid {
 }
 
 
+/* =========================================================================
+   Rules below use direct CSS (var(--token)) only — no `@apply`.
+
+   Tailwind v4 `@apply` in a non-entrypoint CSS file only works for utilities
+   whose theme keys the designer's `@theme` block declares. Earlier revisions
+   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
+   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.
+   ========================================================================= */
+
 /* --- Variant / option pills (ProductPurchase.tsx) --- */
 .option-group {
-  @apply flex flex-col gap-sm mb-lg;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
 }
 .option-label {
-  @apply font-heading text-sm uppercase tracking-wider text-bark/70;
+  font-family: var(--font-display);
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-ink-soft, var(--color-mute));
 }
 .option-choices {
-  @apply flex flex-wrap gap-sm;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 .option-pill {
-  @apply px-md py-sm border border-bark bg-transparent text-bark font-body rounded-full cursor-pointer transition-colors;
+  padding: var(--spacing-sm) var(--spacing-md);
+  border: 1px solid var(--color-ink);
+  background: transparent;
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  border-radius: 9999px;
+  cursor: pointer;
+  transition: background-color 150ms ease, color 150ms ease;
 }
 .option-pill.selected {
-  @apply bg-bark text-cream;
+  background: var(--color-ink);
+  color: var(--color-paper);
 }
 .option-pill:disabled {
-  @apply opacity-40 cursor-not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 
 /* --- Quantity stepper (ProductPurchase.tsx, CartView.tsx qty editing) --- */
 .quantity-selector {
-  @apply inline-flex items-center border border-bark rounded-md overflow-hidden;
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius-md);
+  overflow: hidden;
 }
 .quantity-btn {
-  @apply px-3 py-2 bg-transparent border-none cursor-pointer text-bark font-body;
+  padding: 0.5rem 0.75rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--color-ink);
+  font-family: var(--font-body);
 }
 .quantity-btn:disabled {
-  @apply opacity-40 cursor-not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 .quantity-value {
-  @apply px-md py-sm tabular-nums;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-variant-numeric: tabular-nums;
 }
 
 /* --- Modifier free-text input (ProductPurchase.tsx, FREE_TEXT render type) --- */
 .modifier-text {
-  @apply w-full px-sm py-sm font-body text-sm border border-rule rounded bg-parchment text-ink;
+  width: 100%;
+  padding: var(--spacing-sm);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
+  color: var(--color-ink);
   resize: vertical;
 }
 .modifier-text:focus {
-  @apply outline-none border-ink bg-cream;
+  outline: none;
+  border-color: var(--color-ink);
+  background: var(--color-paper, var(--color-cream));
 }
 
 /* --- Stock status (ProductPurchase.tsx) --- */
 .stock-status {
-  @apply text-sm text-bark/70 italic;
+  font-size: 0.875rem;
+  color: var(--color-ink-soft, var(--color-mute));
+  font-style: italic;
 }
 
 /* --- Back-in-stock subscribe form (BackInStockForm.tsx) ---
  * Rendered inside .purchase-area in three OOS branches when
  * backInStockEnabled=true (probe in [slug].astro). */
 .back-in-stock-form {
-  @apply flex flex-col gap-md mt-md p-lg border border-rule rounded;
-  background-color: var(--color-cream);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-md);
+  background: var(--color-paper, var(--color-cream));
 }
 .back-in-stock-headline {
-  @apply flex flex-col gap-sm;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
 }
 .back-in-stock-eyebrow {
-  @apply font-heading text-xs uppercase tracking-wider text-bark/70;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-ink-soft, var(--color-mute));
 }
 .back-in-stock-lede {
-  @apply font-body text-sm text-ink;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink);
   line-height: 1.5;
 }
 .back-in-stock-label {
-  @apply font-heading text-xs uppercase tracking-wider text-bark/70;
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-ink-soft, var(--color-mute));
 }
 .back-in-stock-row {
-  @apply flex flex-row flex-wrap gap-sm;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
 }
 .back-in-stock-input {
-  @apply flex-1 px-md py-sm font-body text-sm border border-rule rounded bg-parchment text-ink;
+  flex: 1;
+  padding: var(--spacing-sm) var(--spacing-md);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-sm);
+  background: var(--color-paper-warm, var(--color-paper, var(--color-cream)));
+  color: var(--color-ink);
   min-width: 0;
   transition: border-color 0.15s ease;
 }
 .back-in-stock-input:focus {
-  @apply outline-none border-ink;
+  outline: none;
+  border-color: var(--color-ink);
 }
 .back-in-stock-submit {
-  @apply px-lg py-sm font-heading text-xs uppercase tracking-wider bg-bark text-cream rounded cursor-pointer transition-colors;
-  border: 1px solid var(--color-bark);
+  padding: var(--spacing-sm) var(--spacing-lg);
+  font-family: var(--font-display);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border: 1px solid var(--color-ink);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 150ms ease;
 }
 .back-in-stock-submit:hover:not(:disabled) {
-  @apply bg-ink;
+  background: var(--color-ink-soft, var(--color-ink));
 }
 .back-in-stock-submit:disabled {
-  @apply opacity-50 cursor-not-allowed;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 .back-in-stock-error {
-  @apply font-body text-sm;
-  color: var(--color-rust, var(--color-ink));
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-error, var(--color-accent));
 }
 .back-in-stock-success {
-  @apply mt-md p-lg border border-rule rounded;
-  background-color: var(--color-cream);
+  margin-top: var(--spacing-md);
+  padding: var(--spacing-lg);
+  border: 1px solid var(--color-rule);
+  border-radius: var(--radius-md);
+  background: var(--color-paper, var(--color-cream));
 }
 .back-in-stock-success-headline {
-  @apply font-heading text-base text-ink;
+  font-family: var(--font-display);
+  font-size: 1rem;
+  color: var(--color-ink);
   margin: 0 0 0.5rem 0;
 }
 .back-in-stock-success-detail {
-  @apply font-body text-sm text-ink;
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  color: var(--color-ink);
   line-height: 1.55;
   margin: 0;
 }
 .stock-status.back-in-stock-alt {
-  @apply mt-sm font-body text-sm italic text-bark/70;
+  margin-top: var(--spacing-sm);
+  font-family: var(--font-body);
+  font-size: 0.875rem;
+  font-style: italic;
+  color: var(--color-ink-soft, var(--color-mute));
 }
 
 /* Cart CSS (.cart-item-*, .qty-*) lives in components-ecom.css — not in this file. */

package/skills/wix-headless/references/blog/BLOG_CONTENT.md

@@ -1,4 +1,4 @@
-# Recipe: Seed Initial Blog Posts via MCP
+# Recipe: Seed Initial Blog Posts via REST
 
 Create 3 on-brand blog posts so the blog has real content on first preview.
 
@@ -8,24 +8,24 @@ Create 3 on-brand blog posts so the blog has real content on first preview.
 > 3. **Use `@wix/blog`, not `@wix/data`** — blog posts are NOT CMS collections.
 > 4. **`RICH_CONTENT` fieldset required** — without it, `post.richContent` is undefined and rendering fails.
 
-> **Required in the Seed phase.** When dispatched with `Scope: seed`, MCP tools and discovery context are guaranteed available. Always execute this section — do not skip. A blog with zero posts on first preview is a build failure.
+> **Required in the Seed phase.** When dispatched with `Scope: seed`, the CLI-minted REST token and discovery context are guaranteed available. Always execute this section — do not skip. A blog with zero posts on first preview is a build failure.
 >
-> **Skip only for standalone invocations** where the Blog skill is invoked directly AND `mcp__wix-mcp-remote__CallWixSiteAPI` is genuinely unavailable. In that case, the user can create posts manually in the Wix dashboard.
+> **Skip only for standalone invocations** where the Blog skill is invoked directly AND CLI token mint fails after recovery. In that case, the user can create posts manually in the Wix dashboard.
 
 ## Step 0: Ensure Blog App Is Installed
 
 Before querying blog data, verify the Blog app is installed:
 
-1. **Probe** — `CallWixSiteAPI: POST /blog/v3/posts/query` with body `{ "query": { "paging": { "limit": 1 } } }`
+1. **Probe** — `REST: POST https://www.wixapis.com/blog/v3/posts/query`
 2. **If the API returns a "REQUIRED_APP_NOT_INSTALLED" error** → install the Wix Blog app:
    ```
-   CallWixSiteAPI: POST https://www.wixapis.com/apps-installer-service/v1/app-instance/install
+   REST: POST https://www.wixapis.com/apps-installer-service/v1/app-instance/install
    body: {
      "tenant": { "tenantType": "SITE", "id": "<siteId>" },
      "appInstance": { "appDefId": "14bcded7-0066-7c35-14d7-466cb3f09103", "enabled": true }
    }
    ```
-   > Translate this prose-HTTP form into the full `CallWixSiteAPI` tool-call shape — include `siteId`, `reason`, `sourceDocUrl` wrapper fields and pass `body` as a real object (NOT a stringified JSON). See `../../shared/MCP_PREFIX.md` § "CallWixSiteAPI call conventions".
+   > Translate this prose-HTTP form into the full `curl` tool-call shape — pass `body` as JSON in `-d` (NOT a stringified JSON). See `../shared/AUTHENTICATION.md` for the standard REST headers.
 
    Then retry the probe query to confirm installation succeeded.
 3. **If the probe succeeds** → proceed to Step 1.
@@ -37,7 +37,7 @@ Before querying blog data, verify the Blog app is installed:
 Blog posts require a `memberId` (the post author). Fetch the first site member:
 
 ```
-CallWixSiteAPI: GET /members/v1/members
+REST: GET https://www.wixapis.com/members/v1/members
 ```
 
 Extract the first member's `_id` from the response. This will be used as the author for all posts.
@@ -70,7 +70,7 @@ For each post, call `POST /blog/v3/draft-posts` with `publish: true` to create a
 > Do not include the `media` field — cover images are handled separately by the image agent after post creation.
 
 ```
-CallWixSiteAPI: POST /blog/v3/draft-posts
+REST: POST https://www.wixapis.com/blog/v3/draft-posts
 body: {
   "draftPost": {
     "title": "<Post Title>",
@@ -119,7 +119,7 @@ Use these node types to build rich, varied content:
 - TEXT nodes are always leaf nodes inside PARAGRAPH, HEADING, CODE_BLOCK, etc.
 - LIST_ITEM nodes contain PARAGRAPH nodes (not TEXT directly)
 - Mix at least 3 different node types per post for visual variety
-- Create all 3 posts in sequence (one `CallWixSiteAPI` call per post)
+- Create all 3 posts in sequence (one `curl` call per post)
 - **Best practice:** include all fields (title, content, media) in the initial creation call to avoid needing a re-publish
 
 > **Re-publish after PATCH:** If you update a published post (e.g., adding a cover image via PATCH after creation), it becomes `hasUnpublishedChanges: true`. You must call `POST /blog/v3/draft-posts/{draftPostId}/publish` to re-publish. To avoid this, include media in the initial creation call.
@@ -129,7 +129,7 @@ Use these node types to build rich, varied content:
 Query published posts to confirm all 3 exist:
 
 ```
-CallWixSiteAPI: POST /blog/v3/posts/query
+REST: POST https://www.wixapis.com/blog/v3/posts/query
 body: {
   "query": {
     "paging": { "limit": 10 }
@@ -149,4 +149,3 @@ Write a sidecar file at `.wix/logs/blog-data.md` (see `../../shared/LIFECYCLE_LO
 - Content: {n} posts published ({post titles})
 - Images: {generated (n/n attached) | skipped (user declined) | not attempted}
 ```
-

package/skills/wix-headless/references/blog/INSTRUCTIONS.md

@@ -5,15 +5,15 @@ description: "Implements blog vertical via Wix Blog app — @wix/blog SDK, @wix/
 
 # Blog Implementer
 
-Extends `references/shared/IMPLEMENTER.md`. Read that file first for phase routing, MCP prefix, site.json read pattern, return contract, style conventions, and common failure modes.
+Extends `references/shared/IMPLEMENTER.md`. Read that file first for phase routing, REST auth + doc lookups, prompt-inlined inputs (no site.json reads), return contract, style conventions, and common failure modes.
 
 ## Scope routing
 
 | Scope | Phase | Reference |
 |-------|-------|-----------|
-| `seed` | Seed (post seeding via MCP with Ricos content) | `./BLOG_CONTENT.md` |
-| `components` | Components (blog service module, RicosViewer, consts, astro.config sitemap) | `./BLOG_SETUP.md` |
-| `pages` | Pages (listing, detail, RSS, BlogPost layout, home contribution) | `./BLOG_PAGES.md` |
+| `seed` | Seed (post seeding via REST with Ricos content) | `./BLOG_CONTENT.md` |
+| `components` | Components (blog service module, RicosViewer, consts, astro.config sitemap) | `../astro/blog/BLOG_SETUP.md` |
+| `pages` | Pages (listing, detail, RSS, BlogPost layout, home contribution) | `../astro/blog/BLOG_PAGES.md` |
 
 Cover images are generated by the shared image agent (`image-phase-2-entity` scope) AFTER `seed` completes — not by this agent.
 
@@ -29,4 +29,4 @@ See `<SKILL_ROOT>/references/verticals/blog.md` frontmatter.
 | `<article set:html={post.content} />` | `<RicosViewer client:only="react" content={post.richContent} />` — content is Ricos format |
 | Skip `wixMetadata` on `[...slug].astro` | Required for Wix page routing + SEO |
 | Query posts without `RICH_CONTENT` fieldset | Always request `RICH_CONTENT` or `post.richContent` is undefined |
-| Scoped `<style>` for RicosViewer overrides | `<style is:global>` — React islands don't inherit scoped Astro styles |
+| Scoped `<style>` for RicosViewer overrides | `<style is:global>` — React islands don't inherit scoped Astro styles |