[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-wix-wix-design-system":3,"mdc--wnvtse-key":37,"related-org-wix-wix-design-system":1621,"related-repo-wix-wix-design-system":1778},{"slug":4,"name":4,"fn":5,"description":6,"org":7,"tags":11,"stars":26,"repoUrl":27,"updatedAt":28,"license":29,"forks":30,"topics":31,"repo":32,"sourceUrl":35,"mdContent":36},"wix-design-system","build UIs with Wix Design System","Wix Design System component reference. Use when building UI with @wix\u002Fdesign-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.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},"wix","Wix","https:\u002F\u002Fpexgzepcugksgbtrxkhf.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Forg-logos\u002Fwix.jpg",[12,14,17,20,23],{"name":9,"slug":8,"type":13},"tag",{"name":15,"slug":16,"type":13},"Design System","design-system",{"name":18,"slug":19,"type":13},"UI Components","ui-components",{"name":21,"slug":22,"type":13},"Frontend","frontend",{"name":24,"slug":25,"type":13},"Design","design",23,"https:\u002F\u002Fgithub.com\u002Fwix\u002Fskills","2026-04-29T05:33:44.561687",null,28,[],{"repoUrl":27,"stars":26,"forks":30,"topics":33,"description":34},[],"Wix Skills","https:\u002F\u002Fgithub.com\u002Fwix\u002Fskills\u002Ftree\u002FHEAD\u002Fskills\u002Fwix-design-system","---\nname: wix-design-system\ndescription: Wix Design System component reference. Use when building UI with @wix\u002Fdesign-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\u002Fdesign-system` must be installed (`npm i @wix\u002Fdesign-system` or `yarn add @wix\u002Fdesign-system`).\n\n## Helper Script\n\nThis skill bundles `scripts\u002Fwds.cjs` — a Node.js helper that auto-discovers `@wix\u002Fdesign-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\u002Fwds.cjs\nWDS=\"\u003Cthis-skill-dir>\u002Fscripts\u002Fwds.cjs\"\n\nnode $WDS search \u003Ckeyword>                 # Find components by keyword\nnode $WDS component \u003CName>                 # Get props + example list (one component)\nnode $WDS components \u003CName1> \u003CName2>...    # Same as `component`, but for several at once\nnode $WDS example \u003CName> \"\u003CExampleName>\"   # Get a specific example\nnode $WDS testkit \u003CName> [method]          # Get testkit imports + driver API\nnode $WDS icons \u003Cquery>                    # 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\u002Fwix-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\u002F@wix\u002Fdesign-system\u002Fdist\u002Fdocs\u002F`:\n\n- `components.md` — component catalog (~978 lines, grep only)\n- `components\u002F{Name}Props.md` — props per component\n- `components\u002F{Name}Examples.md` — examples per component (grep `^### ` for section list)\n- `components\u002F{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\u002Flimit. See [references\u002Ffile-structure.md](references\u002Ffile-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\u002Fcontainer | `\u003CBox>` | Layout wrapper |\n| Text button | `\u003CTextButton>` | Secondary actions |\n| Input with label | `\u003CFormField>` + `\u003CInput>` | Wrap inputs |\n| Toggle | `\u003CToggleSwitch>` | On\u002Foff settings |\n| Modal | `\u003CModal>` + `\u003CCustomModalLayout>` | Use together |\n| Grid | `\u003CLayout>` + `\u003CCell>` | 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\u003CBox gap=\"SP2\" padding=\"SP3\">\n```\n\nOnly use SP tokens for `gap`, `padding`, `margin` — not for width\u002Fheight.\n\n## Imports\n\n```tsx\nimport { Button, Card, Image } from \"@wix\u002Fdesign-system\";\nimport { Add, Edit, Delete } from \"@wix\u002Fwix-ui-icons-common\";\n```\n\n### Troubleshooting\n\n- **Components render unstyled** (plain HTML look, missing WDS spacing\u002Ftypography): add `import \"@wix\u002Fdesign-system\u002Fstyles.global.css\";` once to the root\u002Fmain component (e.g. `page.tsx`, modal entry) — not child\u002Ftab\u002Fhelper files.\n",{"data":38,"body":41},{"name":4,"description":6,"metadata":39},{"verified":40},true,{"type":42,"children":43},"root",[44,53,90,97,117,455,461,468,555,560,566,593,598,603,655,668,674,713,718,724,784,789,795,832,868,874,887,973,986,990,996,1182,1188,1193,1350,1420,1448,1454,1580,1586,1615],{"type":45,"tag":46,"props":47,"children":49},"element","h1",{"id":48},"wds-documentation-navigator",[50],{"type":51,"value":52},"text","WDS Documentation Navigator",{"type":45,"tag":54,"props":55,"children":56},"p",{},[57,63,65,72,74,80,82,88],{"type":45,"tag":58,"props":59,"children":60},"strong",{},[61],{"type":51,"value":62},"Prerequisite:",{"type":51,"value":64}," ",{"type":45,"tag":66,"props":67,"children":69},"code",{"className":68},[],[70],{"type":51,"value":71},"@wix\u002Fdesign-system",{"type":51,"value":73}," must be installed (",{"type":45,"tag":66,"props":75,"children":77},{"className":76},[],[78],{"type":51,"value":79},"npm i @wix\u002Fdesign-system",{"type":51,"value":81}," or ",{"type":45,"tag":66,"props":83,"children":85},{"className":84},[],[86],{"type":51,"value":87},"yarn add @wix\u002Fdesign-system",{"type":51,"value":89},").",{"type":45,"tag":91,"props":92,"children":94},"h2",{"id":93},"helper-script",[95],{"type":51,"value":96},"Helper Script",{"type":45,"tag":54,"props":98,"children":99},{},[100,102,108,110,115],{"type":51,"value":101},"This skill bundles ",{"type":45,"tag":66,"props":103,"children":105},{"className":104},[],[106],{"type":51,"value":107},"scripts\u002Fwds.cjs",{"type":51,"value":109}," — a Node.js helper that auto-discovers ",{"type":45,"tag":66,"props":111,"children":113},{"className":112},[],[114],{"type":51,"value":71},{"type":51,"value":116}," 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:",{"type":45,"tag":118,"props":119,"children":124},"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# WDS is the absolute path to this skill's scripts\u002Fwds.cjs\nWDS=\"\u003Cthis-skill-dir>\u002Fscripts\u002Fwds.cjs\"\n\nnode $WDS search \u003Ckeyword>                 # Find components by keyword\nnode $WDS component \u003CName>                 # Get props + example list (one component)\nnode $WDS components \u003CName1> \u003CName2>...    # Same as `component`, but for several at once\nnode $WDS example \u003CName> \"\u003CExampleName>\"   # Get a specific example\nnode $WDS testkit \u003CName> [method]          # Get testkit imports + driver API\nnode $WDS icons \u003Cquery>                    # Search for icons\n","bash","",[125],{"type":45,"tag":66,"props":126,"children":127},{"__ignoreMap":123},[128,140,172,181,226,266,320,372,415],{"type":45,"tag":129,"props":130,"children":133},"span",{"class":131,"line":132},"line",1,[134],{"type":45,"tag":129,"props":135,"children":137},{"style":136},"--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic",[138],{"type":51,"value":139},"# WDS is the absolute path to this skill's scripts\u002Fwds.cjs\n",{"type":45,"tag":129,"props":141,"children":143},{"class":131,"line":142},2,[144,150,156,161,167],{"type":45,"tag":129,"props":145,"children":147},{"style":146},"--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8",[148],{"type":51,"value":149},"WDS",{"type":45,"tag":129,"props":151,"children":153},{"style":152},"--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF",[154],{"type":51,"value":155},"=",{"type":45,"tag":129,"props":157,"children":158},{"style":152},[159],{"type":51,"value":160},"\"",{"type":45,"tag":129,"props":162,"children":164},{"style":163},"--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D",[165],{"type":51,"value":166},"\u003Cthis-skill-dir>\u002Fscripts\u002Fwds.cjs",{"type":45,"tag":129,"props":168,"children":169},{"style":152},[170],{"type":51,"value":171},"\"\n",{"type":45,"tag":129,"props":173,"children":175},{"class":131,"line":174},3,[176],{"type":45,"tag":129,"props":177,"children":178},{"emptyLinePlaceholder":40},[179],{"type":51,"value":180},"\n",{"type":45,"tag":129,"props":182,"children":184},{"class":131,"line":183},4,[185,191,196,201,206,211,216,221],{"type":45,"tag":129,"props":186,"children":188},{"style":187},"--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B",[189],{"type":51,"value":190},"node",{"type":45,"tag":129,"props":192,"children":193},{"style":146},[194],{"type":51,"value":195}," $WDS ",{"type":45,"tag":129,"props":197,"children":198},{"style":163},[199],{"type":51,"value":200},"search",{"type":45,"tag":129,"props":202,"children":203},{"style":152},[204],{"type":51,"value":205}," \u003C",{"type":45,"tag":129,"props":207,"children":208},{"style":163},[209],{"type":51,"value":210},"keywor",{"type":45,"tag":129,"props":212,"children":213},{"style":146},[214],{"type":51,"value":215},"d",{"type":45,"tag":129,"props":217,"children":218},{"style":152},[219],{"type":51,"value":220},">",{"type":45,"tag":129,"props":222,"children":223},{"style":136},[224],{"type":51,"value":225},"                 # Find components by keyword\n",{"type":45,"tag":129,"props":227,"children":229},{"class":131,"line":228},5,[230,234,238,243,247,252,257,261],{"type":45,"tag":129,"props":231,"children":232},{"style":187},[233],{"type":51,"value":190},{"type":45,"tag":129,"props":235,"children":236},{"style":146},[237],{"type":51,"value":195},{"type":45,"tag":129,"props":239,"children":240},{"style":163},[241],{"type":51,"value":242},"component",{"type":45,"tag":129,"props":244,"children":245},{"style":152},[246],{"type":51,"value":205},{"type":45,"tag":129,"props":248,"children":249},{"style":163},[250],{"type":51,"value":251},"Nam",{"type":45,"tag":129,"props":253,"children":254},{"style":146},[255],{"type":51,"value":256},"e",{"type":45,"tag":129,"props":258,"children":259},{"style":152},[260],{"type":51,"value":220},{"type":45,"tag":129,"props":262,"children":263},{"style":136},[264],{"type":51,"value":265},"                 # Get props + example list (one component)\n",{"type":45,"tag":129,"props":267,"children":269},{"class":131,"line":268},6,[270,274,278,283,287,292,297,301,305,310,315],{"type":45,"tag":129,"props":271,"children":272},{"style":187},[273],{"type":51,"value":190},{"type":45,"tag":129,"props":275,"children":276},{"style":146},[277],{"type":51,"value":195},{"type":45,"tag":129,"props":279,"children":280},{"style":163},[281],{"type":51,"value":282},"components",{"type":45,"tag":129,"props":284,"children":285},{"style":152},[286],{"type":51,"value":205},{"type":45,"tag":129,"props":288,"children":289},{"style":163},[290],{"type":51,"value":291},"Name",{"type":45,"tag":129,"props":293,"children":294},{"style":152},[295],{"type":51,"value":296},"1>",{"type":45,"tag":129,"props":298,"children":299},{"style":152},[300],{"type":51,"value":205},{"type":45,"tag":129,"props":302,"children":303},{"style":163},[304],{"type":51,"value":291},{"type":45,"tag":129,"props":306,"children":307},{"style":152},[308],{"type":51,"value":309},"2>",{"type":45,"tag":129,"props":311,"children":312},{"style":163},[313],{"type":51,"value":314},"...",{"type":45,"tag":129,"props":316,"children":317},{"style":136},[318],{"type":51,"value":319},"    # Same as `component`, but for several at once\n",{"type":45,"tag":129,"props":321,"children":323},{"class":131,"line":322},7,[324,328,332,337,341,345,349,353,358,363,367],{"type":45,"tag":129,"props":325,"children":326},{"style":187},[327],{"type":51,"value":190},{"type":45,"tag":129,"props":329,"children":330},{"style":146},[331],{"type":51,"value":195},{"type":45,"tag":129,"props":333,"children":334},{"style":163},[335],{"type":51,"value":336},"example",{"type":45,"tag":129,"props":338,"children":339},{"style":152},[340],{"type":51,"value":205},{"type":45,"tag":129,"props":342,"children":343},{"style":163},[344],{"type":51,"value":251},{"type":45,"tag":129,"props":346,"children":347},{"style":146},[348],{"type":51,"value":256},{"type":45,"tag":129,"props":350,"children":351},{"style":152},[352],{"type":51,"value":220},{"type":45,"tag":129,"props":354,"children":355},{"style":152},[356],{"type":51,"value":357}," \"",{"type":45,"tag":129,"props":359,"children":360},{"style":163},[361],{"type":51,"value":362},"\u003CExampleName>",{"type":45,"tag":129,"props":364,"children":365},{"style":152},[366],{"type":51,"value":160},{"type":45,"tag":129,"props":368,"children":369},{"style":136},[370],{"type":51,"value":371},"   # Get a specific example\n",{"type":45,"tag":129,"props":373,"children":375},{"class":131,"line":374},8,[376,380,384,389,393,397,401,405,410],{"type":45,"tag":129,"props":377,"children":378},{"style":187},[379],{"type":51,"value":190},{"type":45,"tag":129,"props":381,"children":382},{"style":146},[383],{"type":51,"value":195},{"type":45,"tag":129,"props":385,"children":386},{"style":163},[387],{"type":51,"value":388},"testkit",{"type":45,"tag":129,"props":390,"children":391},{"style":152},[392],{"type":51,"value":205},{"type":45,"tag":129,"props":394,"children":395},{"style":163},[396],{"type":51,"value":251},{"type":45,"tag":129,"props":398,"children":399},{"style":146},[400],{"type":51,"value":256},{"type":45,"tag":129,"props":402,"children":403},{"style":152},[404],{"type":51,"value":220},{"type":45,"tag":129,"props":406,"children":407},{"style":146},[408],{"type":51,"value":409}," [method]          ",{"type":45,"tag":129,"props":411,"children":412},{"style":136},[413],{"type":51,"value":414},"# Get testkit imports + driver API\n",{"type":45,"tag":129,"props":416,"children":418},{"class":131,"line":417},9,[419,423,427,432,436,441,446,450],{"type":45,"tag":129,"props":420,"children":421},{"style":187},[422],{"type":51,"value":190},{"type":45,"tag":129,"props":424,"children":425},{"style":146},[426],{"type":51,"value":195},{"type":45,"tag":129,"props":428,"children":429},{"style":163},[430],{"type":51,"value":431},"icons",{"type":45,"tag":129,"props":433,"children":434},{"style":152},[435],{"type":51,"value":205},{"type":45,"tag":129,"props":437,"children":438},{"style":163},[439],{"type":51,"value":440},"quer",{"type":45,"tag":129,"props":442,"children":443},{"style":146},[444],{"type":51,"value":445},"y",{"type":45,"tag":129,"props":447,"children":448},{"style":152},[449],{"type":51,"value":220},{"type":45,"tag":129,"props":451,"children":452},{"style":136},[453],{"type":51,"value":454},"                    # Search for icons\n",{"type":45,"tag":91,"props":456,"children":458},{"id":457},"workflow",[459],{"type":51,"value":460},"Workflow",{"type":45,"tag":462,"props":463,"children":465},"h3",{"id":464},"step-1-find-the-right-component",[466],{"type":51,"value":467},"Step 1: Find the right component",{"type":45,"tag":118,"props":469,"children":471},{"className":120,"code":470,"language":122,"meta":123,"style":123},"node $WDS search table\nnode $WDS search form input validation\nnode $WDS search modal dialog popup\n",[472],{"type":45,"tag":66,"props":473,"children":474},{"__ignoreMap":123},[475,495,525],{"type":45,"tag":129,"props":476,"children":477},{"class":131,"line":132},[478,482,486,490],{"type":45,"tag":129,"props":479,"children":480},{"style":187},[481],{"type":51,"value":190},{"type":45,"tag":129,"props":483,"children":484},{"style":146},[485],{"type":51,"value":195},{"type":45,"tag":129,"props":487,"children":488},{"style":163},[489],{"type":51,"value":200},{"type":45,"tag":129,"props":491,"children":492},{"style":163},[493],{"type":51,"value":494}," table\n",{"type":45,"tag":129,"props":496,"children":497},{"class":131,"line":142},[498,502,506,510,515,520],{"type":45,"tag":129,"props":499,"children":500},{"style":187},[501],{"type":51,"value":190},{"type":45,"tag":129,"props":503,"children":504},{"style":146},[505],{"type":51,"value":195},{"type":45,"tag":129,"props":507,"children":508},{"style":163},[509],{"type":51,"value":200},{"type":45,"tag":129,"props":511,"children":512},{"style":163},[513],{"type":51,"value":514}," form",{"type":45,"tag":129,"props":516,"children":517},{"style":163},[518],{"type":51,"value":519}," input",{"type":45,"tag":129,"props":521,"children":522},{"style":163},[523],{"type":51,"value":524}," validation\n",{"type":45,"tag":129,"props":526,"children":527},{"class":131,"line":174},[528,532,536,540,545,550],{"type":45,"tag":129,"props":529,"children":530},{"style":187},[531],{"type":51,"value":190},{"type":45,"tag":129,"props":533,"children":534},{"style":146},[535],{"type":51,"value":195},{"type":45,"tag":129,"props":537,"children":538},{"style":163},[539],{"type":51,"value":200},{"type":45,"tag":129,"props":541,"children":542},{"style":163},[543],{"type":51,"value":544}," modal",{"type":45,"tag":129,"props":546,"children":547},{"style":163},[548],{"type":51,"value":549}," dialog",{"type":45,"tag":129,"props":551,"children":552},{"style":163},[553],{"type":51,"value":554}," popup\n",{"type":45,"tag":54,"props":556,"children":557},{},[558],{"type":51,"value":559},"Multiple keywords are OR-matched. Returns component names, descriptions, and usage guidance.",{"type":45,"tag":462,"props":561,"children":563},{"id":562},"step-2-get-props-and-available-examples",[564],{"type":51,"value":565},"Step 2: Get props and available examples",{"type":45,"tag":118,"props":567,"children":569},{"className":120,"code":568,"language":122,"meta":123,"style":123},"node $WDS component Button\n",[570],{"type":45,"tag":66,"props":571,"children":572},{"__ignoreMap":123},[573],{"type":45,"tag":129,"props":574,"children":575},{"class":131,"line":132},[576,580,584,588],{"type":45,"tag":129,"props":577,"children":578},{"style":187},[579],{"type":51,"value":190},{"type":45,"tag":129,"props":581,"children":582},{"style":146},[583],{"type":51,"value":195},{"type":45,"tag":129,"props":585,"children":586},{"style":163},[587],{"type":51,"value":242},{"type":45,"tag":129,"props":589,"children":590},{"style":163},[591],{"type":51,"value":592}," Button\n",{"type":45,"tag":54,"props":594,"children":595},{},[596],{"type":51,"value":597},"Returns 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.",{"type":45,"tag":54,"props":599,"children":600},{},[601],{"type":51,"value":602},"If 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:",{"type":45,"tag":118,"props":604,"children":606},{"className":120,"code":605,"language":122,"meta":123,"style":123},"node $WDS components Button Card Table Input Text Thumbnail\n",[607],{"type":45,"tag":66,"props":608,"children":609},{"__ignoreMap":123},[610],{"type":45,"tag":129,"props":611,"children":612},{"class":131,"line":132},[613,617,621,625,630,635,640,645,650],{"type":45,"tag":129,"props":614,"children":615},{"style":187},[616],{"type":51,"value":190},{"type":45,"tag":129,"props":618,"children":619},{"style":146},[620],{"type":51,"value":195},{"type":45,"tag":129,"props":622,"children":623},{"style":163},[624],{"type":51,"value":282},{"type":45,"tag":129,"props":626,"children":627},{"style":163},[628],{"type":51,"value":629}," Button",{"type":45,"tag":129,"props":631,"children":632},{"style":163},[633],{"type":51,"value":634}," Card",{"type":45,"tag":129,"props":636,"children":637},{"style":163},[638],{"type":51,"value":639}," Table",{"type":45,"tag":129,"props":641,"children":642},{"style":163},[643],{"type":51,"value":644}," Input",{"type":45,"tag":129,"props":646,"children":647},{"style":163},[648],{"type":51,"value":649}," Text",{"type":45,"tag":129,"props":651,"children":652},{"style":163},[653],{"type":51,"value":654}," Thumbnail\n",{"type":45,"tag":54,"props":656,"children":657},{},[658,660,666],{"type":51,"value":659},"Output is each component's props block separated by ",{"type":45,"tag":66,"props":661,"children":663},{"className":662},[],[664],{"type":51,"value":665},"---",{"type":51,"value":667},". Missing components are logged to stderr and skipped; the command only fails if every requested component is missing.",{"type":45,"tag":462,"props":669,"children":671},{"id":670},"step-3-get-a-specific-example",[672],{"type":51,"value":673},"Step 3: Get a specific example",{"type":45,"tag":118,"props":675,"children":677},{"className":120,"code":676,"language":122,"meta":123,"style":123},"node $WDS example Button \"Loading state\"\n",[678],{"type":45,"tag":66,"props":679,"children":680},{"__ignoreMap":123},[681],{"type":45,"tag":129,"props":682,"children":683},{"class":131,"line":132},[684,688,692,696,700,704,709],{"type":45,"tag":129,"props":685,"children":686},{"style":187},[687],{"type":51,"value":190},{"type":45,"tag":129,"props":689,"children":690},{"style":146},[691],{"type":51,"value":195},{"type":45,"tag":129,"props":693,"children":694},{"style":163},[695],{"type":51,"value":336},{"type":45,"tag":129,"props":697,"children":698},{"style":163},[699],{"type":51,"value":629},{"type":45,"tag":129,"props":701,"children":702},{"style":152},[703],{"type":51,"value":357},{"type":45,"tag":129,"props":705,"children":706},{"style":163},[707],{"type":51,"value":708},"Loading state",{"type":45,"tag":129,"props":710,"children":711},{"style":152},[712],{"type":51,"value":171},{"type":45,"tag":54,"props":714,"children":715},{},[716],{"type":51,"value":717},"Returns the example description and JSX code. Matching is case-insensitive and supports substrings (e.g., \"loading\" matches \"Loading state\").",{"type":45,"tag":462,"props":719,"children":721},{"id":720},"step-4-write-tests-with-the-component-testkit",[722],{"type":51,"value":723},"Step 4: Write tests with the component testkit",{"type":45,"tag":118,"props":725,"children":727},{"className":120,"code":726,"language":122,"meta":123,"style":123},"node $WDS testkit Button             # Imports + full driver API for Button\nnode $WDS testkit Button click       # Just the click() method details\n",[728],{"type":45,"tag":66,"props":729,"children":730},{"__ignoreMap":123},[731,755],{"type":45,"tag":129,"props":732,"children":733},{"class":131,"line":132},[734,738,742,746,750],{"type":45,"tag":129,"props":735,"children":736},{"style":187},[737],{"type":51,"value":190},{"type":45,"tag":129,"props":739,"children":740},{"style":146},[741],{"type":51,"value":195},{"type":45,"tag":129,"props":743,"children":744},{"style":163},[745],{"type":51,"value":388},{"type":45,"tag":129,"props":747,"children":748},{"style":163},[749],{"type":51,"value":629},{"type":45,"tag":129,"props":751,"children":752},{"style":136},[753],{"type":51,"value":754},"             # Imports + full driver API for Button\n",{"type":45,"tag":129,"props":756,"children":757},{"class":131,"line":142},[758,762,766,770,774,779],{"type":45,"tag":129,"props":759,"children":760},{"style":187},[761],{"type":51,"value":190},{"type":45,"tag":129,"props":763,"children":764},{"style":146},[765],{"type":51,"value":195},{"type":45,"tag":129,"props":767,"children":768},{"style":163},[769],{"type":51,"value":388},{"type":45,"tag":129,"props":771,"children":772},{"style":163},[773],{"type":51,"value":629},{"type":45,"tag":129,"props":775,"children":776},{"style":163},[777],{"type":51,"value":778}," click",{"type":45,"tag":129,"props":780,"children":781},{"style":136},[782],{"type":51,"value":783},"       # Just the click() method details\n",{"type":45,"tag":54,"props":785,"children":786},{},[787],{"type":51,"value":788},"Returns 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.",{"type":45,"tag":462,"props":790,"children":792},{"id":791},"step-5-find-icons",[793],{"type":51,"value":794},"Step 5: Find icons",{"type":45,"tag":118,"props":796,"children":798},{"className":120,"code":797,"language":122,"meta":123,"style":123},"node $WDS icons Add Edit Delete\n",[799],{"type":45,"tag":66,"props":800,"children":801},{"__ignoreMap":123},[802],{"type":45,"tag":129,"props":803,"children":804},{"class":131,"line":132},[805,809,813,817,822,827],{"type":45,"tag":129,"props":806,"children":807},{"style":187},[808],{"type":51,"value":190},{"type":45,"tag":129,"props":810,"children":811},{"style":146},[812],{"type":51,"value":195},{"type":45,"tag":129,"props":814,"children":815},{"style":163},[816],{"type":51,"value":431},{"type":45,"tag":129,"props":818,"children":819},{"style":163},[820],{"type":51,"value":821}," Add",{"type":45,"tag":129,"props":823,"children":824},{"style":163},[825],{"type":51,"value":826}," Edit",{"type":45,"tag":129,"props":828,"children":829},{"style":163},[830],{"type":51,"value":831}," Delete\n",{"type":45,"tag":54,"props":833,"children":834},{},[835,837,843,845,851,853,859,861,867],{"type":51,"value":836},"Icons are from ",{"type":45,"tag":66,"props":838,"children":840},{"className":839},[],[841],{"type":51,"value":842},"@wix\u002Fwix-ui-icons-common",{"type":51,"value":844},". Each icon has a ",{"type":45,"tag":66,"props":846,"children":848},{"className":847},[],[849],{"type":51,"value":850},"Small",{"type":51,"value":852}," variant (e.g., ",{"type":45,"tag":66,"props":854,"children":856},{"className":855},[],[857],{"type":51,"value":858},"Add",{"type":51,"value":860}," + ",{"type":45,"tag":66,"props":862,"children":864},{"className":863},[],[865],{"type":51,"value":866},"AddSmall",{"type":51,"value":89},{"type":45,"tag":91,"props":869,"children":871},{"id":870},"fallback-direct-file-access",[872],{"type":51,"value":873},"Fallback: Direct File Access",{"type":45,"tag":54,"props":875,"children":876},{},[877,879,885],{"type":51,"value":878},"If the script is unavailable, docs are at ",{"type":45,"tag":66,"props":880,"children":882},{"className":881},[],[883],{"type":51,"value":884},"node_modules\u002F@wix\u002Fdesign-system\u002Fdist\u002Fdocs\u002F",{"type":51,"value":886},":",{"type":45,"tag":888,"props":889,"children":890},"ul",{},[891,903,914,933,951,962],{"type":45,"tag":892,"props":893,"children":894},"li",{},[895,901],{"type":45,"tag":66,"props":896,"children":898},{"className":897},[],[899],{"type":51,"value":900},"components.md",{"type":51,"value":902}," — component catalog (~978 lines, grep only)",{"type":45,"tag":892,"props":904,"children":905},{},[906,912],{"type":45,"tag":66,"props":907,"children":909},{"className":908},[],[910],{"type":51,"value":911},"components\u002F{Name}Props.md",{"type":51,"value":913}," — props per component",{"type":45,"tag":892,"props":915,"children":916},{},[917,923,925,931],{"type":45,"tag":66,"props":918,"children":920},{"className":919},[],[921],{"type":51,"value":922},"components\u002F{Name}Examples.md",{"type":51,"value":924}," — examples per component (grep ",{"type":45,"tag":66,"props":926,"children":928},{"className":927},[],[929],{"type":51,"value":930},"^### ",{"type":51,"value":932}," for section list)",{"type":45,"tag":892,"props":934,"children":935},{},[936,942,944,949],{"type":45,"tag":66,"props":937,"children":939},{"className":938},[],[940],{"type":51,"value":941},"components\u002F{Name}Testkit.md",{"type":51,"value":943}," — testkit imports + driver API per component (grep ",{"type":45,"tag":66,"props":945,"children":947},{"className":946},[],[948],{"type":51,"value":930},{"type":51,"value":950}," for method list)",{"type":45,"tag":892,"props":952,"children":953},{},[954,960],{"type":45,"tag":66,"props":955,"children":957},{"className":956},[],[958],{"type":51,"value":959},"testkits.md",{"type":51,"value":961}," — testkit catalog (list of components with generated testkit docs)",{"type":45,"tag":892,"props":963,"children":964},{},[965,971],{"type":45,"tag":66,"props":966,"children":968},{"className":967},[],[969],{"type":51,"value":970},"icons.md",{"type":51,"value":972}," — icon catalog (~818 lines, grep only)",{"type":45,"tag":54,"props":974,"children":975},{},[976,978,984],{"type":51,"value":977},"Don't read these files fully. Grep for keywords, then read specific sections with offset\u002Flimit. See ",{"type":45,"tag":979,"props":980,"children":982},"a",{"href":981},"references\u002Ffile-structure.md",[983],{"type":51,"value":981},{"type":51,"value":985}," for the exact docs file layout and section shapes.",{"type":45,"tag":987,"props":988,"children":989},"hr",{},[],{"type":45,"tag":91,"props":991,"children":993},{"id":992},"quick-component-mapping-design-to-wds",[994],{"type":51,"value":995},"Quick Component Mapping (Design to WDS)",{"type":45,"tag":997,"props":998,"children":999},"table",{},[1000,1024],{"type":45,"tag":1001,"props":1002,"children":1003},"thead",{},[1004],{"type":45,"tag":1005,"props":1006,"children":1007},"tr",{},[1008,1014,1019],{"type":45,"tag":1009,"props":1010,"children":1011},"th",{},[1012],{"type":51,"value":1013},"Design Element",{"type":45,"tag":1009,"props":1015,"children":1016},{},[1017],{"type":51,"value":1018},"WDS Component",{"type":45,"tag":1009,"props":1020,"children":1021},{},[1022],{"type":51,"value":1023},"Notes",{"type":45,"tag":1025,"props":1026,"children":1027},"tbody",{},[1028,1051,1073,1102,1124,1153],{"type":45,"tag":1005,"props":1029,"children":1030},{},[1031,1037,1046],{"type":45,"tag":1032,"props":1033,"children":1034},"td",{},[1035],{"type":51,"value":1036},"Rectangle\u002Fcontainer",{"type":45,"tag":1032,"props":1038,"children":1039},{},[1040],{"type":45,"tag":66,"props":1041,"children":1043},{"className":1042},[],[1044],{"type":51,"value":1045},"\u003CBox>",{"type":45,"tag":1032,"props":1047,"children":1048},{},[1049],{"type":51,"value":1050},"Layout wrapper",{"type":45,"tag":1005,"props":1052,"children":1053},{},[1054,1059,1068],{"type":45,"tag":1032,"props":1055,"children":1056},{},[1057],{"type":51,"value":1058},"Text button",{"type":45,"tag":1032,"props":1060,"children":1061},{},[1062],{"type":45,"tag":66,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":51,"value":1067},"\u003CTextButton>",{"type":45,"tag":1032,"props":1069,"children":1070},{},[1071],{"type":51,"value":1072},"Secondary actions",{"type":45,"tag":1005,"props":1074,"children":1075},{},[1076,1081,1097],{"type":45,"tag":1032,"props":1077,"children":1078},{},[1079],{"type":51,"value":1080},"Input with label",{"type":45,"tag":1032,"props":1082,"children":1083},{},[1084,1090,1091],{"type":45,"tag":66,"props":1085,"children":1087},{"className":1086},[],[1088],{"type":51,"value":1089},"\u003CFormField>",{"type":51,"value":860},{"type":45,"tag":66,"props":1092,"children":1094},{"className":1093},[],[1095],{"type":51,"value":1096},"\u003CInput>",{"type":45,"tag":1032,"props":1098,"children":1099},{},[1100],{"type":51,"value":1101},"Wrap inputs",{"type":45,"tag":1005,"props":1103,"children":1104},{},[1105,1110,1119],{"type":45,"tag":1032,"props":1106,"children":1107},{},[1108],{"type":51,"value":1109},"Toggle",{"type":45,"tag":1032,"props":1111,"children":1112},{},[1113],{"type":45,"tag":66,"props":1114,"children":1116},{"className":1115},[],[1117],{"type":51,"value":1118},"\u003CToggleSwitch>",{"type":45,"tag":1032,"props":1120,"children":1121},{},[1122],{"type":51,"value":1123},"On\u002Foff settings",{"type":45,"tag":1005,"props":1125,"children":1126},{},[1127,1132,1148],{"type":45,"tag":1032,"props":1128,"children":1129},{},[1130],{"type":51,"value":1131},"Modal",{"type":45,"tag":1032,"props":1133,"children":1134},{},[1135,1141,1142],{"type":45,"tag":66,"props":1136,"children":1138},{"className":1137},[],[1139],{"type":51,"value":1140},"\u003CModal>",{"type":51,"value":860},{"type":45,"tag":66,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":51,"value":1147},"\u003CCustomModalLayout>",{"type":45,"tag":1032,"props":1149,"children":1150},{},[1151],{"type":51,"value":1152},"Use together",{"type":45,"tag":1005,"props":1154,"children":1155},{},[1156,1161,1177],{"type":45,"tag":1032,"props":1157,"children":1158},{},[1159],{"type":51,"value":1160},"Grid",{"type":45,"tag":1032,"props":1162,"children":1163},{},[1164,1170,1171],{"type":45,"tag":66,"props":1165,"children":1167},{"className":1166},[],[1168],{"type":51,"value":1169},"\u003CLayout>",{"type":51,"value":860},{"type":45,"tag":66,"props":1172,"children":1174},{"className":1173},[],[1175],{"type":51,"value":1176},"\u003CCell>",{"type":45,"tag":1032,"props":1178,"children":1179},{},[1180],{"type":51,"value":1181},"Responsive",{"type":45,"tag":91,"props":1183,"children":1185},{"id":1184},"spacing-px-to-sp-conversion",[1186],{"type":51,"value":1187},"Spacing (px to SP conversion)",{"type":45,"tag":54,"props":1189,"children":1190},{},[1191],{"type":51,"value":1192},"When designer specifies pixels, convert to the nearest SP token:",{"type":45,"tag":997,"props":1194,"children":1195},{},[1196,1217],{"type":45,"tag":1001,"props":1197,"children":1198},{},[1199],{"type":45,"tag":1005,"props":1200,"children":1201},{},[1202,1207,1212],{"type":45,"tag":1009,"props":1203,"children":1204},{},[1205],{"type":51,"value":1206},"Token",{"type":45,"tag":1009,"props":1208,"children":1209},{},[1210],{"type":51,"value":1211},"Classic",{"type":45,"tag":1009,"props":1213,"children":1214},{},[1215],{"type":51,"value":1216},"Studio",{"type":45,"tag":1025,"props":1218,"children":1219},{},[1220,1242,1264,1285,1307,1329],{"type":45,"tag":1005,"props":1221,"children":1222},{},[1223,1232,1237],{"type":45,"tag":1032,"props":1224,"children":1225},{},[1226],{"type":45,"tag":66,"props":1227,"children":1229},{"className":1228},[],[1230],{"type":51,"value":1231},"SP1",{"type":45,"tag":1032,"props":1233,"children":1234},{},[1235],{"type":51,"value":1236},"6px",{"type":45,"tag":1032,"props":1238,"children":1239},{},[1240],{"type":51,"value":1241},"4px",{"type":45,"tag":1005,"props":1243,"children":1244},{},[1245,1254,1259],{"type":45,"tag":1032,"props":1246,"children":1247},{},[1248],{"type":45,"tag":66,"props":1249,"children":1251},{"className":1250},[],[1252],{"type":51,"value":1253},"SP2",{"type":45,"tag":1032,"props":1255,"children":1256},{},[1257],{"type":51,"value":1258},"12px",{"type":45,"tag":1032,"props":1260,"children":1261},{},[1262],{"type":51,"value":1263},"8px",{"type":45,"tag":1005,"props":1265,"children":1266},{},[1267,1276,1281],{"type":45,"tag":1032,"props":1268,"children":1269},{},[1270],{"type":45,"tag":66,"props":1271,"children":1273},{"className":1272},[],[1274],{"type":51,"value":1275},"SP3",{"type":45,"tag":1032,"props":1277,"children":1278},{},[1279],{"type":51,"value":1280},"18px",{"type":45,"tag":1032,"props":1282,"children":1283},{},[1284],{"type":51,"value":1258},{"type":45,"tag":1005,"props":1286,"children":1287},{},[1288,1297,1302],{"type":45,"tag":1032,"props":1289,"children":1290},{},[1291],{"type":45,"tag":66,"props":1292,"children":1294},{"className":1293},[],[1295],{"type":51,"value":1296},"SP4",{"type":45,"tag":1032,"props":1298,"children":1299},{},[1300],{"type":51,"value":1301},"24px",{"type":45,"tag":1032,"props":1303,"children":1304},{},[1305],{"type":51,"value":1306},"16px",{"type":45,"tag":1005,"props":1308,"children":1309},{},[1310,1319,1324],{"type":45,"tag":1032,"props":1311,"children":1312},{},[1313],{"type":45,"tag":66,"props":1314,"children":1316},{"className":1315},[],[1317],{"type":51,"value":1318},"SP5",{"type":45,"tag":1032,"props":1320,"children":1321},{},[1322],{"type":51,"value":1323},"30px",{"type":45,"tag":1032,"props":1325,"children":1326},{},[1327],{"type":51,"value":1328},"20px",{"type":45,"tag":1005,"props":1330,"children":1331},{},[1332,1341,1346],{"type":45,"tag":1032,"props":1333,"children":1334},{},[1335],{"type":45,"tag":66,"props":1336,"children":1338},{"className":1337},[],[1339],{"type":51,"value":1340},"SP6",{"type":45,"tag":1032,"props":1342,"children":1343},{},[1344],{"type":51,"value":1345},"36px",{"type":45,"tag":1032,"props":1347,"children":1348},{},[1349],{"type":51,"value":1301},{"type":45,"tag":118,"props":1351,"children":1355},{"className":1352,"code":1353,"language":1354,"meta":123,"style":123},"language-tsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CBox gap=\"SP2\" padding=\"SP3\">\n","tsx",[1356],{"type":45,"tag":66,"props":1357,"children":1358},{"__ignoreMap":123},[1359],{"type":45,"tag":129,"props":1360,"children":1361},{"class":131,"line":132},[1362,1367,1372,1378,1382,1386,1390,1394,1399,1403,1407,1411,1415],{"type":45,"tag":129,"props":1363,"children":1364},{"style":152},[1365],{"type":51,"value":1366},"\u003C",{"type":45,"tag":129,"props":1368,"children":1369},{"style":187},[1370],{"type":51,"value":1371},"Box",{"type":45,"tag":129,"props":1373,"children":1375},{"style":1374},"--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA",[1376],{"type":51,"value":1377}," gap",{"type":45,"tag":129,"props":1379,"children":1380},{"style":152},[1381],{"type":51,"value":155},{"type":45,"tag":129,"props":1383,"children":1384},{"style":152},[1385],{"type":51,"value":160},{"type":45,"tag":129,"props":1387,"children":1388},{"style":163},[1389],{"type":51,"value":1253},{"type":45,"tag":129,"props":1391,"children":1392},{"style":152},[1393],{"type":51,"value":160},{"type":45,"tag":129,"props":1395,"children":1396},{"style":1374},[1397],{"type":51,"value":1398}," padding",{"type":45,"tag":129,"props":1400,"children":1401},{"style":152},[1402],{"type":51,"value":155},{"type":45,"tag":129,"props":1404,"children":1405},{"style":152},[1406],{"type":51,"value":160},{"type":45,"tag":129,"props":1408,"children":1409},{"style":163},[1410],{"type":51,"value":1275},{"type":45,"tag":129,"props":1412,"children":1413},{"style":152},[1414],{"type":51,"value":160},{"type":45,"tag":129,"props":1416,"children":1417},{"style":152},[1418],{"type":51,"value":1419},">\n",{"type":45,"tag":54,"props":1421,"children":1422},{},[1423,1425,1431,1433,1439,1440,1446],{"type":51,"value":1424},"Only use SP tokens for ",{"type":45,"tag":66,"props":1426,"children":1428},{"className":1427},[],[1429],{"type":51,"value":1430},"gap",{"type":51,"value":1432},", ",{"type":45,"tag":66,"props":1434,"children":1436},{"className":1435},[],[1437],{"type":51,"value":1438},"padding",{"type":51,"value":1432},{"type":45,"tag":66,"props":1441,"children":1443},{"className":1442},[],[1444],{"type":51,"value":1445},"margin",{"type":51,"value":1447}," — not for width\u002Fheight.",{"type":45,"tag":91,"props":1449,"children":1451},{"id":1450},"imports",[1452],{"type":51,"value":1453},"Imports",{"type":45,"tag":118,"props":1455,"children":1457},{"className":1352,"code":1456,"language":1354,"meta":123,"style":123},"import { Button, Card, Image } from \"@wix\u002Fdesign-system\";\nimport { Add, Edit, Delete } from \"@wix\u002Fwix-ui-icons-common\";\n",[1458],{"type":45,"tag":66,"props":1459,"children":1460},{"__ignoreMap":123},[1461,1524],{"type":45,"tag":129,"props":1462,"children":1463},{"class":131,"line":132},[1464,1470,1475,1479,1484,1488,1492,1497,1502,1507,1511,1515,1519],{"type":45,"tag":129,"props":1465,"children":1467},{"style":1466},"--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[1468],{"type":51,"value":1469},"import",{"type":45,"tag":129,"props":1471,"children":1472},{"style":152},[1473],{"type":51,"value":1474}," {",{"type":45,"tag":129,"props":1476,"children":1477},{"style":146},[1478],{"type":51,"value":629},{"type":45,"tag":129,"props":1480,"children":1481},{"style":152},[1482],{"type":51,"value":1483},",",{"type":45,"tag":129,"props":1485,"children":1486},{"style":146},[1487],{"type":51,"value":634},{"type":45,"tag":129,"props":1489,"children":1490},{"style":152},[1491],{"type":51,"value":1483},{"type":45,"tag":129,"props":1493,"children":1494},{"style":146},[1495],{"type":51,"value":1496}," Image",{"type":45,"tag":129,"props":1498,"children":1499},{"style":152},[1500],{"type":51,"value":1501}," }",{"type":45,"tag":129,"props":1503,"children":1504},{"style":1466},[1505],{"type":51,"value":1506}," from",{"type":45,"tag":129,"props":1508,"children":1509},{"style":152},[1510],{"type":51,"value":357},{"type":45,"tag":129,"props":1512,"children":1513},{"style":163},[1514],{"type":51,"value":71},{"type":45,"tag":129,"props":1516,"children":1517},{"style":152},[1518],{"type":51,"value":160},{"type":45,"tag":129,"props":1520,"children":1521},{"style":152},[1522],{"type":51,"value":1523},";\n",{"type":45,"tag":129,"props":1525,"children":1526},{"class":131,"line":142},[1527,1531,1535,1539,1543,1547,1551,1556,1560,1564,1568,1572,1576],{"type":45,"tag":129,"props":1528,"children":1529},{"style":1466},[1530],{"type":51,"value":1469},{"type":45,"tag":129,"props":1532,"children":1533},{"style":152},[1534],{"type":51,"value":1474},{"type":45,"tag":129,"props":1536,"children":1537},{"style":146},[1538],{"type":51,"value":821},{"type":45,"tag":129,"props":1540,"children":1541},{"style":152},[1542],{"type":51,"value":1483},{"type":45,"tag":129,"props":1544,"children":1545},{"style":146},[1546],{"type":51,"value":826},{"type":45,"tag":129,"props":1548,"children":1549},{"style":152},[1550],{"type":51,"value":1483},{"type":45,"tag":129,"props":1552,"children":1553},{"style":146},[1554],{"type":51,"value":1555}," Delete",{"type":45,"tag":129,"props":1557,"children":1558},{"style":152},[1559],{"type":51,"value":1501},{"type":45,"tag":129,"props":1561,"children":1562},{"style":1466},[1563],{"type":51,"value":1506},{"type":45,"tag":129,"props":1565,"children":1566},{"style":152},[1567],{"type":51,"value":357},{"type":45,"tag":129,"props":1569,"children":1570},{"style":163},[1571],{"type":51,"value":842},{"type":45,"tag":129,"props":1573,"children":1574},{"style":152},[1575],{"type":51,"value":160},{"type":45,"tag":129,"props":1577,"children":1578},{"style":152},[1579],{"type":51,"value":1523},{"type":45,"tag":462,"props":1581,"children":1583},{"id":1582},"troubleshooting",[1584],{"type":51,"value":1585},"Troubleshooting",{"type":45,"tag":888,"props":1587,"children":1588},{},[1589],{"type":45,"tag":892,"props":1590,"children":1591},{},[1592,1597,1599,1605,1607,1613],{"type":45,"tag":58,"props":1593,"children":1594},{},[1595],{"type":51,"value":1596},"Components render unstyled",{"type":51,"value":1598}," (plain HTML look, missing WDS spacing\u002Ftypography): add ",{"type":45,"tag":66,"props":1600,"children":1602},{"className":1601},[],[1603],{"type":51,"value":1604},"import \"@wix\u002Fdesign-system\u002Fstyles.global.css\";",{"type":51,"value":1606}," once to the root\u002Fmain component (e.g. ",{"type":45,"tag":66,"props":1608,"children":1610},{"className":1609},[],[1611],{"type":51,"value":1612},"page.tsx",{"type":51,"value":1614},", modal entry) — not child\u002Ftab\u002Fhelper files.",{"type":45,"tag":1616,"props":1617,"children":1618},"style",{},[1619],{"type":51,"value":1620},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"items":1622,"total":1777},[1623,1639,1651,1663,1678,1688,1699,1711,1728,1742,1757,1769],{"slug":1624,"name":1624,"fn":1625,"description":1626,"org":1627,"tags":1628,"stars":26,"repoUrl":27,"updatedAt":1638},"rp-discovery","discover source platform schema for migration","Discovers and documents the source platform schema (entities, fields, relationships) for a migration project. Use when capturing source structure before mapping to Wix.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1629,1632,1635],{"name":1630,"slug":1631,"type":13},"Data Modeling","data-modeling",{"name":1633,"slug":1634,"type":13},"Documentation","documentation",{"name":1636,"slug":1637,"type":13},"Migration","migration","2026-07-01T08:08:08.302261",{"slug":1640,"name":1640,"fn":1641,"description":1642,"org":1643,"tags":1644,"stars":26,"repoUrl":27,"updatedAt":1650},"rp-execute-import","execute migration pipelines to Wix","Runs the generated extract\u002Fimport pipeline and records execution results. Use when setup and codegen are complete and the user has approved the execution plan.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1645,1648,1649],{"name":1646,"slug":1647,"type":13},"Data Pipeline","data-pipeline",{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:07.038962",{"slug":1652,"name":1652,"fn":1653,"description":1654,"org":1655,"tags":1656,"stars":26,"repoUrl":27,"updatedAt":1662},"rp-execute-setup","provision Wix site setup for migration","Verifies and provisions Wix-side setup required before import. Use after codegen when setup-requirements.md must be validated or executed against the target site.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1657,1660,1661],{"name":1658,"slug":1659,"type":13},"Deployment","deployment",{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:04.475894",{"slug":1664,"name":1664,"fn":1665,"description":1666,"org":1667,"tags":1668,"stars":26,"repoUrl":27,"updatedAt":1677},"rp-import-codegen","generate migration code for Wix","Generates migration readers, transforms, and Wix writers from schema and mapping artifacts. Use when producing runnable extract\u002Fimport code under the migration project.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1669,1672,1675,1676],{"name":1670,"slug":1671,"type":13},"Automation","automation",{"name":1673,"slug":1674,"type":13},"Data Engineering","data-engineering",{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:05.755188",{"slug":1679,"name":1679,"fn":1680,"description":1681,"org":1682,"tags":1683,"stars":26,"repoUrl":27,"updatedAt":1687},"rp-mapper","map source entities to Wix targets","Maps discovered source entities and fields to Wix targets and documents lossiness. Use when creating mapping-plan.md and mapping-summary.md after discovery.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1684,1685,1686],{"name":1630,"slug":1631,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:01.958081",{"slug":1689,"name":1689,"fn":1690,"description":1691,"org":1692,"tags":1693,"stars":26,"repoUrl":27,"updatedAt":1698},"rp-orchestration","orchestrate Wix site migrations","Routes RePlatform source-to-Wix migrations to the next workflow step by inspecting migration project artifacts. Use when starting, continuing, or recovering a migration run.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1694,1695,1696,1697],{"name":1670,"slug":1671,"type":13},{"name":1658,"slug":1659,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:08:09.570887",{"slug":1700,"name":1700,"fn":1701,"description":1702,"org":1703,"tags":1704,"stars":26,"repoUrl":27,"updatedAt":1710},"rp-setup-discovery","set up Wix environment prerequisites","Derives Wix environment prerequisites (apps, collections, schemas) from an approved mapping plan. Use after mapping review and before import code generation.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1705,1708,1709],{"name":1706,"slug":1707,"type":13},"Configuration","configuration",{"name":1630,"slug":1631,"type":13},{"name":9,"slug":8,"type":13},"2026-07-01T08:07:59.413698",{"slug":1712,"name":1712,"fn":1713,"description":1714,"org":1715,"tags":1716,"stars":26,"repoUrl":27,"updatedAt":1727},"rp-source-wordpress","capture data from WordPress and WooCommerce","WordPress and WooCommerce source adapter: REST capture, auth, pagination, and read contract for codegen. Use when the source platform is WordPress or WooCommerce.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1717,1718,1721,1724],{"name":1673,"slug":1674,"type":13},{"name":1719,"slug":1720,"type":13},"REST API","rest-api",{"name":1722,"slug":1723,"type":13},"WooCommerce","woocommerce",{"name":1725,"slug":1726,"type":13},"WordPress","wordpress","2026-07-01T08:08:00.69949",{"slug":1729,"name":1729,"fn":1730,"description":1731,"org":1732,"tags":1733,"stars":26,"repoUrl":27,"updatedAt":1741},"rp-target-wix","validate Wix API write operations","Wix target adapter with verified write primitives (wix-writers.js) and contract tests. Use when vendoring Wix writers, validating API shapes, or Wix provisioning mechanics.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1734,1737,1740],{"name":1735,"slug":1736,"type":13},"API Development","api-development",{"name":1738,"slug":1739,"type":13},"Testing","testing",{"name":9,"slug":8,"type":13},"2026-07-01T08:08:03.226054",{"slug":1743,"name":1743,"fn":1744,"description":1745,"org":1746,"tags":1747,"stars":26,"repoUrl":27,"updatedAt":1756},"wix-app","build Wix CLI app extensions","Build and review Wix CLI app extensions — dashboard pages, modals, plugins, menu plugins, custom element widgets, Editor React components, site plugins, embedded scripts, backend APIs, backend events, service plugins, data collections, and App Market readiness. Use when building ANY feature or extension for a Wix CLI app or preparing a Wix app for App Market review. Triggers on: add, build, create, implement, help me, dashboard, widget, plugin, backend, API, event, collection, embedded script, service plugin, Editor React component, checkout, shipping, tax, discount, SPI, CMS, schema, tracking, popup, admin panel, menu item, modal, validate, test, verify, register extension, App Market, app review, submission readiness.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1748,1751,1754,1755],{"name":1749,"slug":1750,"type":13},"Backend","backend",{"name":1752,"slug":1753,"type":13},"CLI","cli",{"name":21,"slug":22,"type":13},{"name":9,"slug":8,"type":13},"2026-04-16T04:58:00.157961",{"slug":1758,"name":1758,"fn":1759,"description":1760,"org":1761,"tags":1762,"stars":26,"repoUrl":27,"updatedAt":1768},"wix-auth","authenticate with Wix APIs","Authenticate with Wix to obtain an access token for calling Wix APIs. Use when an agent needs a valid Wix access token and has none, or when the stored token is expired.",{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1763,1764,1767],{"name":1735,"slug":1736,"type":13},{"name":1765,"slug":1766,"type":13},"Auth","auth",{"name":9,"slug":8,"type":13},"2026-07-07T06:47:46.95263",{"slug":4,"name":4,"fn":5,"description":6,"org":1770,"tags":1771,"stars":26,"repoUrl":27,"updatedAt":28},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1772,1773,1774,1775,1776],{"name":24,"slug":25,"type":13},{"name":15,"slug":16,"type":13},{"name":21,"slug":22,"type":13},{"name":18,"slug":19,"type":13},{"name":9,"slug":8,"type":13},17,{"items":1779,"total":1824},[1780,1786,1792,1798,1805,1811,1818],{"slug":1624,"name":1624,"fn":1625,"description":1626,"org":1781,"tags":1782,"stars":26,"repoUrl":27,"updatedAt":1638},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1783,1784,1785],{"name":1630,"slug":1631,"type":13},{"name":1633,"slug":1634,"type":13},{"name":1636,"slug":1637,"type":13},{"slug":1640,"name":1640,"fn":1641,"description":1642,"org":1787,"tags":1788,"stars":26,"repoUrl":27,"updatedAt":1650},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1789,1790,1791],{"name":1646,"slug":1647,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},{"slug":1652,"name":1652,"fn":1653,"description":1654,"org":1793,"tags":1794,"stars":26,"repoUrl":27,"updatedAt":1662},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1795,1796,1797],{"name":1658,"slug":1659,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},{"slug":1664,"name":1664,"fn":1665,"description":1666,"org":1799,"tags":1800,"stars":26,"repoUrl":27,"updatedAt":1677},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1801,1802,1803,1804],{"name":1670,"slug":1671,"type":13},{"name":1673,"slug":1674,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},{"slug":1679,"name":1679,"fn":1680,"description":1681,"org":1806,"tags":1807,"stars":26,"repoUrl":27,"updatedAt":1687},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1808,1809,1810],{"name":1630,"slug":1631,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},{"slug":1689,"name":1689,"fn":1690,"description":1691,"org":1812,"tags":1813,"stars":26,"repoUrl":27,"updatedAt":1698},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1814,1815,1816,1817],{"name":1670,"slug":1671,"type":13},{"name":1658,"slug":1659,"type":13},{"name":1636,"slug":1637,"type":13},{"name":9,"slug":8,"type":13},{"slug":1700,"name":1700,"fn":1701,"description":1702,"org":1819,"tags":1820,"stars":26,"repoUrl":27,"updatedAt":1710},{"slug":8,"name":9,"logoUrl":10,"githubOrg":8},[1821,1822,1823],{"name":1706,"slug":1707,"type":13},{"name":1630,"slug":1631,"type":13},{"name":9,"slug":8,"type":13},16]