skilld
All skills
wix avatar

/wix-design-system

@4a1a848 official
by Wix.comwix/skills33 stars
33

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.

Ask your Agent

Use this Skill: https://skilld.dev/gh/wix/skills/wix-design-system

This session only. Nothing lands on disk.

referencesfile-structure.md

≈273 tokens on demand. Your agent reads this file only when SKILL.md points to it.

WDS Docs File Structure

All files are under node_modules/@wix/design-system/dist/docs/.

Example File Format

## Feature Examples

### ExampleName

- description: What it shows
- example:

```jsx
<Component prop="value">Content</Component>
```

Props File Format

### propName
- type: TypeDefinition
- description: What it does

Testkit File Format

components/{Name}Testkit.md:

## {Name} Testkit

### Import

- unidriver: `import { {Name}UniDriver } from '@wix/design-system/dist/testkit/unidriver';`
- vanilla: `import { {Name}Testkit } from '@wix/design-system/dist/testkit';`
- puppeteer: `import { {Name}Testkit } from '@wix/design-system/dist/testkit/puppeteer';`
- playwright: `import { {Name}Testkit } from '@wix/design-system/dist/testkit/playwright';`

### API

### methodName
- signature: methodName(arg)
- returns: Promise<ReturnType>
- description: What it does

Common Components

High-traffic (learn these patterns)

  • Button, Input, FormField, Dropdown
  • Table, Card, Page, Modal
  • Box, Layout, Cell

Source: SKILL.md on GitHub

Third-party checks

No alerts16d3 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is safe. It provides a local utility to navigate and search Wix Design System documentation from the project's local node_modules directory using a bundled helper script. No security issues or malicious patterns were found.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

Provenance

Signed by skilld at 4a1a848. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub yesterday.

Activeupdated 2 months ago

Capability

metadata
{
  "verified": true
}

Topics

  • React
  • wix
  • design-system
  • ui-components
  • testkit
  • unidriver
  • playwright
  • puppeteer
  • icons
  • props-reference

README badge

README badge for wix/skills/wix-design-system

What it does

Provides lookup access to Wix Design System (@wix/design-system) components, props, examples, testkits, and icons via a bundled Node.js script. Use when choosing components, checking APIs, writing component tests, or converting design specs to WDS markup.

Generated from the current SKILL.md.

Frequently asked

What is @wix/design-system and do I need it installed?
It's Wix's component library. Yes, you must have @wix/design-system installed in your project (npm i @wix/design-system or yarn add @wix/design-system) for this skill to work.
How do I look up a specific component's props and examples?
Run `node $WDS component Button` (or any component name) to get the full props list and available examples. Use `node $WDS components Button Card Table` to batch-fetch multiple components at once.
How do I write tests for WDS components?
Use `node $WDS testkit Button` to get testkit import snippets (unidriver, vanilla, puppeteer, playwright) and the full driver API. Append a method name like `node $WDS testkit Button click` for details on a specific method.
Why are my WDS components rendering unstyled?
Add `import '@wix/design-system/styles.global.css';` once to your root/main component file (like page.tsx). Missing this import causes WDS components to render as plain HTML without spacing or typography.
Can I search for icons and what package do they come from?
Yes, run `node $WDS icons Add Edit Delete` to search icons. Icons come from @wix/wix-ui-icons-common; each icon has a Small variant (e.g., Add and AddSmall).

Generated from the current SKILL.md. These answers refresh after source changes.