@wix/agent-skills 1.18.1 → 1.19.0

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

@@ -1,8 +1,7 @@
 # Animated Components
 
-Use this reference when the component's primary content is a **playable
-animation**—a Lottie/JSON animation, an animated GIF/SVG, a canvas/WebGL loop,
-or a video-like surface.
+Use this reference when the component's primary content **auto-advances or plays**
+— a slideshow/carousel/slider; a Lottie/JSON animation; an animated GIF/SVG, a canvas/WebGL loop, a video-like surface; or similar content a visitor should be able to start or stop.
 
 Every such component must ship an on-stage **play/pause button**.
 
@@ -22,7 +21,7 @@ Apply automatically — without being asked — whenever the component has an
 `autoPlay` prop **or** its primary content is a **startable / loopable**
 animation a visitor would reasonably want to start or stop:
 
-- Any component with an `autoPlay` prop (gallery, slider, carousel, etc.)
+- Slideshow, carousel, slider, or gallery that advances slides/cards
 - Lottie / JSON vector animations
 - Animated GIFs or animated SVGs
 - Canvas / WebGL animation loops
@@ -40,6 +39,8 @@ implementation detail.
    automatically, `loop` only when repeat behavior is supported, and
    `pauseButtonVisibility` for the on-stage control. When editing, preserve
    existing playback prop names and add only the missing safety contract.
+   Carousels, sliders, slideshows, and galleries **must** define `autoPlay`
+   (default `true`).
 2. **Playback state** — `isPlaying` + `handlePause` / `handleResume`
 3. **Play/pause button** — overlay `<button>` with inline SVG icon and CSS
    positioning; it must be a named part with `elementProps` wiring, a hover
@@ -57,7 +58,7 @@ able to force the safety control visible.
 import type { A11y, Direction } from '@wix/editor-react-types';
 
 export interface MyAnimationProps {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -215,7 +216,9 @@ Add `useIsEditMode` to the existing `@wix/react-component-utils` import. Then
 edit only the body of the existing `ComponentNamePreview` function — add the
 `isEditMode` check and gate the autoplay props. Do not touch the
 `withFallbackPlaceholder` call, the `withDefaults` export, or any other part
-of the file.
+of the file. The composition must keep `withDefaults` outside
+`withFallbackPlaceholder`, whether the calls are nested inline or assigned to
+component variables.
 
 ```tsx
 const ComponentNamePreview: FC<ComponentProps<typeof Component>> = (props) => {

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

@@ -25,7 +25,7 @@ Use this shape:
 import type { A11y, Direction } from '@wix/editor-react-types';
 
 export type PlanCardProps = {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -53,9 +53,8 @@ Rules:
 
 ## Numeric Range Constraints
 
-For a new or changed numeric prop, use inline `@min` and `@max` JSDoc tags when
-the value has a fixed domain. Manifest generation reads the tags; no extension
-override is needed.
+Use inline `@min` and `@max` JSDoc tags for fixed-domain numeric props. Manifest
+generation reads the tags automatically.
 
 ```ts
 export type RatingProps = {
@@ -64,21 +63,17 @@ export type RatingProps = {
 };
 ```
 
-Use fixed bounds for ratings, percentages, playback speed, columns, and similar
-domains. Omit them for arbitrary counts, free-form prices, or an active index
-whose upper bound depends on the current collection.
+Use fixed bounds for ratings, percentages, playback speed, columns, etc. Omit
+for open-ended values or indices tied to a dynamic collection.
 
 ## Named Parts and `elementProps`
 
-Treat an independently editable inner element as a named part, then apply one
-consistent wiring rule:
+Treat an independently editable inner element as a named part. Wiring rules:
 
-- The elected root receives top-level `id`, `className`, `direction`, and `a11y`;
-  it has no `elementProps` entry.
-- Every named inner part has an `elementProps` entry, even when `className` is
-  the only injected field it currently needs.
-- Structural or decorative non-parts have no `elementProps` entry and use only a
-  CSS Module class.
+- Root receives top-level `id`, `className`, `direction`, `a11y` — no
+  `elementProps` entry.
+- Every named inner part has an `elementProps` entry (even if only `className`
+  is needed); structural/decorative non-parts use only a CSS Module class.
 
 On a raw HTML element, spread the entry and explicitly merge its injected
 `className`. Keep the entry key short while prefixing the global class with the
@@ -108,79 +103,62 @@ Do not merge the same class at both the call site and the sub-component root.
 
 ## Content and Data
 
-### Derived Values
-
-Compute a value internally when a small pure expression can derive it from
-props or state. For example, expose `price` and `quantity`; compute `subtotal`.
-Use numeric types when arithmetic is required.
+Compute derived values internally when a small pure expression can derive them
+from props or state (e.g. expose `price` and `quantity`; compute `subtotal`; use
+numeric types when arithmetic is required).
 
 ### Data-Driven Components
 
-Export named content props rather than `children` for leaf components:
-
-- text: `label`, `title`, `placeholder`
-- media: `image`, `video`, `icon`
-- links: `link`, `href`
-- collections: `items`, `options`, `menuItems`
-
-Internal sub-components may still use `children` for composition.
+Export named content props rather than `children` for leaf components — text
+(`label`, `title`, `placeholder`), media (`image`, `video`, `icon`), links
+(`link`, `href`), collections (`items`, `options`, `menuItems`). Internal
+sub-components may still use `children` for composition.
 
 ### Container Components
 
-Use `React.ReactNode` only when the specification defines a container or slot
-that accepts arbitrary nested components. Put `dir="ltr"` on the element that
-renders each `ReactNode` value so nested content does not inherit the component's
-direction.
+Use `React.ReactNode` only for containers or slots accepting arbitrary nested
+components. Put `dir="ltr"` on elements rendering `ReactNode` so nested content
+does not inherit the component's direction.
 
 ### Array Props
 
-Array elements must be objects with named keys. This provides stable identity,
-semantic field names, and room for non-breaking extension.
+Array elements must be objects with named keys for semantics and extensibility.
 
 ```ts
 type GalleryProps = {
-  images: Array<{ id: string; image: Image; caption?: string }>;
-  tags: Array<{ id: string; label: string }>;
+  images: Array<{ image: Image; caption?: string }>;
+  tags: Array<{ label: string }>;
 };
 ```
 
-Do not export arrays of primitives, leaf Wix data types, or nested arrays:
-
-```ts
-// Avoid:
-// Array<string>
-// Array<Image>
-// Array<Array<Item>>
-// Array<{ items: Array<Image> }>
-```
+Do not export `Array<string>`, `Array<Image>`, `Array<Array<T>>`, or nested
+arrays inside items.
 
-The parent owns the array. Item sub-components receive one item rather than
-redeclaring the collection. Use a stable item identifier as the React key; do
-not synthesize identity from the array index when stable identity is available.
+The parent owns the array. Item sub-components receive one item, not the
+collection. Do not add an `id` field for React keys—use the item's semantic
+named fields instead. Prefer: (1) a stable unique field (`value`, `uri`, `label`, …), (2)
+else slug a user-facing string (`name`, `label`), (3) else the array index.
 
-### Active-Item Components
+## Active-Item Components
 
-Apply this contract when an array-driven UI shows one item body at a time, such
-as tabs, slides, or steps. Skip it for always-visible lists, multi-select UIs,
-and multi-expand accordions.
+Apply this contract when an array-driven UI shows one item body at a time (tabs,
+slides, steps). Skip for always-visible lists, multi-select, or multi-expand.
 
-- Give every item a `name: string`; Studio uses `name` for hat-selector labels.
-- Pair the array prop with `ActiveItemIndex<'arrayPropName'>` from
-  `@wix/react-component-utils`. The type argument must exactly match the array
-  prop name, and `defaultProps` must initialize the index to `0`.
-- Render every body with `.map()`. Mark the active body with a prefixed
-  `--active` state class, hide inactive bodies with functional CSS visibility,
-  and apply `aria-hidden` and `inert` to inactive content.
-- Provide keyboard navigation between triggers and the matching ARIA pattern.
+- Every item needs `name: string` (used for hat-selector labels).
+- **Import and use `ActiveItemIndex<'arrayPropName'>`** from
+  `@wix/react-component-utils`. The type argument must match the array prop name
+  exactly, and `defaultProps` must set the index to `0`.
+- Render all bodies with `.map()`. Active body gets --active; inactive bodies get functional CSS visibility, aria-hidden, and inert.
+- Provide keyboard navigation and the matching ARIA pattern.
 
 ```ts
 import type { A11y, Direction } from '@wix/editor-react-types';
 import type { ActiveItemIndex } from '@wix/react-component-utils';
 
-export type Step = { id: string; name: string; body: string };
+export type Step = { name: string; body: string };
 
 export type StepsProps = {
-  id?: string;
+  id: string;
   className?: string;
   direction?: Direction;
   a11y?: A11y;
@@ -189,30 +167,26 @@ export type StepsProps = {
 };
 
 export const defaultProps = {
-  steps: [{ id: 'first', name: 'Step 1', body: 'First step' }],
+  steps: [{ name: 'Step 1', body: 'First step' }],
   activeItem: 0,
 } satisfies Omit<StepsProps, 'id' | 'className'>;
 ```
 
 ### Wix Data Types
 
-Use types such as `Image`, `Link`, `Video`, `Audio`, `VectorArt`, and `RichText`
-from `@wix/editor-react-types`. Inspect
-`node_modules/@wix/react-component-schema/dist/editor-react-types.d.ts` when you
-need the supported schema types.
+Use `Image`, `Link`, `Video`, `Audio`, `VectorArt`, `RichText` from
+`@wix/editor-react-types`. See `node_modules/@wix/react-component-schema/dist/editor-react-types.d.ts` for the full list.
 
 ## Defaults and Resources
 
 Export `defaultProps` from `<component-name>.props.ts`. Both `component.tsx` and
-the extension consume this object; do not duplicate fallback values in JSX.
+the extension consume this object; never duplicate fallbacks in JSX.
 
-Rendered media and runtime data must come from Wix-hosted services, local
-bundled assets, or values supplied through props. Do not silently introduce an
-external host or third-party runtime dependency.
+All rendered media must come from Wix-hosted services, local assets, or props.
+No external hosts or third-party runtime dependencies.
 
-For an `Image` default, populate only `uri`, `url`, and `alt`. Let the editor
-populate dimensions and focal-point metadata after the site owner chooses an
-image.
+For `Image` defaults, populate only `uri`, `url`, and `alt`; the editor fills
+dimensions and focal-point metadata.
 
 ```ts
 export const defaultProps = {
@@ -224,9 +198,8 @@ export const defaultProps = {
 } as const satisfies Omit<ExampleComponentProps, 'id' | 'className'>;
 ```
 
-Use distinct Wix-hosted defaults for multiple image slots. Keep fallback data in
-`defaultProps` so rendering reads the resolved prop instead of hardcoding a
-second fallback in JSX.
+Use distinct Wix-hosted defaults per image slot; keep all fallback data in
+`defaultProps` so rendering never hardcodes a second fallback in JSX.
 
 Use this pool in order, cycling only when more than five defaults are needed:
 
@@ -238,14 +211,12 @@ Use this pool in order, cycling only when more than five defaults are needed:
 | 4 | `11062b_45e67783d39c4963ab9e4fc418173233~mv2.jpg` | Abstract pink waves |
 | 5 | `11062b_4c11f014b0d04948b2e6f554076bc40a~mv2.jpg` | Coastal village aerial |
 
-For one image, use entry 1. For multiple slots, use a different entry for each
-slot so the defaults are visually distinct.
+For one image use entry 1; for multiple slots use a different entry each.
 
 ## Internal File Splitting
 
-Split a logical, independently understandable unit when doing so makes the main
-component easier to read or test. Keep internal files within the scaffolded
-component folder and use `.module.css`, matching the package convention.
+Split independently understandable units when it makes the main component easier
+to read or test. Keep internal files in the component folder using `.module.css`.
 
 ```text
 component-name/
@@ -264,12 +235,11 @@ Do not extract tiny fragments merely to satisfy a line-count threshold.
 
 ## Checklist
 
-- [ ] Identity, direction, and accessibility contracts are present.
-- [ ] Props contain authored data or stable behavior; derived values stay internal.
-- [ ] New or changed fixed-domain numeric props use `@min` and `@max`.
-- [ ] Every named inner part has `elementProps` wiring and merged classes.
-- [ ] Leaf components avoid exported `children`.
-- [ ] Array elements are named objects with stable identity.
+- [ ] Identity, direction, a11y, and SDK callbacks follow the public props shape.
+- [ ] Props hold authored data/behavior; derived values stay internal.
+- [ ] Fixed-domain numeric props use `@min`/`@max` JSDoc tags.
+- [ ] Named inner parts have `elementProps` wiring; leaf components avoid exported `children`.
 - [ ] One-body-visible arrays use the active-item contract and render all bodies.
-- [ ] Defaults have one source of truth in the props file.
+- [ ] Array elements are objects with semantic named fields. No separate `id` field added to item types; React keys use item fields (stable unique → slug → index), not a typed `id`.
+- [ ] Defaults live only in the props file (no JSX fallbacks).
 - [ ] Resources are Wix-hosted, prop-supplied, or locally bundled.

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

@@ -9,14 +9,30 @@ The Wix CLI scaffold generates `component.preview.tsx` and wires its URL into
 the extension's editor resource. It includes `withDefaults`,
 `withFallbackPlaceholder`, required-data fields, and the root class name.
 
-Keep the wrapper structure and synchronize its values:
+Keep the wrapper structure and synchronize its values. The renderer detects
+preview defaults only when `withDefaults` wraps the result of
+`withFallbackPlaceholder`. The calls may be nested directly:
+
+```tsx
+export default withDefaults(
+  withFallbackPlaceholder(ComponentPreview, {
+    requiredDataFields: ['animationUrl'],
+    rootClassName: 'component-root',
+  }),
+  defaultProps,
+);
+```
 
 - Wrap the preview adapter when one exists; otherwise wrap `Component`.
 - In `requiredDataFields`, normally use only the one prop crucial to meaningful
   rendering, such as `animationUrl`. Use more only when each is essential.
 - Set `rootClassName` to the elected root's exact global class, not `styles.root`.
 
-Never remove `withFallbackPlaceholder`.
+Never remove either wrapper, export `withFallbackPlaceholder(...)` directly, or
+invert their order. Preserve the equivalent of
+`withDefaults(withFallbackPlaceholder(...), defaultProps)` even when editing
+the preview component or fallback options. Assigning either wrapped component
+to a variable is valid as long as that outer-to-inner order stays intact.
 
 ## Detect Editor Design Mode
 
@@ -40,12 +56,15 @@ timers, or network activity while a site owner is designing.
 For autoplaying components, force autoplay off in editor design mode and keep
 the live/preview prop values unchanged.
 
-Export the adapter through `withFallbackPlaceholder` and synchronize its data
-field and root class.
+Pass the adapter to `withFallbackPlaceholder`, then pass that wrapped component
+to `withDefaults`. This may be written inline as shown above or through component
+variables. Synchronize the data field and root class either way.
 
 ## Checklist
 
 - [ ] Generated wrappers target the preview adapter when one exists.
+- [ ] The default export resolves to `withDefaults` outside
+      `withFallbackPlaceholder`, whether inline or through component variables.
 - [ ] Normally one crucial data field and the exact root global class are set.
 - [ ] The extension still loads the preview URL as its editor resource.
 - [ ] `useIsEditMode()` is called inside a component.