skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

wix-design-system

Look up Wix Design System components, props, examples, testkits, and icons from installed package docs.

Updated Apr 19, 2026
Search Tags:#icons#design-system#react components#testkit#ui documentation#wix#props lookup
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill wix-design-system-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: wix-design-system
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/wix-design-system
Command: npx skills add https://github.com/divinaarmuela/Content --skill wix-design-system-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @wix/design-system, @wix/wix-ui-icons-common, and includes scripts (resource) and references (resource) components.

What problem does it solve? Building UI with @wix/design-system requires knowing which component fits a design, what props it accepts, and how to test it, but the documentation lives inside node_modules and is tedious to navigate manually. ## Core Features & Use Cases - Component Discovery: Search the WDS component catalog by keyword to find the right component for a design element, with usage do's and don'ts. - Props and Examples Lookup: Retrieve full prop lists with types and descriptions, plus ready-to-use JSX examples for any component, including batch lookups for multiple components at once. - Testkit and Icon Reference: Get testkit driver APIs for unidriver, vanilla, puppeteer, and playwright flavors, and search the @wix/wix-ui-icons-common icon catalog. - Use Case: A developer needs to build a settings page with a toggle and a modal. They search for the right components, pull props and examples for ToggleSwitch and Modal, then grab the Button testkit driver API to write interaction tests. ## Quick Start Ask the assistant to show the props and a loading-state example for the WDS Button component using the wix-design-system skill.

Frequently Asked Questions about wix-design-system

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find the right Wix Design System component for my UI?▼

Run the bundled wds.cjs script with the search command and one or more keywords, such as "search form input validation". It returns matching component names with descriptions and usage guidance from the WDS component catalog.

How do I get props and examples for a WDS component like Button?▼

Use the component command with the component name, for example "component Button", to get the full props list with types and descriptions plus all available examples. Use the example command with an example name to retrieve specific JSX code.

Does the WDS testkit support playwright and puppeteer?▼

Yes, the testkit command returns import snippets for unidriver, vanilla, puppeteer, and playwright flavors along with the driver method API. You can also query a single method, such as "testkit Button click", for its signature and return type.

Why do my WDS components render unstyled without spacing or typography?▼

Components render as plain HTML when the global stylesheet is missing. Add "import '@wix/design-system/styles.global.css'" once to your root or main component file, not to child or helper files.

What happens if @wix/design-system is not installed in my project?▼

The helper script exits with an error telling you to install the package first via npm or yarn. It auto-discovers the package in node_modules, handling monorepos, workspaces, pnpm, and Yarn PnP setups.

Related Skills

Explore More Software Engineering Skills→
Yuli1003Yuli1003

wix-design-system

Search Wix Design System components, inspect props, and access testkits.

Community
Intermediate
bennypowersbennypowers
46

gen-tests

Generates Playwright or Puppeteer-based page object tests for custom elements from cem serve's DevTools previews.

Community
Advanced
equinorequinor
9

equinor-design-system

Enforce Equinor Design System rules for brand-compliant UI styling.

Official
Basic
partme-aipartme-ai
610

ant-design-react

Guide Ant Design React component usage with TypeScript and design system support.

Official
Intermediate