{"id":27996,"plugin_id":"plugin_asdk_app_6947eaa4edd081919561e4ee3a2e5dcc","kind":"skill","collection_source":"plugin_package","comparison_source":null,"observed_at":"2026-10-08T12:02:34.751Z","digest":"8bea33fbeec5d392491393148b72132ecdccbb2f582b60473d4a58504beb435e","against":24963,"payload":{"description":"Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on \"what component\", \"how do I make\", \"WDS\", \"show me props\", \"testkit\", \"driver\", or component names like Button, Card, Modal, Box, Text.","included_files":[{"relative_path":"references/file-structure.md","size_in_bytes":1090},{"relative_path":"scripts/wds.cjs","size_in_bytes":15439}],"name":"wix-design-system","skill_md_contents":"---\nname: wix-design-system\ndescription: Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on \"what component\", \"how do I make\", \"WDS\", \"show me props\", \"testkit\", \"driver\", or component names like Button, Card, Modal, Box, Text.\nmetadata:\n  verified: true\n---\n\n# WDS Documentation Navigator\n\n**Prerequisite:** `@wix/design-system` must be installed (`npm i @wix/design-system` or `yarn add @wix/design-system`).\n\n## Helper Script\n\nThis skill bundles `scripts/wds.cjs` — a Node.js helper that auto-discovers `@wix/design-system` in node_modules (handles monorepos and workspaces) and provides focused lookups. Run it from the user's project directory using the absolute path to the bundled script:\n\n```bash\n# WDS is the absolute path to this skill's scripts/wds.cjs\nWDS=\"<this-skill-dir>/scripts/wds.cjs\"\n\nnode $WDS search <keyword>                 # Find components by keyword\nnode $WDS component <Name>                 # Get props + example list (one component)\nnode $WDS components <Name1> <Name2>...    # Same as `component`, but for several at once\nnode $WDS example <Name> \"<ExampleName>\"   # Get a specific example\nnode $WDS testkit <Name> [method]          # Get testkit imports + driver API\nnode $WDS icons <query>                    # Search for icons\n```\n\n## Workflow\n\n### Step 1: Find the right component\n\n```bash\nnode $WDS search table\nnode $WDS search form input validation\nnode $WDS search modal dialog popup\n```\n\nMultiple keywords are OR-matched. Returns component names, descriptions, and usage guidance.\n\n### Step 2: Get props and available examples\n\n```bash\nnode $WDS component Button\n```\n\nReturns the full props list (types and descriptions) plus a list of all available examples. For large prop files (>200 lines), returns a summary with prop names and types.\n\nIf you already know which several components you'll need (e.g. after Step 1 returned a shortlist), prefer the batch form to avoid one round-trip per component:\n\n```bash\nnode $WDS components Button Card Table Input Text Thumbnail\n```\n\nOutput is each component's props block separated by `---`. Missing components are logged to stderr and skipped; the command only fails if every requested component is missing.\n\n### Step 3: Get a specific example\n\n```bash\nnode $WDS example Button \"Loading state\"\n```\n\nReturns the example description and JSX code. Matching is case-insensitive and supports substrings (e.g., \"loading\" matches \"Loading state\").\n\n### Step 4: Write tests with the component testkit\n\n```bash\nnode $WDS testkit Button             # Imports + full driver API for Button\nnode $WDS testkit Button click       # Just the click() method details\n```\n\nReturns import snippets for unidriver, vanilla, puppeteer, and playwright flavors plus the driver method API (name, args, return type, description). Method name matching is case-insensitive substring.\n\n### Step 5: Find icons\n\n```bash\nnode $WDS icons Add Edit Delete\n```\n\nIcons are from `@wix/wix-ui-icons-common`. Each icon has a `Small` variant (e.g., `Add` + `AddSmall`).\n\n## Fallback: Direct File Access\n\nIf the script is unavailable, docs are at `node_modules/@wix/design-system/dist/docs/`:\n\n- `components.md` — component catalog (~978 lines, grep only)\n- `components/{Name}Props.md` — props per component\n- `components/{Name}Examples.md` — examples per component (grep `^### ` for section list)\n- `components/{Name}Testkit.md` — testkit imports + driver API per component (grep `^### ` for method list)\n- `testkits.md` — testkit catalog (list of components with generated testkit docs)\n- `icons.md` — icon catalog (~818 lines, grep only)\n\nDon't read these files fully. Grep for keywords, then read specific sections with offset/limit. See [references/file-structure.md](references/file-structure.md) for the exact docs file layout and section shapes.\n\n---\n\n## Quick Component Mapping (Design to WDS)\n\n| Design Element      | WDS Component                     | Notes             |\n| ------------------- | --------------------------------- | ----------------- |\n| Rectangle/container | `<Box>`                           | Layout wrapper    |\n| Text button         | `<TextButton>`                    | Secondary actions |\n| Input with label    | `<FormField>` + `<Input>`         | Wrap inputs       |\n| Toggle              | `<ToggleSwitch>`                  | On/off settings   |\n| Modal               | `<Modal>` + `<CustomModalLayout>` | Use together      |\n| Grid                | `<Layout>` + `<Cell>`             | Responsive        |\n\n## Spacing (px to SP conversion)\n\nWhen designer specifies pixels, convert to the nearest SP token:\n\n| Token | Classic | Studio |\n| ----- | ------- | ------ |\n| `SP1` | 6px     | 4px    |\n| `SP2` | 12px    | 8px    |\n| `SP3` | 18px    | 12px   |\n| `SP4` | 24px    | 16px   |\n| `SP5` | 30px    | 20px   |\n| `SP6` | 36px    | 24px   |\n\n```tsx\n<Box gap=\"SP2\" padding=\"SP3\">\n```\n\nOnly use SP tokens for `gap`, `padding`, `margin` — not for width/height.\n\n## Imports\n\n```tsx\nimport { Button, Card, Image } from \"@wix/design-system\";\nimport { Add, Edit, Delete } from \"@wix/wix-ui-icons-common\";\n```\n\n## GUIDELINES\n\n1. Don't ever override WDS CSS tokens. Only if it's not possible otherwise, mention that very clearly to the prompter, that this is an anti-pattern and should be avoided at all costs.\n\n### Troubleshooting\n\n- **Components render unstyled** (plain HTML look, missing WDS spacing/typography): add `import \"@wix/design-system/styles.global.css\";` once to the root/main component (e.g. `page.tsx`, modal entry) — not child/tab/helper files.\n"},"changes":[{"path":"/included_files","type":"changed","before":[{"relative_path":".DS_Store","size_in_bytes":6148},{"relative_path":"agents/openai.yaml","size_in_bytes":246},{"relative_path":"references/file-structure.md","size_in_bytes":1090},{"relative_path":"scripts/wds.cjs","size_in_bytes":15439}],"after":[{"relative_path":"references/file-structure.md","size_in_bytes":1090},{"relative_path":"scripts/wds.cjs","size_in_bytes":15439}]},{"path":"/skill_md_contents","type":"changed","before":"---\nname: wix-design-system\ndescription: Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on \"what component\", \"how do I make\", \"WDS\", \"show me props\", \"testkit\", \"driver\", or component names like Button, Card, Modal, Box, Text.\n---\n\n# WDS Documentation Navigator\n\n**Prerequisite:** `@wix/design-system` must be installed (`npm i @wix/design-system` or `yarn add @wix/design-system`).\n\n## Helper Script\n\nThis skill bundles `scripts/wds.cjs` — a Node.js helper that auto-discovers `@wix/design-system` in node_modules (handles monorepos and workspaces) and provides focused lookups. Run it from the user's project directory using the absolute path to the bundled script:\n\n```bash\n# WDS is the absolute path to this skill's scripts/wds.cjs\nWDS=\"<this-skill-dir>/scripts/wds.cjs\"\n\nnode $WDS search <keyword>                 # Find components by keyword\nnode $WDS component <Name>                 # Get props + example list (one component)\nnode $WDS components <Name1> <Name2>...    # Same as `component`, but for several at once\nnode $WDS example <Name> \"<ExampleName>\"   # Get a specific example\nnode $WDS testkit <Name> [method]          # Get testkit imports + driver API\nnode $WDS icons <query>                    # Search for icons\n```\n\n## Workflow\n\n### Step 1: Find the right component\n\n```bash\nnode $WDS search table\nnode $WDS search form input validation\nnode $WDS search modal dialog popup\n```\n\nMultiple keywords are OR-matched. Returns component names, descriptions, and usage guidance.\n\n### Step 2: Get props and available examples\n\n```bash\nnode $WDS component Button\n```\n\nReturns the full props list (types and descriptions) plus a list of all available examples. For large prop files (>200 lines), returns a summary with prop names and types.\n\nIf you already know which several components you'll need (e.g. after Step 1 returned a shortlist), prefer the batch form to avoid one round-trip per component:\n\n```bash\nnode $WDS components Button Card Table Input Text Thumbnail\n```\n\nOutput is each component's props block separated by `---`. Missing components are logged to stderr and skipped; the command only fails if every requested component is missing.\n\n### Step 3: Get a specific example\n\n```bash\nnode $WDS example Button \"Loading state\"\n```\n\nReturns the example description and JSX code. Matching is case-insensitive and supports substrings (e.g., \"loading\" matches \"Loading state\").\n\n### Step 4: Write tests with the component testkit\n\n```bash\nnode $WDS testkit Button             # Imports + full driver API for Button\nnode $WDS testkit Button click       # Just the click() method details\n```\n\nReturns import snippets for unidriver, vanilla, puppeteer, and playwright flavors plus the driver method API (name, args, return type, description). Method name matching is case-insensitive substring.\n\n### Step 5: Find icons\n\n```bash\nnode $WDS icons Add Edit Delete\n```\n\nIcons are from `@wix/wix-ui-icons-common`. Each icon has a `Small` variant (e.g., `Add` + `AddSmall`).\n\n## Fallback: Direct File Access\n\nIf the script is unavailable, docs are at `node_modules/@wix/design-system/dist/docs/`:\n\n- `components.md` — component catalog (~978 lines, grep only)\n- `components/{Name}Props.md` — props per component\n- `components/{Name}Examples.md` — examples per component (grep `^### ` for section list)\n- `components/{Name}Testkit.md` — testkit imports + driver API per component (grep `^### ` for method list)\n- `testkits.md` — testkit catalog (list of components with generated testkit docs)\n- `icons.md` — icon catalog (~818 lines, grep only)\n\nDon't read these files fully. Grep for keywords, then read specific sections with offset/limit. See [references/file-structure.md](references/file-structure.md) for the exact docs file layout and section shapes.\n\n---\n\n## Quick Component Mapping (Design to WDS)\n\n| Design Element | WDS Component | Notes |\n| --- | --- | --- |\n| Rectangle/container | `<Box>` | Layout wrapper |\n| Text button | `<TextButton>` | Secondary actions |\n| Input with label | `<FormField>` + `<Input>` | Wrap inputs |\n| Toggle | `<ToggleSwitch>` | On/off settings |\n| Modal | `<Modal>` + `<CustomModalLayout>` | Use together |\n| Grid | `<Layout>` + `<Cell>` | Responsive |\n\n## Spacing (px to SP conversion)\n\nWhen designer specifies pixels, convert to the nearest SP token:\n\n| Token | Classic | Studio |\n| --- | --- | --- |\n| `SP1` | 6px | 4px |\n| `SP2` | 12px | 8px |\n| `SP3` | 18px | 12px |\n| `SP4` | 24px | 16px |\n| `SP5` | 30px | 20px |\n| `SP6` | 36px | 24px |\n\n```tsx\n<Box gap=\"SP2\" padding=\"SP3\">\n```\n\nOnly use SP tokens for `gap`, `padding`, `margin` — not for width/height.\n\n## Imports\n\n```tsx\nimport { Button, Card, Image } from \"@wix/design-system\";\nimport { Add, Edit, Delete } from \"@wix/wix-ui-icons-common\";\n```\n","after":"---\nname: wix-design-system\ndescription: Wix Design System component reference. Use when building UI with @wix/design-system, choosing components, checking props and examples, or writing tests with component testkits. Triggers on \"what component\", \"how do I make\", \"WDS\", \"show me props\", \"testkit\", \"driver\", or component names like Button, Card, Modal, Box, Text.\nmetadata:\n  verified: true\n---\n\n# WDS Documentation Navigator\n\n**Prerequisite:** `@wix/design-system` must be installed (`npm i @wix/design-system` or `yarn add @wix/design-system`).\n\n## Helper Script\n\nThis skill bundles `scripts/wds.cjs` — a Node.js helper that auto-discovers `@wix/design-system` in node_modules (handles monorepos and workspaces) and provides focused lookups. Run it from the user's project directory using the absolute path to the bundled script:\n\n```bash\n# WDS is the absolute path to this skill's scripts/wds.cjs\nWDS=\"<this-skill-dir>/scripts/wds.cjs\"\n\nnode $WDS search <keyword>                 # Find components by keyword\nnode $WDS component <Name>                 # Get props + example list (one component)\nnode $WDS components <Name1> <Name2>...    # Same as `component`, but for several at once\nnode $WDS example <Name> \"<ExampleName>\"   # Get a specific example\nnode $WDS testkit <Name> [method]          # Get testkit imports + driver API\nnode $WDS icons <query>                    # Search for icons\n```\n\n## Workflow\n\n### Step 1: Find the right component\n\n```bash\nnode $WDS search table\nnode $WDS search form input validation\nnode $WDS search modal dialog popup\n```\n\nMultiple keywords are OR-matched. Returns component names, descriptions, and usage guidance.\n\n### Step 2: Get props and available examples\n\n```bash\nnode $WDS component Button\n```\n\nReturns the full props list (types and descriptions) plus a list of all available examples. For large prop files (>200 lines), returns a summary with prop names and types.\n\nIf you already know which several components you'll need (e.g. after Step 1 returned a shortlist), prefer the batch form to avoid one round-trip per component:\n\n```bash\nnode $WDS components Button Card Table Input Text Thumbnail\n```\n\nOutput is each component's props block separated by `---`. Missing components are logged to stderr and skipped; the command only fails if every requested component is missing.\n\n### Step 3: Get a specific example\n\n```bash\nnode $WDS example Button \"Loading state\"\n```\n\nReturns the example description and JSX code. Matching is case-insensitive and supports substrings (e.g., \"loading\" matches \"Loading state\").\n\n### Step 4: Write tests with the component testkit\n\n```bash\nnode $WDS testkit Button             # Imports + full driver API for Button\nnode $WDS testkit Button click       # Just the click() method details\n```\n\nReturns import snippets for unidriver, vanilla, puppeteer, and playwright flavors plus the driver method API (name, args, return type, description). Method name matching is case-insensitive substring.\n\n### Step 5: Find icons\n\n```bash\nnode $WDS icons Add Edit Delete\n```\n\nIcons are from `@wix/wix-ui-icons-common`. Each icon has a `Small` variant (e.g., `Add` + `AddSmall`).\n\n## Fallback: Direct File Access\n\nIf the script is unavailable, docs are at `node_modules/@wix/design-system/dist/docs/`:\n\n- `components.md` — component catalog (~978 lines, grep only)\n- `components/{Name}Props.md` — props per component\n- `components/{Name}Examples.md` — examples per component (grep `^### ` for section list)\n- `components/{Name}Testkit.md` — testkit imports + driver API per component (grep `^### ` for method list)\n- `testkits.md` — testkit catalog (list of components with generated testkit docs)\n- `icons.md` — icon catalog (~818 lines, grep only)\n\nDon't read these files fully. Grep for keywords, then read specific sections with offset/limit. See [references/file-structure.md](references/file-structure.md) for the exact docs file layout and section shapes.\n\n---\n\n## Quick Component Mapping (Design to WDS)\n\n| Design Element      | WDS Component                     | Notes             |\n| ------------------- | --------------------------------- | ----------------- |\n| Rectangle/container | `<Box>`                           | Layout wrapper    |\n| Text button         | `<TextButton>`                    | Secondary actions |\n| Input with label    | `<FormField>` + `<Input>`         | Wrap inputs       |\n| Toggle              | `<ToggleSwitch>`                  | On/off settings   |\n| Modal               | `<Modal>` + `<CustomModalLayout>` | Use together      |\n| Grid                | `<Layout>` + `<Cell>`             | Responsive        |\n\n## Spacing (px to SP conversion)\n\nWhen designer specifies pixels, convert to the nearest SP token:\n\n| Token | Classic | Studio |\n| ----- | ------- | ------ |\n| `SP1` | 6px     | 4px    |\n| `SP2` | 12px    | 8px    |\n| `SP3` | 18px    | 12px   |\n| `SP4` | 24px    | 16px   |\n| `SP5` | 30px    | 20px   |\n| `SP6` | 36px    | 24px   |\n\n```tsx\n<Box gap=\"SP2\" padding=\"SP3\">\n```\n\nOnly use SP tokens for `gap`, `padding`, `margin` — not for width/height.\n\n## Imports\n\n```tsx\nimport { Button, Card, Image } from \"@wix/design-system\";\nimport { Add, Edit, Delete } from \"@wix/wix-ui-icons-common\";\n```\n\n## GUIDELINES\n\n1. Don't ever override WDS CSS tokens. Only if it's not possible otherwise, mention that very clearly to the prompter, that this is an anti-pattern and should be avoided at all costs.\n\n### Troubleshooting\n\n- **Components render unstyled** (plain HTML look, missing WDS spacing/typography): add `import \"@wix/design-system/styles.global.css\";` once to the root/main component (e.g. `page.tsx`, modal entry) — not child/tab/helper files.\n"}],"summary":"Fields changed: 2. /included_files, /skill_md_contents.","summary_kind":"deterministic","summary_metadata":{}}