@wix/agent-skills 1.6.0 → 1.8.0

package/skills/wix-headless/references/{cms → astro/cms}/FAQ_KNOWLEDGE_BASE.md

@@ -2,11 +2,11 @@
 
 Build a FAQ page using `@wix/data` — Q&A pairs organized by category with accordion UI and client-side search. Use for frequently asked questions, help centers, or knowledge bases.
 
-> Read `CMS_FOUNDATIONS.md` first for shared patterns (service module, image resolution, elevation, MCP seeding).
+> Read `CMS_FOUNDATIONS.md` (this folder — service module, query patterns, image resolution, elevation) for page-rendering patterns, and `../../cms/CMS_FOUNDATIONS.md` for REST-based seeding.
 
 ## Collection Schema
 
-Create a collection in the Wix dashboard → CMS with these fields:
+The schema the `seed` scope creates via REST (see `../../cms/CMS_FOUNDATIONS.md`) — fields:
 
 | Field | Type | Purpose |
 |-------|------|---------|
@@ -32,7 +32,7 @@ Create a collection in the Wix dashboard → CMS with these fields:
 ### 1. FAQ Service Module (`src/lib/faq.ts`)
 
 ```typescript
-import * as items from "@wix/wix-data-items-sdk";
+import { items } from "@wix/data";
 import { auth } from "@wix/essentials";
 
 const COLLECTION_ID = "FAQ";
@@ -169,7 +169,7 @@ export default function FaqSection({ categories }: Props) {
 }
 ```
 
-> **Styling note:** Uses `.faq-search`, `.faq-section`, `.faq-category`, `.faq-item`, `.faq-question`, `.faq-toggle`, `.faq-answer` from the designed component's `<style is:global>` block. See `COMPONENT_PATTERNS.md` → FAQ Accordion.
+> **Styling note:** Uses `.faq-search`, `.faq-section`, `.faq-category`, `.faq-item`, `.faq-question`, `.faq-toggle`, `.faq-answer` from the designed component's `<style is:global>` block. See `references/shared/STYLING.md` (FAQ Accordion).
 
 Key details:
 - `<details>/<summary>` for native accordion behavior — no JavaScript needed for open/close
@@ -180,6 +180,8 @@ Key details:
 
 ### 3. FAQ Page (`src/pages/faq/index.astro`)
 
+**Layout width:** Center the page column with `container-reading` (from designer `global.css`) or `max-w-6xl mx-auto px-lg` when `--container-6xl` exists in `@theme`. **Do not** use `max-w-3xl` unless `--container-3xl` is declared in `@theme` — with only a spacing scale, Tailwind maps `max-w-3xl` to ~5rem and the FAQ collapses to one word per line. See `references/shared/STYLING.md` § "Prose / reading width".
+
 ```astro
 ---
 import Layout from "../../layouts/Layout.astro";
@@ -193,7 +195,7 @@ const categories = [...grouped.entries()].map(([name, items]) => ({ name, items
 
 <Layout title="FAQ">
   <main>
-    <div>
+    <div class="container-reading px-lg">
       <h1>Frequently Asked Questions</h1>
       <p>Find answers to common questions below, or use the search to find what you need.</p>
 
@@ -220,10 +222,10 @@ Key details:
 
 ## Testing
 
-1. Create a "FAQ" collection in the Wix dashboard → CMS with the schema above
-2. Add 6+ FAQ items across 2+ categories, all with `published: true`
-3. Run `npx @wix/cli dev`
-4. `/faq` — shows all questions grouped by category
-5. Click a question — accordion opens with the answer
-6. Type in search — filters questions in real-time
-7. Click a category jump link — scrolls to that section
+Assumes the `seed` scope has already created the "FAQ" collection and inserted items via REST (see `../../cms/CMS_FOUNDATIONS.md`) — with 6+ FAQ items across 2+ categories, all `published: true`.
+
+1. Run `npx @wix/cli@latest dev`
+2. `/faq` — shows all questions grouped by category
+3. Click a question — accordion opens with the answer
+4. Type in search — filters questions in real-time
+5. Click a category jump link — scrolls to that section

package/skills/wix-headless/references/{cms → astro/cms}/PORTFOLIO.md

@@ -2,11 +2,11 @@
 
 Build a visual portfolio using `@wix/data` — project grid with category filtering, image galleries, and project detail pages. Use for work samples, case studies, creative projects, or any visual showcase.
 
-> Read `CMS_FOUNDATIONS.md` first for shared patterns (service module, image resolution, elevation, MCP seeding).
+> Read `CMS_FOUNDATIONS.md` (this folder — service module, query patterns, image resolution, elevation) for page-rendering patterns, and `../../cms/CMS_FOUNDATIONS.md` for REST-based seeding.
 
 ## Collection Schema
 
-Create a collection in the Wix dashboard → CMS with these fields:
+The schema the `seed` scope creates via REST (see `../../cms/CMS_FOUNDATIONS.md`) — fields:
 
 | Field | Type | Purpose |
 |-------|------|---------|
@@ -38,7 +38,7 @@ Create a collection in the Wix dashboard → CMS with these fields:
 ### 1. Portfolio Service Module (`src/lib/portfolio.ts`)
 
 ```typescript
-import * as items from "@wix/wix-data-items-sdk";
+import { items } from "@wix/data";
 import { auth } from "@wix/essentials";
 import { media } from "@wix/sdk";
 
@@ -150,7 +150,7 @@ const { categories, activeCategory, basePath } = Astro.props;
 </nav>
 ```
 
-> **Styling note:** CategoryFilter styling is created by the design skill. See `COMPONENT_PATTERNS.md` → Category Filter.
+> **Styling note:** CategoryFilter styling is created by the design skill. See `references/shared/STYLING.md` (Category Filter).
 
 > Server-rendered, no JavaScript. Category is read from `Astro.url.searchParams` in the page.
 
@@ -189,7 +189,7 @@ const { project } = Astro.props;
 </a>
 ```
 
-> **Styling note:** ProjectCard styling is created by the design skill. See `COMPONENT_PATTERNS.md` → Project Card.
+> **Styling note:** ProjectCard styling is created by the design skill. See `references/shared/STYLING.md` (Project Card).
 
 ### 4. Project Grid Page (`src/pages/work/index.astro`)
 
@@ -376,7 +376,7 @@ export default function ImageGallery({ images, alt }: Props) {
 }
 ```
 
-> **Styling note:** Uses `.gallery-grid`, `.gallery-item`, `.lightbox-overlay`, `.lightbox-image`, `.lightbox-nav`, `.lightbox-close` from the designed component's `<style is:global>` block. See `COMPONENT_PATTERNS.md` → Image Gallery / Lightbox.
+> **Styling note:** Uses `.gallery-grid`, `.gallery-item`, `.lightbox-overlay`, `.lightbox-image`, `.lightbox-nav`, `.lightbox-close` from the designed component's `<style is:global>` block. See `references/shared/STYLING.md` (Image Gallery / Lightbox).
 
 Key details:
 - Renders as a grid; clicking opens a lightbox overlay
@@ -410,7 +410,7 @@ const featured = await queryFeaturedProjects(3);
 
 ## Seed with Images
 
-After seeding projects via MCP, generate cover images (and optionally gallery images) following `../../shared/IMAGE_GENERATION.md` and `CMS_FOUNDATIONS.md` → "MCP Seeding with Images".
+After seeding projects via REST, generate cover images (and optionally gallery images) following `../../shared/IMAGE_GENERATION.md` and `../../cms/CMS_FOUNDATIONS.md` → "Seeding with Images".
 
 **Cover image prompt template:**
 
@@ -426,12 +426,12 @@ Project showcase image for [TITLE]. [BRAND AESTHETIC]. Color palette: [BRAND COL
 Gallery image [N] for [TITLE]: [describe a specific aspect/angle of the project]. [BRAND AESTHETIC]. [BRAND COLORS]. No text, no watermarks
 ```
 
-**Patch fields:** `coverImage`, optionally `galleryImages` (as an array of wixstatic URLs)
+**Patch field:** `galleryImages` (as an array of wixstatic URLs)
 
 Example patch:
 
 ```
-CallWixSiteAPI: PATCH /wix-data/v2/items/{projectId}
+REST: PATCH https://www.wixapis.com/wix-data/v2/items/{projectId}
 body: {
   "dataCollectionId": "Projects",
   "dataItem": {
@@ -445,10 +445,9 @@ body: {
 
 ## Testing
 
-1. Create a "Projects" collection in the Wix dashboard → CMS with the schema above
-2. Add 3+ projects with cover images, categories, and at least one with gallery images
-3. Mark 1–2 as `featured: true`
-4. Run `npx @wix/cli dev`
-5. `/work` — grid with category filter tabs
-6. Click a category — filters projects
-7. Click a project — detail page with gallery lightbox
+Assumes the `seed` scope has already created the "Projects" collection and inserted items via REST (see `../../cms/CMS_FOUNDATIONS.md`) — 3+ projects with categories (and, after the image pass, cover/gallery images), 1–2 marked `featured: true`.
+
+1. Run `npx @wix/cli@latest dev`
+2. `/work` — grid with category filter tabs
+3. Click a category — filters projects
+4. Click a project — detail page with gallery lightbox

package/skills/wix-headless/references/{cms → astro/cms}/RESOURCE_LIBRARY.md

@@ -2,11 +2,11 @@
 
 Build a downloadable resource library using `@wix/data` — file listings with category filtering, file type badges, and detail pages with download buttons. Use for documents, guides, templates, whitepapers, or any downloadable assets.
 
-> Read `CMS_FOUNDATIONS.md` first for shared patterns (service module, image resolution, elevation, MCP seeding).
+> Read `CMS_FOUNDATIONS.md` (this folder — service module, query patterns, image resolution, elevation) for page-rendering patterns, and `../../cms/CMS_FOUNDATIONS.md` for REST-based seeding.
 
 ## Collection Schema
 
-Create a collection in the Wix dashboard → CMS with these fields:
+The schema the `seed` scope creates via REST (see `../../cms/CMS_FOUNDATIONS.md`) — fields:
 
 | Field | Type | Purpose |
 |-------|------|---------|
@@ -36,7 +36,7 @@ Create a collection in the Wix dashboard → CMS with these fields:
 ### 1. Resources Service Module (`src/lib/resources.ts`)
 
 ```typescript
-import * as items from "@wix/wix-data-items-sdk";
+import { items } from "@wix/data";
 import { auth } from "@wix/essentials";
 import { media } from "@wix/sdk";
 
@@ -146,8 +146,7 @@ const fileType = type.toUpperCase();
 ```
 
 Key details:
-- Color-coded by file type — red for PDF, blue for DOC, green for XLS, yellow for ZIP
-- Falls back to neutral gray for unknown types
+- The SVG uses `stroke="currentColor"` — any per-file-type coloring is purely CSS-driven (e.g. a `.file-type-pdf` class on the wrapper), not set here
 - File type label rendered inside the document icon SVG
 
 ### 3. Resource Card (`src/components/ResourceCard.astro`)
@@ -187,7 +186,7 @@ const { resource } = Astro.props;
 </a>
 ```
 
-> **Styling note:** ResourceCard styling is created by the design skill. See `COMPONENT_PATTERNS.md` → Resource Card.
+> **Styling note:** ResourceCard styling is created by the design skill. See `references/shared/STYLING.md` (Resource Card).
 
 ### 4. Resource Listing Page (`src/pages/resources/index.astro`)
 
@@ -321,7 +320,7 @@ Key details:
 
 ## Seed with Images
 
-After seeding resources via MCP, generate cover images following `../../shared/IMAGE_GENERATION.md` and `CMS_FOUNDATIONS.md` → "MCP Seeding with Images".
+After seeding resources via REST, generate cover images following `../../shared/IMAGE_GENERATION.md` and `../../cms/CMS_FOUNDATIONS.md` → "Seeding with Images".
 
 **Prompt template:**
 
@@ -334,7 +333,7 @@ Cover image for [TITLE], a [FILE TYPE]. Abstract [BRAND AESTHETIC]. Color tones:
 Example patch:
 
 ```
-CallWixSiteAPI: PATCH /wix-data/v2/items/{resourceId}
+REST: PATCH https://www.wixapis.com/wix-data/v2/items/{resourceId}
 body: {
   "dataCollectionId": "Resources",
   "dataItem": {
@@ -347,10 +346,9 @@ body: {
 
 ## Testing
 
-1. Create a "Resources" collection in the Wix dashboard → CMS with the schema above
-2. Add 4+ resources across 2+ categories with different file types (PDF, DOC, ZIP)
-3. Include `fileUrl` links (can be any downloadable URL for testing)
-4. Run `npx @wix/cli dev`
-5. `/resources` — shows all resources with category filters and file type badges
-6. Click a category — filters resources
-7. Click a resource — detail page with download button and related resources
+Assumes the `seed` scope has already created the "Resources" collection and inserted items via REST (see `../../cms/CMS_FOUNDATIONS.md`) — 4+ resources across 2+ categories with different file types (PDF, DOC, ZIP) and `fileUrl` links (any downloadable URL for testing).
+
+1. Run `npx @wix/cli@latest dev`
+2. `/resources` — shows all resources with category filters and file type badges
+3. Click a category — filters resources
+4. Click a resource — detail page with download button and related resources

package/skills/wix-headless/references/{cms → astro/cms}/TEAM_DIRECTORY.md

@@ -2,11 +2,11 @@
 
 Build a team directory using `@wix/data` — staff cards grouped by department with individual profile pages. Use for about us, our team, meet the staff, or any people directory.
 
-> Read `CMS_FOUNDATIONS.md` first for shared patterns (service module, image resolution, elevation, MCP seeding).
+> Read `CMS_FOUNDATIONS.md` (this folder — service module, query patterns, image resolution, elevation) for page-rendering patterns, and `../../cms/CMS_FOUNDATIONS.md` for REST-based seeding.
 
 ## Collection Schema
 
-Create a collection in the Wix dashboard → CMS with these fields:
+The schema the `seed` scope creates via REST (see `../../cms/CMS_FOUNDATIONS.md`) — fields:
 
 | Field | Type | Purpose |
 |-------|------|---------|
@@ -35,7 +35,7 @@ Create a collection in the Wix dashboard → CMS with these fields:
 ### 1. Team Service Module (`src/lib/team.ts`)
 
 ```typescript
-import * as items from "@wix/wix-data-items-sdk";
+import { items } from "@wix/data";
 import { auth } from "@wix/essentials";
 import { media } from "@wix/sdk";
 
@@ -156,7 +156,7 @@ const { member } = Astro.props;
 </a>
 ```
 
-> **Styling note:** TeamMemberCard styling is created by the design skill. See `COMPONENT_PATTERNS.md` → Team Member Card.
+> **Styling note:** TeamMemberCard styling is created by the design skill. See `references/shared/STYLING.md` (Team Member Card).
 
 Key details:
 - Inline SVG icons — no icon library dependency
@@ -266,7 +266,7 @@ if (!member) return Astro.redirect("/404");
 > **Do not skip:** Team members without photos appear as initial-letter placeholders.
 > Always ask the user if they want to generate headshot images before moving on.
 
-After seeding team members via MCP, generate headshot images following `../../shared/IMAGE_GENERATION.md` and `CMS_FOUNDATIONS.md` → "MCP Seeding with Images".
+After seeding team members via REST, generate headshot images following `../../shared/IMAGE_GENERATION.md` and `../../cms/CMS_FOUNDATIONS.md` → "Seeding with Images".
 
 **Prompt template:**
 
@@ -279,7 +279,7 @@ Professional headshot portrait of [NAME], [ROLE] at [BUSINESS NAME]. [BRAND AEST
 Example: after generating and importing the image, patch the team member item:
 
 ```
-CallWixSiteAPI: PATCH /wix-data/v2/items/{memberId}
+REST: PATCH https://www.wixapis.com/wix-data/v2/items/{memberId}
 body: {
   "dataCollectionId": "Team",
   "dataItem": {
@@ -292,8 +292,8 @@ body: {
 
 ## Testing
 
-1. Create a "Team" collection in the Wix dashboard → CMS with the schema above
-2. Add 4+ members across 2+ departments, with photos and social links
-3. Run `npx @wix/cli dev`
-4. `/team` — shows members grouped by department
-5. Click a member — profile page with photo, bio, and social links
+Assumes the `seed` scope has already created the "Team" collection and inserted items via REST (see `../../cms/CMS_FOUNDATIONS.md`) — 4+ members across 2+ departments, with social links (and headshots after the image pass).
+
+1. Run `npx @wix/cli@latest dev`
+2. `/team` — shows members grouped by department
+3. Click a member — profile page with photo, bio, and social links