@wix/agent-skills 1.16.1 → 1.16.3

package/skills/wix-app/references/auto-patterns-dashboard/custom-columns-override.md

@@ -1,82 +0,0 @@
-# Custom Columns Override Rules
-
-**REQUIRED**: After creating column files, you MUST update `page.tsx` to register them.
-
-## Type Definitions
-```typescript
-interface IColumnValue<T> {
-  value: T; // The individual column value
-  row: Record<string, any>; // The entire row object containing all field values
-}
-
-// Override Function Signature
-type ColumnOverride<T> = (props: IColumnValue<T>) => React.ReactNode;
-```
-
-## Configuration Schema
-```json
-{
-  "type": "collectionPage",
-  "collectionPage": {
-    "components": [
-      {
-        "layout": [
-          {
-            "type": "Table",
-            "table": {
-              "columns": [
-                {
-                  "id": "myCustomColumn" // Matches key in override object
-                }
-              ]
-            }
-          }
-        ]
-      }
-    ]
-  }
-}
-```
-
-## Validation Logic
-- **IF** overriding a column **THEN** function name MUST match the `column.id` in AppConfig.
-- **IF** needing React hooks (useState, useEffect) **THEN** MUST wrap implementation in a separate React component and return it.
-- **IF** accessing row data **THEN** MUST use exact field IDs from schema as keys on `row` object.
-- **NEVER** use React hooks directly inside the column override function (it is a render function, not a component).
-
-## Implementation Rules
-- **MUST** be placed in `components/columns/` folder.
-- **MUST** export a `useColumns` hook from `components/columns/index.tsx`.
-- **MUST** import type `IColumnValue` from `@wix/auto-patterns` for type safety.
-- **MUST** return a ReactNode (JSX) or null.
-
-## Canonical Example
-```tsx
-// components/columns/status.tsx
-import type { IColumnValue } from '@wix/auto-patterns';
-import { Badge } from '@wix/design-system';
-
-export function status({ value, row }: IColumnValue<string>) {
-  // Pure rendering logic - NO HOOKS here
-  const skin = value === 'Active' ? 'success' : 'danger';
-  return <Badge skin={skin}>{value}</Badge>;
-}
-
-// components/columns/index.tsx
-import { status } from './status';
-export const useColumns = () => ({ status });
-```
-
-## page.tsx Registration (REQUIRED)
-
-**CRITICAL: PRESERVE EXISTING OVERRIDES** - Do NOT remove existing overrides. ADD this new one alongside them.
-
-```tsx
-// 1. Add import (keep all existing imports)
-import { useColumns } from './components/columns';
-
-// 2. Add hook call (keep all existing hook calls)
-const columns = useColumns();
-
-// 3. Add columns to PatternsWizardOverridesProvider value (keep ALL existing overrides)
-```

package/skills/wix-app/references/auto-patterns-dashboard/custom-components-override.md

@@ -1,89 +0,0 @@
-# Custom Components Override Rules
-
-**REQUIRED**: After creating component files, you MUST update `page.tsx` to register them.
-
-## Type Definitions
-```typescript
-interface CustomComponentProps {
-  form: UseFormReturn; // react-hook-form instance
-  entity: Record<string, any>; // Initial entity state (static)
-}
-
-// Override Component Signature
-type CustomComponent = React.FC<CustomComponentProps>;
-```
-
-## Configuration Schema
-```json
-{
-  "layout": [
-    {
-      "type": "Form",
-      "form": {
-        "groups": [
-          {
-            "fields": [
-              {
-                "id": "myCustomField",
-                "type": "custom",
-                "componentId": "myCustomComponent" // Matches override key
-              }
-            ]
-          }
-        ]
-      }
-    }
-  ]
-}
-```
-
-## Validation Logic
-- **IF** overriding an input field **THEN** MUST use `useController` from `@wix/patterns/form` to bind to form state.
-- **IF** needing reactivity **THEN** MUST use `form.watch()`, NEVER rely on `entity` prop for updates (it is initial state only).
-- **IF** implementing a standalone widget (not input) **THEN** can use `entity` for display-only static data.
-- **NEVER** import `useController` from `react-hook-form` directly; use `@wix/patterns/form`.
-
-## Implementation Rules
-- **MUST** be placed in `components/customComponents/` folder.
-- **MUST** export a `useComponents` hook from `components/customComponents/index.tsx`.
-- **MUST** handle form state (invalid, error message, onChange) properly via controller.
-
-## Canonical Example
-```tsx
-// components/customComponents/CustomInput.tsx
-import { useController } from '@wix/patterns/form';
-import type { CustomComponentProps } from '@wix/auto-patterns';
-import { Input, FormField } from '@wix/design-system';
-
-export const CustomInput: React.FC<CustomComponentProps> = ({ form, entity }) => {
-  const { field, fieldState } = useController({
-    name: 'title', // Matches schema field ID
-    control: form.control,
-    defaultValue: entity?.title
-  });
-
-  return (
-    <FormField label="Title" status={fieldState.error ? 'error' : undefined}>
-      <Input {...field} />
-    </FormField>
-  );
-};
-
-// components/customComponents/index.tsx
-import { CustomInput } from './CustomInput';
-export const useComponents = () => ({ CustomInput });
-```
-
-## page.tsx Registration (REQUIRED)
-
-**CRITICAL: PRESERVE EXISTING OVERRIDES** - Do NOT remove existing overrides. ADD this new one alongside them.
-
-```tsx
-// 1. Add import (keep all existing imports)
-import { useComponents } from './components/customComponents';
-
-// 2. Add hook call (keep all existing hook calls)
-const components = useComponents();
-
-// 3. Add components to PatternsWizardOverridesProvider value (keep ALL existing overrides)
-```

package/skills/wix-app/references/auto-patterns-dashboard/custom-header-override.md

@@ -1,124 +0,0 @@
-# Custom Entity Header Override Rules
-
-**REQUIRED**: After creating header override files, you MUST update `page.tsx` to register them.
-
-## Type Definitions
-```typescript
-// Subtitle Override
-type SubtitleResolver = (entity: Record<string, any>) => { text: string };
-
-// Badge Override
-interface BadgeObject {
-  text: string;                     // Required: Text to display
-  skin?: BadgeSkin;                 // Optional: Visual styling
-  prefixIcon?: React.ReactElement;  // Optional: Icon before text (from @wix/wix-ui-icons-common)
-  suffixIcon?: React.ReactElement;  // Optional: Icon after text (from @wix/wix-ui-icons-common)
-}
-
-type BadgeSkin = 'success' | 'warning' | 'destructive' | 'neutral' | 'premium';
-
-type BadgesResolver = (entity: Record<string, any>) => BadgeObject[];
-```
-
-## Configuration Schema
-```json
-{
-  "entityPage": {
-    "title": {
-      "text": "Entity Details",
-      "badges": {
-        "id": "entityPageHeaderBadges"  // Must match override key
-      }
-    },
-    "subtitle": {
-      "text": "Default subtitle text",
-      "id": "entityPageHeaderSubtitle"  // Must match override key
-    }
-  }
-}
-```
-
-## Validation Logic
-- **IF** overriding subtitle **THEN** function MUST return `{ text: string }` object.
-- **IF** overriding badges **THEN** function MUST return array of `BadgeObject` (NOT JSX components).
-- **IF** `badges.id` or `subtitle.id` defined in config **THEN** matching override MUST exist.
-- **IF** logic depends on entity data **THEN** check for field existence (entity might be partial).
-- **IF** `id` in config does not match override key **THEN** override will not render.
-
-## Implementation Rules
-- **MUST** be placed in `components/entityPageHeaderSubtitle/` or `components/entityPageHeaderBadges/`.
-- **MUST** export `useEntityPageHeaderSubtitle` / `useEntityPageHeaderBadges` hooks from respective index files.
-- **MUST** be pure functions (no hooks inside the resolver functions).
-- **MUST** ensure `id` in config matches the key in override object exactly.
-- **NEVER** return JSX from badge/subtitle functions (return data objects only).
-
-## Canonical Example
-
-### 1. Subtitle Override
-```typescript
-// components/entityPageHeaderSubtitle/entityPageHeaderSubtitle.ts
-export const entityPageHeaderSubtitle = (entity: Record<string, any>) => {
-  return { text: `Created by ${entity.owner || 'Unknown'} on ${entity.date || 'N/A'}` };
-};
-
-// components/entityPageHeaderSubtitle/index.ts
-import { entityPageHeaderSubtitle } from './entityPageHeaderSubtitle';
-export const useEntityPageHeaderSubtitle = () => ({ entityPageHeaderSubtitle });
-```
-
-### 2. Badges Override
-```typescript
-// components/entityPageHeaderBadges/entityPageHeaderBadges.ts
-export const entityPageHeaderBadges = (entity: Record<string, any>) => {
-  const badges = [];
-
-  // Add status badge
-  if (entity.isActive) {
-    badges.push({ text: 'Active', skin: 'success' });
-  } else {
-    badges.push({ text: 'Inactive', skin: 'neutral' });
-  }
-
-  // Add premium badge if applicable
-  if (entity.isPremium) {
-    badges.push({ text: 'Premium', skin: 'premium' });
-  }
-
-  // Add warning badge if needed
-  if (entity.needsAttention) {
-    badges.push({ text: 'Needs Attention', skin: 'warning' });
-  }
-
-  return badges;
-};
-
-// components/entityPageHeaderBadges/index.ts
-import { entityPageHeaderBadges } from './entityPageHeaderBadges';
-export const useEntityPageHeaderBadges = () => ({ entityPageHeaderBadges });
-```
-
-## page.tsx Registration (REQUIRED)
-
-**CRITICAL: PRESERVE EXISTING OVERRIDES** - Do NOT remove existing overrides. ADD this new one alongside them.
-
-### For Subtitle Override:
-```tsx
-// 1. Add import (keep all existing imports)
-import { useEntityPageHeaderSubtitle } from './components/entityPageHeaderSubtitle';
-
-// 2. Add hook call (keep all existing hook calls)
-const entityPageHeaderSubtitle = useEntityPageHeaderSubtitle();
-
-// 3. Add entityPageHeaderSubtitle to AutoPatternsOverridesProvider value (keep ALL existing overrides)
-```
-
-### For Badges Override:
-```tsx
-// 1. Add import (keep all existing imports)
-import { useEntityPageHeaderBadges } from './components/entityPageHeaderBadges';
-
-// 2. Add hook call (keep all existing hook calls)
-const entityPageHeaderBadges = useEntityPageHeaderBadges();
-
-// 3. Add entityPageHeaderBadges to AutoPatternsOverridesProvider value (keep ALL existing overrides)
-```

package/skills/wix-app/references/auto-patterns-dashboard/custom-sections-override.md

@@ -1,91 +0,0 @@
-# Custom Sections Override Rules
-
-**REQUIRED**: After creating section files, you MUST update `page.tsx` to register them.
-
-## Type Definitions
-```typescript
-interface Section {
-  id: string; // Unique grouping ID
-  title: string; // Header text
-  primaryAction?: {
-    id: string;
-    label: string;
-    prefixIcon?: React.ReactElement;
-    onClick: () => void;
-  };
-  badge?: {
-    visible: boolean;
-    skin?: 'light' | 'danger' | 'neutralLight';
-  };
-}
-
-// Section Renderer Signature
-type SectionRenderer = (item: any) => Section;
-```
-
-## Configuration Schema
-```json
-{
-  "type": "collectionPage",
-  "collectionPage": {
-    "components": [
-      {
-        "layout": [
-          {
-            "type": "Table",
-            "table": {
-              "sections": {
-                "id": "groupByType" // Matches override key
-              }
-            }
-          }
-        ]
-      }
-    ]
-  }
-}
-```
-
-## Validation Logic
-- **IF** `sections.id` is defined **THEN** matching override function MUST exist.
-- **IF** multiple items return same `id` from renderer **THEN** they will be visually grouped.
-- **NEVER** perform heavy computations in renderer; it runs for every item.
-
-## Implementation Rules
-- **MUST** be placed in `components/sections/` folder.
-- **MUST** export a `useSections` hook from `components/sections/index.tsx`.
-- **MUST** return a valid `Section` object.
-- **MUST** handle missing fields gracefully (default values).
-
-## Canonical Example
-```tsx
-// components/sections/groupByType.ts
-import { Section } from '@wix/patterns';
-
-export function groupByType(item: any): Section {
-  const type = item.type || 'other';
-  return {
-    id: type,
-    title: type.toUpperCase(),
-    badge: { visible: true, skin: 'neutralLight' }
-  };
-}
-
-// components/sections/index.tsx
-import { groupByType } from './groupByType';
-export const useSections = () => ({ groupByType });
-```
-
-## page.tsx Registration (REQUIRED)
-
-**CRITICAL: PRESERVE EXISTING OVERRIDES** - Do NOT remove existing overrides. ADD this new one alongside them.
-
-```tsx
-// 1. Add import (keep all existing imports)
-import { useSections } from './components/sections';
-
-// 2. Add hook call (keep all existing hook calls)
-const sections = useSections();
-
-// 3. Add sections to PatternsWizardOverridesProvider value (keep ALL existing overrides)
-```

package/skills/wix-app/references/auto-patterns-dashboard/custom-slots-override.md

@@ -1,71 +0,0 @@
-# Custom Slots Override Rules
-
-**REQUIRED**: After creating slot files, you MUST update `page.tsx` to register them.
-
-## Type Definitions
-```typescript
-// Slot Component Signature
-type SlotComponent = React.FC; // No props passed
-```
-
-## Configuration Schema
-```json
-{
-  "type": "collectionPage",
-  "collectionPage": {
-    "components": [
-      {
-        "type": "custom",
-        "id": "topBanner" // Matches override key
-      },
-      {
-        "type": "collection",
-        "collection": { "collectionId": "items" }
-      }
-    ]
-  }
-}
-```
-
-## Validation Logic
-- **IF** `type` is `"custom"` in components array **THEN** `id` MUST match a key in the `slots` override object.
-- **IF** implementing a slot **THEN** component MUST NOT expect any props.
-- **NEVER** assume slot position; it renders exactly where placed in the `components` array.
-
-## Implementation Rules
-- **MUST** be placed in `components/slots/` folder.
-- **MUST** export a `useSlots` hook from `components/slots/index.tsx`.
-- **MUST** be a standard React Functional Component.
-- **MUST** match the `id` in configuration exactly.
-
-## Canonical Example
-```tsx
-// components/slots/TopBanner.tsx
-import { Card, Text } from '@wix/design-system';
-
-export const TopBanner = () => (
-  <Card>
-    <Card.Content>
-      <Text>Welcome to the dashboard</Text>
-    </Card.Content>
-  </Card>
-);
-
-// components/slots/index.tsx
-import { TopBanner } from './TopBanner';
-export const useSlots = () => ({ topBanner: TopBanner });
-```
-
-## page.tsx Registration (REQUIRED)
-
-**CRITICAL: PRESERVE EXISTING OVERRIDES** - Do NOT remove existing overrides. ADD this new one alongside them.
-
-```tsx
-// 1. Add import (keep all existing imports)
-import { useSlots } from './components/slots';
-
-// 2. Add hook call (keep all existing hook calls)
-const slots = useSlots();
-
-// 3. Add slots to PatternsWizardOverridesProvider value (keep ALL existing overrides)
-```

package/skills/wix-app/references/auto-patterns-dashboard/entity-page-actions.md

@@ -1,70 +0,0 @@
-# Entity Page Action Rules (Edit Mode)
-
-## Type Definitions
-```typescript
-interface EntityPageConfig {
-  entityPage: {
-    actions: {
-      moreActions: (CustomActionItem | DividerItem)[];
-    };
-  };
-}
-
-interface CustomActionItem {
-  id: string; // Matches resolver name
-  type: 'custom';
-  label: string;
-  biName: string; // MANDATORY
-}
-
-interface DividerItem {
-  type: 'divider';
-}
-
-// Resolver Type
-type CustomEntityPageActionResolver = (params: {
-  actionParams: {
-    entity: any; // Current entity data
-    form: UseFormReturn; // react-hook-form instance
-  };
-  sdk: AutoPatternsSDK;
-}) => ResolvedAction;
-```
-
-## Validation Logic
-- **IF** mode is `'edit'` **THEN** ONLY `moreActions` is supported (`primaryActions` forbidden).
-- **IF** `type: 'custom'` **THEN** `id` MUST match exported resolver name.
-- **IF** `type: 'divider'` **THEN** NO other properties allowed.
-- **ONLY** `'custom'` and `'divider'` are valid action types in moreActions. There is NO built-in `'duplicate'`, `'copy'`, `'clone'`, `'archive'`, `'export'`, or similar action type.
-- **IF** you need any operation beyond navigation (duplicate, archive, export, share, etc.) **THEN** use `type: 'custom'` with a resolver implementation.
-
-## Implementation Rules
-- **MUST** place all custom actions in `moreActions` array for Edit Mode.
-- **MUST** include `biName` for every action.
-- **MUST** return a valid `ResolvedAction` object (see resolved_action.md).
-- **MUST** use `errorHandler` for Wix API calls.
-- **NEVER** use `primaryActions` or `secondaryActions` in Edit Mode.
-
-## Canonical Example
-```typescript
-// Config
-{
-  moreActions: [
-    { id: 'sendEmail', type: 'custom', label: 'Send Email', biName: 'send-email-action' },
-    { type: 'divider' },
-    { id: 'archive', type: 'custom', label: 'Archive', biName: 'archive-action' }
-  ]
-}
-
-// components/actions/sendEmail.tsx (use .tsx because it contains JSX icon)
-export const sendEmail: CustomEntityPageActionResolver = ({ actionParams, sdk }) => {
-  return {
-    label: 'Send Email',
-    icon: <EmailIcon />,
-    biName: 'send-email-action',
-    onClick: () => {
-      // Logic here
-    }
-  };
-};
-```

package/skills/wix-app/references/auto-patterns-dashboard/entity-page-view-actions.md

@@ -1,73 +0,0 @@
-# Entity Page Action Rules (View Mode)
-
-## Type Definitions
-```typescript
-interface EntityPageViewActions {
-  primaryActions?: ActionGroup;
-  secondaryActions?: ActionGroup;
-  moreActions?: (CustomActionItem | DividerItem)[];
-}
-
-type ActionGroup = | { type: 'action'; action: { item: ActionItem } } | { type: 'menu'; menu: { label: string; items: (ActionItem | DividerItem)[] } };
-
-interface DividerItem {
-  type: 'divider';
-}
-
-interface ActionItem {
-  id: string; // Must match resolver if custom
-  label: string;
-  type: 'create' | 'custom';
-  biName: string; // MANDATORY
-  create?: {
-    mode: 'page';
-    page: { id: string };
-  };
-}
-
-type CustomEntityPageActionResolver = (params: {
-  actionParams: { entity: any };
-  sdk: AutoPatternsSDK;
-}) => ResolvedAction;
-```
-
-## Validation Logic
-- **IF** mode is `'view'` **THEN** supports `primaryActions`, `secondaryActions`, AND `moreActions`.
-- **IF** action type is `'create'` **THEN** `create` config is **REQUIRED**.
-- **IF** action type is `'custom'` **THEN** resolver implementation is **REQUIRED**.
-
-## Implementation Rules
-- **MUST** use `primaryActions` for main workflow (e.g. Create).
-- **MUST** use `secondaryActions` for supporting workflows.
-- **MUST** use `moreActions` for less common/admin tasks.
-- **MUST** check error handling rules: `errorHandler` for Wix APIs, none for external/SDK.
-- **NEVER** manually add "Edit" action; it's automatic if an Edit Mode page exists.
-
-## Canonical Example
-```typescript
-{
-  primaryActions: {
-    type: 'action',
-    action: {
-      item: {
-        id: 'createEntity',
-        label: 'Create New',
-        type: 'create',
-        biName: 'create-entity-action',
-        create: {
-          mode: 'page',
-          page: { id: 'entity-edit-page' }
-        }
-      }
-    }
-  },
-  moreActions: [
-    {
-      id: 'duplicateEntity',
-      type: 'custom',
-      label: 'Duplicate',
-      biName: 'duplicate-entity-action'
-    }
-  ]
-}
-```

package/skills/wix-app/references/auto-patterns-dashboard/entity-page.md

@@ -1,98 +0,0 @@
-# Entity Page Rules
-
-## Type Definitions
-```typescript
-interface EntityPageConfig {
-  type: 'entityPage';
-  entityPage: {
-    mode?: 'edit' | 'view'; // Default 'edit'
-    route: { path: string; params: { id: string } };
-    parentPageId: string; // REQUIRED
-    collectionId: string;
-    entityTypeSource: 'cms' | 'custom';
-    title?: {
-      text: string;
-      badges?: { id: string }; // Dynamic badges override ID
-    };
-    subtitle?: {
-      text: string;
-      id?: string; // Dynamic subtitle override ID
-    };
-    layout?: {
-      main: CardLayout[];
-      sidebar?: CardLayout[];
-    };
-    actions?: EntityPageActions; // See Action Rules
-  };
-}
-
-interface CardLayout {
-  type: 'card';
-  card: {
-    title?: { text: string };
-    children: LayoutContent[];
-  };
-}
-
-type LayoutContent = | { type: 'field'; field: { fieldId: string; span?: number } } | { type: 'container'; container: { children: LayoutContent[]; span?: number } } | { type: 'component'; component: { componentId: string; span?: number } };
-
-// Override Types
-type EntityPageHeaderSubtitle = (entity: any) => { text: string };
-type EntityPageHeaderBadges = (entity: any) => {
-  text: string;
-  skin?: 'success' | 'warning' | 'destructive' | 'neutral' | 'premium';
-  prefixIcon?: ReactElement;
-  suffixIcon?: ReactElement;
-}[];
-```
-
-## Validation Logic
-- **IF** `mode` is undefined **THEN** defaults to `'edit'`.
-- **IF** `mode: 'edit'` **THEN** only `moreActions` supported.
-- **IF** `mode: 'view'` **THEN** `primaryActions`, `secondaryActions`, `moreActions` supported.
-- **IF** `badges.id` defined **THEN** implementation MUST return array of badge objects.
-- **IF** `subtitle.id` defined **THEN** implementation MUST return `{ text: string }`.
-
-## Implementation Rules
-- **MUST** use route format `/[segment]/:entityId` (NEVER `/:entityId`).
-- **MUST** map dynamic parameter in `route.params` (e.g. `{ id: 'entityId' }`).
-- **MUST** register overrides for `badges` and `subtitle` if IDs are used.
-- **MUST** use 12-column grid system for `span` (wraps if > 12).
-- **SHOULD** put primary info in `main` layout, metadata in `sidebar`.
-- **NEVER** return JSX from badge/subtitle functions (return data objects).
-
-## Canonical Example
-```typescript
-// Config
-{
-  type: 'entityPage',
-  entityPage: {
-    mode: 'view',
-    route: { path: '/pet/:entityId', params: { id: 'entityId' } },
-    parentPageId: 'pets-list',
-    collectionId: 'pets',
-    entityTypeSource: 'cms',
-    title: {
-      text: 'Pet Details',
-      badges: { id: 'petBadges' }
-    },
-    layout: {
-      main: [{
-        type: 'card',
-        card: {
-          title: { text: 'Info' },
-          children: [
-            { type: 'field', field: { fieldId: 'name', span: 6 } },
-            { type: 'field', field: { fieldId: 'age', span: 6 } }
-          ]
-        }
-      }]
-    }
-  }
-}
-
-// Override Implementation
-export const petBadges = (entity) => ([
-  { text: entity.status, skin: entity.status === 'Active' ? 'success' : 'neutral' }
-]);
-```